Prototipat - Aula 1 | Prototipado - Aula 1

Pública

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=1732232412&Signature=g~rXDrYnT8~-KKzimCHelkIkoZPjHfXwjIVG1sPIV0A-kDjwP9NmYT1-DfVErvHNn1kZAwjDSpDk-KbCE5GJBP5RF3Ia2iQLGOLNrYSL71OK11ueHzQgeiDsvHCF1h4VEoOSSaeUPL1C8BvNz4lox47EPXT6BYo40~dfQmnFcfneexWkKfFi96xLmnCka3AaG90ixBPi9F7~CZKdxFPUxQg~LCeXBL8XoRJKorOw5x9KKPIQUZrobQpgiMf0GWoU~ZI4KHYw78KQzC93pkwj9rouzdJts5lXBHd5d2VGCXMgpFogGBlZuqaa9FyE5-bJZnggaM5SBP4ryACPvR–9g__&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