Taller de Figma
Prototipado simple
Cuál es el valor de Figma
Para que este taller quede completo necesitamos que el prototipo sea funcional. Imagínense que ustedes son diseñadoras de Spotify y este ejercicio que hacemos es lo que van a mostrar a sus jefes como el diseño que saldrá como relanzamiento de la app. Si bien aún no está desarrollado en programación, y ese no es el trabajo para el que las contrataron, sus jefes tienen que entender cómo va a funcionar el diseño.
Acá es donde entra Figma. Antes, los prototipos se presentaban estáticos o tocaba hacer todo el desarrollo para después realizar cambios de diseño. El flujo de trabajo era muy demorado y había tiempos muy largos para aprobar y testear las ideas. Softwares como Figma permiten plantear prototipos sin necesidad de programarlos, pero con la posibilidad de mostrar las ideas animadas y entender cómo funcionarán.
Ejercicio de Spotify
Vinculación
Para esta parte del taller ustedes ya tienen tres mesas de trabajo de Spotify desarrolladas, pero… ¿cómo se navega entre ellas? Por ejemplo, si yo doy tap o click en el botón de música, eso llevará a mi segunda mesa de trabajo:
- Van a identificar todas estas interacciones en su ejercicio.
- En la barra lateral derecha de Figma existen tres paneles: Diseño, Prototipo e Inspeccionar. Entrarán a Prototipo. En este panel podrán vincular botones, imágenes, textos o íconos con otras mesas de trabajo.
- Si pasan su cursor por encima de alguno de los elementos de sus mesas de trabajo, verán que aparece un contorno azul con un punto o botón en alguno de sus lados.
- Van a elegir uno de los botones, textos o imágenes que quieren vincular con otra mesa de trabajo. Cuando se paren sobre este elemento, sostendrán su cursor desde el punto que aparece en el contorno y arrastrarán hacia la mesa de trabajo que quieran vincular. Debe aparerles una flecha que conecta ambos puntos:
Así, cuando den play a su prototipo (botón en la parte superior derecha) sus mesas de trabajo quedarán conectadas.
5. Deben realizar esto a todas las posibles vinculaciones existentes entre sus tres mesas de trabajo.
Animación
Estas interacciones entre mesas de trabajo o elementos gráficos suelen tener cierto tipo de animaciones. Por ejemplo, un deslizamiento de la mesa a la izquierda o derecha, una especie de difuminado, entre otras.
Para explorar este tipo de animaciones, deben seleccionar una de las conexiones que ya hicieron y en el panel lateral se abrirá una nueva ventana.
Ahí, seleccionaran
- El tipo de interacción con el que se activará la animación (si es al hacer tap en el celular, o click en el computador, o al pasar el cursor sobre el elemento, …)
- A dónde van a enviar al usuario con la interacción (esto ya lo tienen definido entonces pueden hacer caso omiso)
- Tipo de animación que quieren que ocurra (disolver, empujar a la derecha, etc.).
Entrega
La entrega serán las tres mesas de trabajo de Spotify con las interacciones posibles entre estas tres. Qué voy a evaluar:
- Aspectos de diseño gráfico y editorial: los botones, textos y tamaños de diversas cajas deben ser homogéneos entre ellos. Si dos botones tienen la misma jerarquía, deben ser del mismo tamaño. Los elementos deben estar alineados y todo debe cumplir con la estética e identidad de Spotify.
- Navegabilidad: todos los elementos que sea posible conectar entre las tres mesas de trabajo deben funcionar.
- Deben haber aspectos de animación, en este caso no importa si no son las mismas animaciones que la app de Spotify.
- Los elementos deben estar correctamente agrupados y nombrados en la barra lateral izquierda. Es decir, si el botón de «Música» tiene un rectángulo y un texto, estos dos deben estar agrupados como un solo elemento. El elemento completo se llamará «Botón Música» y sus subelementos serán «Rectángulo Botón Música» y «Texto Botón Música».
- Deben enviarme el link como invitada a editar (no el link de la visualización).