¡Buenas a todxs!

Aquí os muestro el video de la aplicación de Sportify en mi teléfono, que he intentado copiar en el prototipo. Mi experiencia utilizando Figma y en diseño de prototipos en general era casi nula, por lo que ha sido un trabajo de tener que familiarizarme con los conceptos más básicos e ir aprendiendo a base de prueba y error. Me ha resultado muy revelador en cómo debo organizar el trabajo en el futuro y lo muchísimo que ayuda sistematizarlo desde un principio. Aunque le he tenido que dedicar muchas horas y, en ocasiones, no sabía ni lo que estaba haciendo mal, me quedo contenta con el resultado.

Este es el video de cómo se ve la app de Spotify en mi teléfono, con la canción que elegí:

Y aquí, el enlace a mi prototipo. En lugar del fondo negro que aparece en mi video, decidí agregarle un fondo difuminado para que fuera más semejante al que se mostraba en el ejemplo.

Prototipo

El objetivo final de este reto consistía en realizar un pequeño prototipo interactivo de alta fidelidad, concretamente de la pantalla de reproducción de una canción de Spotify junto con su interacción al ir a las opciones de la misma.

Para este reto he elegido la canción “These Are The Days” de Lauren Daigle. Por lo tanto, se ha utilizado la imagen original de esta canción para imitar el diseño del ejemplo subido al aula virtual. Este es el ejemplo:

Siguiendo la línea del ejemplo, se han imitado algunas características observadas en el diseño y he añadido algunos comentarios relevantes:

• En la pantalla de reproducción se ha colocado degradado al color de fondo.
• Se observa que todos los elementos están alineados a la izquierda en la misma línea imaginaria excepto el botón para ocultar la pantalla (la flecha hacia abajo).
• Todos los iconos que no se han podido realizar en el propio Figma, se han elaborado en Ilustrador, exportándolos posteriormente en .svg para poder editar el color en Figma.
• Para que la interacción sea más fluida y no haya problemas con el icono de las meatballs, se ha introducido en el grupo un rectángulo para que la zona a seleccionar en la interacción sea más grande.

Tras realizar el diseño en Figma junto con los elementos de sistematización necesarios, se ha creado el prototipo final para que sea interactivo:

https://media.folio.uoc.edu/private/wp-content/uploads/sites/11777/2023/10/18193648/Video-interaccion-Sara-Velilla.mp4?Expires=1732195343&Signature=ekwoqxNX4VpYeJjjeYLl0ITkLXu1ClEuLpprMWQ0FnOSBFp-aUnUTCGg59fBhSTWyc4xWzYBiSs-1KMm9dA0mwHXskzaaFJbRAMPiVLbCQYuw45XeG3S0PaljFCszzZuWRbBqw9YjpWTunhtV9w0MNFIOeo2hnohV975xCTTa2prZyZ8NNgCZEzsQ7gP~npVQDXkgdzddx6iIvye-gTeiJfdggixIxrxcYXPMzdKHIeEFzb1A5B9ZDYTb7bCtncwvHRPRwWEeSN8h3mQPiZenph2PV8~FiawaxsD-XBVopY7~P9EIV40aDiwtIcqJzg8B9m9aGqdXgMw7A7b6g9kGQ__&Key-Pair-Id=K3T7EYR9NMFURT

Mencionar que en el vídeo donde se puede ver la interacción, la posición del cursor no corresponde con la posición real del mismo, sino que al realizar la grabación de pantalla se ha desviado de su sitio. En el siguiente enlace se puede acceder al prototipo real e interactuar con él:

Prototipo R1 Sara Velilla Mínguez

En este primer ejercicio en el que teníamos que replicar el comportamiento 2 pantallas de Spotify, comprender los principios de diseño de interacción, y aplicarlos correctamente en Figma, más allá del reto de construir unos componentes escalables y coherentes (en estilo y apariencia), he aprovechado para aprender una nueva funcionalidad de Figma como son las «variables» con las que la gente ha llegado a construir incluso videojuegos enteros.

Así que, además la implementación de microinteracciones y asegurarme de que el flujo se podía realizar al 100% sin ningún tipo de bloqueo, he tratado de poner máxima atención al detalle y que se pareciera lo máximo posible a la aplicación real.

A pesar de que ha sido un trabajo de varios días (en algunos de los cuales no llegaba a avanzar casi nada), me siento satisfecho con el resultado final. Os dejo aquí un vídeo con el resultado final:

Enlace al prototipo en Figma aquí

Y sí, el botón de Pause no funciona, porque no he llegado a saber cómo implementarlo, pero he aplicado la interacción que debería realizar al pulsarlo… y además ¡suena música, la barra de tiempo avanza y el los segundos se actualizan! Si a alguien se le ocurre cómo hacer que el botón de Pause funcione, todo feedback será bien recibido =)

Un saludo a todo el mundo!!

Buenas a todos,

Aquí os dejo el prototipo interactivo de alta fidelidad que he realizado con Figma de la versión móvil de la plataforma Spotify en iOS para la canción «Coge un lápiz» de la artista Jimena Valcarce.

Para realizar esta tarea tuve que aprender a usar Figma a través de los materiales facilitados en el Laboratorio de interacción así como los disponibles en el canal de Youtube de Figma.

La tarea consistió en:

– Recrear los elementos que componen la UI de Spotify partiendo de capturas de pantalla de la aplicación que realicé con mi teléfono.

– Crear los componentes, estilos de texto y de color necesarios para poder manipular y editar cambios a futuro de forma sistémica.

– Dotar al prototipo de interactividad tratando de conseguir el mayor parecido posible con el funcionamiento real de la aplicación

En este enlace podéis acceder a mi documento en Figma y navegar por las distintas páginas del proyecto: https://www.figma.com/file/RQKAEYRIbwQ9FPGXNctGK2/Prototipo-Spotify-Coge-un-l%C3%A1piz?type=design&node-id=29%3A1879&mode=design&t=FepmQ93SlTkG0kV8-1

También podéis consultar este vídeo en el que se ve el funcionamiento de mi protipo:

También añado a esta entrada una imagen de cada una de las páginas de mi proyecto: