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 compañeros/as!

Os comparto mi prototipo de Spotify, en él podréis observar las siguientes funcionalidades:

• Reproducción: Play/Pause
• Detalle: Menú Overflow/Meatballs
• Hacer scroll por la pantalla

Como ejemplo, he escogido la canción «Si Me Muero» de Rels B.

Adjunto las pantallas que he tomado como réplica:

Dejo un vídeo que enseña el funcionamiento del mismo:

A continuación dejo el link para el acceso al prototipo interactivo de Figma: LINK PROTOTIPO 

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.

Buenas,

Una cálida bienvenida a la asignatura de prototipado con este reto.

Creo que ha sido una PEC muy completa, la cual ha ayudado a asimilar los recursos de diseño abordados en la app de Spotify, aprender a identificarlos con mayor detenimiento y además saber cómo visualizar secciones en las pantallas seleccionadas para poder realizar un prototipo coherente y reutilizable.

En mi caso, he escogido una artista que se llama Tyla y la canción escogida es Water.

Os dejo el link al prototipo interactivo: Prototipo alta fidelidad.

Por otro lado, el video de las interacciones aportadas en el ejercicio: