Parte 1:

Hoy os comparto mi trabajo para esta segunda parte de la asignatura. Teníamos que desarrollar dos partes: una centrada en elementos de interacción, y otra relacionada con las hojas de estilo y la iconografía de Grover.

Intenté mantenerme a seguir la metodología de atomic design. Para que la estructura de capas y páginas fuera mucho más clara.

Para empezar, os muestro cómo definí los estilos de texto y color. Esta parte es clave, porque si lo dejamos bien planteado desde el inicio, luego todo el sistema es mucho más fácil de aplicar.

os comparto el link de algunas de las interacciones de la parte 1 https://www.figma.com/proto/eNiyAYx4r17TpRu5t0AAsL/Prototipado-2?node-id=2032-39&p=f&t=AnDR6lAmn6f1rodB-0&scaling=min-zoom&content-scaling=fixed&page-id=2032%3A39

Abajo comparto mi UI kit, junto a las interacciones e iconos

Parte 2:

Os comparto un video de mi planteamiento para la segunda parte. Hice dos opciones, una más simple y otra con más páginas.

link del prototipo: https://www.figma.com/design/eNiyAYx4r17TpRu5t0AAsL/Prototipado-2?node-id=2034-268&p=f&t=qd8yuyfYxG1LpDbY-0

Buenos días a todos,

Para este segundo reto lo primero que realicé fue el UI KIT. Ya que de la manera que yo tenía pensado mostrar las galería de instancias muchos de los componentes contenían iconos, lo primero que quise realizar fueron los elementos de estilo, posteriormente la iconografía y finalmente los elementos de interacción, ya que de esta manera podría utilizar las referencias que había creado antes para ir mucho más rápido.

El primer frame corresponde a los dos primeros apartados, los elementos de estilo y la iconografía. Dentro de él encontramos 4 secciones, la tipografía, la cual utilizando el inspector en la página web averigüé que se trata de «Inter», la paleta de colores en el cual existen 6 primarios, y luego tanto el amarillo como el verde son colores que he encontrado en los switch y por eso he querido añadirlos.

Posteriormente, en cuanto a los estilos de forma, averigüé que Grover utiliza unos recuadros siempre de la misma tonalidad gris clara con un grosor de 2px en sus espacios, y que los radios de las esquinas principalmente son de 8px para los recuadros más grandes y 5px para alguno en concreto más pequeño. En Grover también es muy habitual el uso de elipses que yo he creado mediante un rectángulo y poniéndole de corner-radius la mitad de la altura de dicho recuadro.

Los iconos los hay de muchos estilos, pero principalmente son de un tamaño de 24x24px y luego pues los hay con fondo, sin fondo, gris/negros, blancos, banderas…

Finalmente, el el segundo frame recreé los diversos estilos de interacción que fui encontrando tanto por la App como en la web, ya que para esta segunda entrega me he centrado mucho en la web porque podía utilizar el inspector para conocer mejor los tamaños de los elementos, los padding…

El resultado de este segundo frame se traduce en una galería de instancias que puede visitarse en el siguiente link:

https://www.figma.com/proto/iJ429W8f5InZsxIKdLhlz6/Prototipado_Reto2?page-id=2083%3A498&node-id=2083-499&p=f&viewport=25%2C260%2C0.21&t=kvAa52N4yAFH54vp-1&scaling=min-zoom&content-scaling=fixed

Muchas gracias por la atención,

Aitor Umerez