Hola compis!

Os dejo en el siguiente enlace el acceso a mi UI Kit y a los tres breakpoints que he realizado a partir de la guía de estilo planteada.

Acceso Figma Héctor Barberán

A partir del soporte web he podido determinar todos los elementos que luego he empleado para construir las tres propuestas (Web, tablet y móvil).

Tras un análisis previo de las tres interfaces que tiene Wallapop para los tres soportes mencionados, comencé por extraer la gama de colores primarios y secundarios de los que hace uso a lo largo de toda la interfaz y así poder componer una paleta de colores que ayudarán al posterior diseño.

En segundo lugar, se han estructurado las tipografías que se utilizan y los diferentes pesos que estas presentan tanto para los headers, botones, cuerpos de texto, etc.

A continuación, se han extraído los elementos más destacados que se pueden recoger en la página de home de la página y de las secciones que se proponían en el briefing del proyecto.

Una vez analizados todos los botones, buscadores, checkbox, iconos, diferentes estados de botones o sliders entre otros elementos, se ha pasado a analizar la estructura de retículas que las tres interfaces tienen para poder comenzar a determinar la distribución de todos los elementos en los diferentes breakpoints que se han diseñado.

En conclusión, me ha parecido muy interesante poder realizar este trabajo, prácticamente no conocía nada de Figma y me ha servido para adquirir una base que me ayude a continuar experimentando.

 

Un saludo!