Hola a tothom, a continuació us deixo el vídeo del meu prototip de la pantalla principal de la reproducció d’una cançó de Spotify, on també es pot activar el menú desplegable d’opcions del menú. He executat la tasca amb Figma:

PrototipSpotifyAdriánSáez

Aquí us deixo também l’enllaç a Figma: https://www.figma.com/file/TDz7zY4zc4O3ZABgbs6klk/Repte1.SpotifyAdri%C3%A1nS%C3%A1ez?type=design&node-id=0%3A1&mode=design&t=ULYAZUhGACIIWnzX-1

Gràcies,

Adrián Sáez.

¡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=1732212369&Signature=UFN0BLGbpYuTQ0sco7JhzKXyKgKHEIHAhE~~Is39OB7oNCBDo2RyNKyQul6ZwhPhU7WVyvYhMYq~wDbP9BnonAb8FxWNQHNXHiTTPogwOuxXwACj3uru51umoU135iBMPLCuO2dzkJKpKeFReyQQueq2LZbZL2Soh5BGJaSaSpqEDE3DVKe7ThPcGdSuxQo72LywRXLY37YTD5LdCiIfcdZWTq0NhyesXS8U9VJ3z6z3mgJtnJcEEhvAMpV3w1f1mTETOxN6LYHxxUGiPm~7Tqyx9wk-k53KB5ikck2pKwLZrqcU-Xu0vJ9RsxaQ-whXqjE4LQ-Yd-R8qOKptkZPLw__&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:

Com podeu veure he escollit la pantalla d’una de les meves cançons preferides de Manel. M’he trobat diversos problemes que no he aconseguit resoldre per a la entrega i que han fet que el prototip sigui millorable. El primer d’ells és el fet de que no he aconseguit trobar la forma de tenir l’event de hover i el de click alhora en el botó de pausa/play. Es canvia l’icona del botó de forma correcte peró no he trobat com aplicar-li el shadowing alhora de passar el dit/ratolí pel cim. El següent problema és el fet de que tant la barra de progrés de la lletra de la cançó són estàtiques. Per aquest problema no he sapigut com enfocar-lo per resoldre’l. Per últim per tal de controlar l’estat del botó de play he requerit de dues variables a les que he anomenat isPlaying i isNotPlaying. Inicialment vaig intentar-ho fer dependre tot d’una sola variable però no vaig aconseguir controlar la visibilitat en funció del negat d’una d’elles. 

He trobat que l’aplició té poca consistencia amb els tamanys de lletra i sobretot amb els espaiats entre elles. Molts tamanys de lletra diferent que segurament tenen sentit però si que l’espaiat entre elles m’ha sorprés. Alhora de buscar les icona hi han petites diferències que fan que es vegin lleugerament diferents entre elles i que algunes siguin més fines i arrodonides i altres més gruixudes. Aquest problema és solucionable si es disposa d’un dissenyador gràfic que et gestioni tota la iconografia i et generi una paleta d’icones personalitzada. 

Us deixo a continuació una petita demo: 

I el link al prototip: 

Prototip!

Hola a tothom!

Comparteixo amb vosaltres el prototip de Spotify. En ell podreu:

• Reproduir i posar en pausa la cançó
• Afegir-la als teus m’agrada
• Activar i desactivar el Shuffle
• Activar i desactivar el Bucle
• Accedir i interactuar amb el menú d’opcions.

Podeu visualitzar-lo aquí.

Deixo aquí el meu prototip de Spotify.

En aquest enllaç podreu veure el prototip directament a figma.

Hola
El propósito de este ejercicio es recrea la interfaz de la aplicación de Spotify en dos de sus pantallas: la pantalla de reproducción actual y el menú . Estoy contento con el trabajo es la segunda vez que utilizo Figma y nunca antes había usado los componentes son bastante útiles para trabajar  Al principio se me hizo un poco complicado el poder utilizarlos .

A continuación, os dejo un vídeo que muestra el resultado logrado.

Podéis interactuar con el prototipo

Un saludo

Buenos días compañeros.

Por aquí os adjunto el link al prototipo que he realizado para este primer reto. La interfaz y las animaciones que yo he replicado son un poco diferentes a las propuestas en el enunciado, supongo que será por tener la versión premium de Spotify.

Estoy contenta con el trabajo realizado, aunque la animación del segundo frame no es tan fluida como me gustaría puesto que, al ser mi primera vez trabajando con Figma, no he sabido replicar con naturalidad el movimiento de arrastre hacia arriba y hacia abajo en un mismo elemento, teniendo que buscar una alternativa para que el prototipo se reproduzca bien.