Publicado por

Repte 2. Prototipat i construcció sistèmica del disseny

Publicado por

Repte 2. Prototipat i construcció sistèmica del disseny

Hola a tothom, A la primera part del repte 2 he creat un UI kit amb els elements interactius principals de Spotify.…
Hola a tothom, A la primera part del repte 2 he creat un UI kit amb els elements interactius…

Hola a tothom,

A la primera part del repte 2 he creat un UI kit amb els elements interactius principals de Spotify. A continuació us deixo el link al prototip en format desktop de Figma:

https://www.figma.com/file/Ec3pYH0Hgu2oPnmLuRKQoe/Untitled?type=design&node-id=1%3A4&mode=design&t=IU0vCd1m1c44dmTW-1

A més, us deixo una captura de pantalla d’aquest UI kit:

A la segona part del repte dos he fet un prototip de baixa fidelitat (Wireframe) d’una aplicació on els treballadors de Spotify poden reservar una sala. A continuació us deixo un vídeo explicatiu que mostra el funcionament d’aquesta aplicació.

VideoWireframeAdriánSáez

Gràcies,

Adrián Sáez Cordón

Debate0en Repte 2. Prototipat i construcció sistèmica del disseny

No hay comentarios.

Publicado por

R2 Prototipado – Prototipado y construcción sistémica del diseño

Publicado por

R2 Prototipado – Prototipado y construcción sistémica del diseño

¡Buenos días/tardes/noches a todo el mundo! Para este reto se nos pedía trabajar en «3 grandes partes»: El análisis y réplica del…
¡Buenos días/tardes/noches a todo el mundo! Para este reto se nos pedía trabajar en «3 grandes partes»: El análisis…

¡Buenos días/tardes/noches a todo el mundo!

Para este reto se nos pedía trabajar en «3 grandes partes»:

  1. El análisis y réplica del UI Kit de Spotify.
  2. La creación de un prototipo de baja fidelidad (Wireframes) para un escenario descrito.
  3. La elaboración de una reflexión a partir de las preguntas del enunciado (las cuales intentaremos resolver más adelante en esta entrada).

Así pues, voy a explicar el trabajo que he realizado en cada una de ellas:

1. Análisis y réplica del UI Kit de Spotify

En esta primera parte, el objetivo principal era elaborar un pequeño prototipo que mostrara la réplica de los componentes que había que crear para este reto.

Para ello, lo primero habría sido investigar los Elementos de Estilo de Spotify (textos, colores, etc.) para luego poder construir los Elementos de Interacción (componentes), pero para acelerar el proceso decidí invertir el orden.

Lo primero que hice fue navegar por las pantallas de Spotify y realizar captura de aquellos Elementos de interacción que se querían replicar (botones, selectores, campos de texto, etc.), y cuando ya tuve captura de todos ellos hice una «puesta en común» de los Elementos de Estilo que estaban utilizando, que son los que finalmente terminé utilizando.

Para la iconografía simplemente indagué en varios proyectos de la Comunidad de Figma y me quedé con aquellos que se repetían en dichos proyectos.

Os comparto el enlace a mi proyecto para que podáis ver el resultado final. En la página que llamo «Reto 2 – Style Tile» se encuentra el resumen del UI Kit que he creado (y el prototipo interactivo que se pedía en esta parte del reto), pero en la página «Reto 2 – Style Guide & Components» podéis encontrar todos los entresijos de mi trabajo ;)

2. Creación del prototipo de baja fidelidad para el escenario descrito.

Para esta parte del reto se pedía diseñar unos Wireframes de app para reservar salas de reuniones en Spotify, aunque como «objetivo» complementario también había que prototipar dicho Wireframes.

En mi caso dejé de lado el «lápiz y papel» esta vez para realizar los Wireframes (que es como se trabaja habitualmente al con pantallas de baja fidelidad), ya que como también había que prototipar las pantallas, iba a ser más sencillo si lo hacía de esta manera.

Como curiosidad, y por si a alguien le es útil os comparto la Librería de Wireframing de la Comunidad de Figma que he utilizado. Es de los mejores que he encontrado. No el más completo, pero sí con el que más fácil he podido construir unos Wireframes hasta ahora.

Y bueno, os comparto el enlace a mi Prototipo y el vídeo explicativo que había que hacer para que entendáis un poco más como he llegado a dicho resultado final.

3. Reflexión y contestación a las preguntas

Y para terminar, en lugar de una única reflexión como tal, y para evitar dejarme alguna de las preguntas sin respuesta, voy a intentar contestar a las preguntas a medida que reflexiono en cada una de mis respuestas. Así pues, comenzamos:

Pregunta nº1: ¿Qué estilos visuales usa Spotify, y cuáles hacen de Spotify una marca reconocible ya a este nivel? ¿Cuál es la narrativa del producto, qué atributos, calificativos podríamos relacionar al producto?

En cuanto a los estilos visuales, por un lado tenemos la gama cromática de colores vivos y contrastados, que tratan de transmitir sensación de alegría y dinamismo. Se asocia con la naturaleza y sobretodo «la energía». Mientras que el blanco, por su parte, representa la pureza y la simplicidad; en cuanto a la tipografía, ha ido variando con el tiempo, pero actualmente se trata de una tipografía sans-serif que pretende lo más sencilla y legible posible para los usuarios.

En definitiva, la narrativa de Spotify se centra en la idea de que la música es una forma de expresión «personal», por lo que se centra en esta idea de descubrir nueva música, crear sus propias listas de reproducción, compartir tu música con los demás, etc. Por lo que si hubiera que describir a la marca con una serie de calificativos como tal podría decirse que se trata de un producto Moderno, Personalizado y Fácil de utilizar.

Pregunta nº2: ¿De dónde viene históricamente la gama cromática y por qué? ¿Qué aspectos positivos y negativos observáis al respecto? Esto te ayudará a comprender esa narrativa de la que te hablamos en el punto anterior.

En 2008, 2 años después de que la compañía se fundara, se creó el primer logo. Se trataba de unas letras blancas sobre un fondo verde, colores que se han mantenido hasta el día de hoy, y simplemente fueron colores escogidos por el fundador Daniel Ek porque en ese entonces «nadie los estaba utilizando, y daba a la marca un look más moderno, fresco y más ‘pop’ que el resto de compañías».

Más tarde, en 2013, las letras del logo pasaron a ser negras, otro color característico de la UI de Spotify como tal.

Y finalmente en 2015 decidieron ampliar la gama cromática y cambiaron el verde principal de la marca por uno más vivo y contrastado, que es el que conocemos hoy en día, y el que le da un aspecto más «moderno» o «tecnológico».

Estos cambios hacia lo que conocemos hoy en día han permitido que Spotify, y sobretodo sus colores, su logotipo y su estilo sean muy reconocibles en el mundo del producto digital, aunque como contrapunto, diría que muy el uso del color verde, en combinación con el blanco y negro (como colores secundarios y terciarios) podría limitar bastante la «creatividad» de las interfaces. Aunque si buscas un orden lógico aplicable, esa «limitación» puede ser útil para que los usuarios comprendan Spotify en todas sus plataformas y dispositivos…

Pregunta nº3: Os hemos planteado la creación de un prototipo de design system limitado (en la primera parte) ¿En qué situaciones y proyectos del mundo profesional creéis que tendréis que realizar una acción como esta?

Un Design System como tal, que no una librería de componentes o UI Kit, que es en lo que hemos trabajado en realidad, será útil siempre en proyectos multiproducto, ya que lo que se busca es esa uniformidad y coherencia de marca entre todos sus productos y servicios. Eso sí, un UI Kit siempre será útil que vayamos a diseñar varias pantallas, ya que una vez hemos diseñado un botón podremos reutilizarlo allá donde lo necesitemos.

Pregunta nº4: Os hemos planteado la creación de un prototipo de baja fidelidad (en la segunda parte) ¿En qué situaciones y proyectos del mundo profesional creéis que tendréis que realizar una acción como esta? ¿Qué beneficios e inconvenientes ves en esta manera de proceder?

Los Wireframes, o prototipos de baja fidelidad suelen ser útiles y las fases iniciales de un proyecto. Sirven para validar conceptos con los stakeholders, o incluso transmitir tus ideas al resto de el equipo de producto de la manera más rápida posible. Esto permite que todo el equipo esté alineado en cuanto a soluciones, y que el mismo problema, bajo distintas circunstancias, se resuelva de la manera más consistente posible. Y, mayoritariamente, esos serían los beneficios de los prototipos de baja fidelidad.

Como mayor inconveniente, normalmente las personas de «fuera» de los equipos de producto no comprenden que se trata de pruebas conceptuales sujetas a cambios, e interpretan este tipo de prototipos como si de una solución final se tratara… Lo que desencadena en un largo hilo de emails intentando justamente la diferencia entre prototipos de «baja y alta fidelidad», ya que no entienden «porqué el prototipo era en blanco y negro y tenía 3 botones» y ahora tienen colores que no les gustan y solo hay un botón…

Y con esto diría que ya habríamos terminado. Gracias por leer hasta aquí, y si alguno de los enlaces no funciona, o queréis saber más sobre mi trabajo, ¡os leo! ????​

Debate0en R2 Prototipado – Prototipado y construcción sistémica del diseño

No hay comentarios.

Publicado por

Prototipat: Interactius i fluxe

Publicado por

Prototipat: Interactius i fluxe

Contingut: Per a aquest repte s’ha dissenyat les següents parts: Sistema de disseny de l’app Spotify (instàncies i estils). Exposició d’elements interactius del sistema (inclós a «enllaços»). Fluxe de consolidació de reserva de l’aplicació per a solicitar reserves a la seu (inclós a «enllaços»). Biblioteca de recursos de l’arxiu (àtoms i components mare). Breu descripció: En aquest repte, el sistema de disseny esdevé una part clau. Conformar un bon sistema (amb les propietats i variants justes i necessàries) ens facilitarà…
Contingut: Per a aquest repte s’ha dissenyat les següents parts: Sistema de disseny de l’app Spotify (instàncies i estils).…

Contingut:

Per a aquest repte s’ha dissenyat les següents parts:

  • Sistema de disseny de l’app Spotify (instàncies i estils).
  • Exposició d’elements interactius del sistema (inclós a «enllaços»).
  • Fluxe de consolidació de reserva de l’aplicació per a solicitar reserves a la seu (inclós a «enllaços»).
  • Biblioteca de recursos de l’arxiu (àtoms i components mare).

Breu descripció:

En aquest repte, el sistema de disseny esdevé una part clau. Conformar un bon sistema (amb les propietats i variants justes i necessàries) ens facilitarà la feina de més endavant, estalviant temps i esforços, a banda de facilitar-nos la detecció de possibles errors. El resultat és una plantilla expositiva amb els estils i els components creats.

En la segona part, es demana la creació d’un prototip interactiu de baixa fidelitat amb la funció de permetre reserves de sales de reunions per part dels treballadors de l’empresa. Es presenta un fluxe senzill. Les instàncies que s’ha fet servir deriven del treball aconseguit a la primera part.

A continuació, el vídeo narratiu del fluxe:

Cargando...

Enllaços: INTERACTIUS | APP DE RESERVES

Debate0en Prototipat: Interactius i fluxe

No hay comentarios.

Publicado por

Reto 1. Prototipado spotify

Publicado por

Reto 1. Prototipado spotify

¡Buenas a todos! Esta práctica me ha resultado de lo más entretenida ya que permite dar rienda suelta a mi creatividad y…
¡Buenas a todos! Esta práctica me ha resultado de lo más entretenida ya que permite dar rienda suelta a…

¡Buenas a todos!

Esta práctica me ha resultado de lo más entretenida ya que permite dar rienda suelta a mi creatividad y fijarme detenidamente en los pequeños detalles que componen las aplicaciones que uso diariamente como spotify y de la relevancia que tienen. Es la primera vez que utilizo figma y me ha parecido una herramienta de trabajo intuitiva que concede a los diseñadores llevar a cabo cualquier idea que tengan.

Para el desarrollo de la actividad me he centrado en la canción de Madonna «Jump» del disco «confessions on a dance floor» y las capturas de pantalla se han tomado desde un iphone 13 pro. A continuación podéis ver mi prototipo interactivo.

Podéis comprobar que algunos elementos son diferentes a los de la captura de pantalla, ya que me ha resultado complicado encontrar algunos iconos y aquellos que no venían, los he creado desde cero.

¡Un saludo a todos!

Debate0en Reto 1. Prototipado spotify

No hay comentarios.

Publicado por

Disseny d’un prototip basic de Spotify. Per Adrián Sáez

Publicado por

Disseny d’un prototip basic de Spotify. Per Adrián Sáez

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. Entrega de la actividad Reto 1 …
Hola a tothom, a continuació us deixo el vídeo del meu prototip de la pantalla principal de la reproducció…

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.

Debate0en Disseny d’un prototip basic de Spotify. Per Adrián Sáez

No hay comentarios.

Publicado por

Sin título

Publicado por

Sin título

¡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…
¡Buenas a todxs! Aquí os muestro el video de la aplicación de Sportify en mi teléfono, que he intentado…

¡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

Debate0en Sin título

No hay comentarios.

Publicado por

RETO 1: DISEÑO DE UN PROTOTIPO BÁSICO

Publicado por

RETO 1: DISEÑO DE UN PROTOTIPO BÁSICO

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…
El objetivo final de este reto consistía en realizar un pequeño prototipo interactivo de alta fidelidad, concretamente de la…

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=1732209896&Signature=hBQgHAzn4wdISWgaENjIHysM5N91CLPrIslt17CRsXFtvYVNt15opvApvFYLE5GIA~zrIdkVnB2Hmt3n9WJXu2bSxrn2pSEpCqZjL21mQPeBTxk3Rfh-O48ApbYFJPJCjYZEN-cQ6BpdjLdLoAFr2DVY1yxkDWUG0xv6VW6xYCZjYoE8qBLbundxA4DXgIuyup~2oGH6xFJNduo9w3t4e-3IRZzg~SgQXg0b9~zkIRUgictAwaCkig0Vu~SwOD4Rh7vWBCwnLUj7v1wGfGcSh3YGF1OVx7~bEDfa5qRsltVH~G~kGRKbFnsmcL2tmmFBE5NJF~SboJ7R1fmWUKITWg__&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

Debate0en RETO 1: DISEÑO DE UN PROTOTIPO BÁSICO

No hay comentarios.

Publicado por

Prototipado: Reto 1 – Spotify

Publicado por

Prototipado: Reto 1 – Spotify

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…
En este primer ejercicio en el que teníamos que replicar el comportamiento 2 pantallas de Spotify, comprender los principios…

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:

Cargando...

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!!

Debate0en Prototipado: Reto 1 – Spotify

No hay comentarios.

Publicado por

Reto 1 – Diseño de un prototipo básico

Publicado por

Reto 1 – Diseño de un prototipo básico

Buenas a todos, Aquí os dejo el prototipo interactivo de alta fidelidad que he realizado con Figma de la versión móvil de…
Buenas a todos, Aquí os dejo el prototipo interactivo de alta fidelidad que he realizado con Figma de la…

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:

 

 

 

 

 

 

Debate0en Reto 1 – Diseño de un prototipo básico

No hay comentarios.

Publicado por

Reto 1: Prototipo de spotify

Publicado por

Reto 1: Prototipo de spotify

Hola a todxs! Comparto mi prototipo y el vídeo de la replica de Spotify. He usado la canción «The End» de Frankie Cosmos. En él se pueden hacer las siguientes acciones:     – Play/Pause     – Desplegar el menú de más opciones      – Activar y desactivar la opción en bucle     – Activar y desactivar la opción de aleatorio. En el siguiente enlace podéis interactuar con el prototipo. https://www.figma.com/proto/SF4o1hFH2wWlhbYod0CU6o/Spotify?page-id=0%3A1&type=design&node-id=40-10028&viewport=276%2C-664%2C0.24&t=tzHrl9OdWFw84hOn-1&scaling=scale-down&starting-point-node-id=40%3A10028&mode=design Vídeo: 1.Prototipo_NúriaGómezBarceló   …
Hola a todxs! Comparto mi prototipo y el vídeo de la replica de Spotify. He usado la canción «The…

Hola a todxs!

Comparto mi prototipo y el vídeo de la replica de Spotify. He usado la canción «The End» de Frankie Cosmos.
En él se pueden hacer las siguientes acciones:
    – Play/Pause
    – Desplegar el menú de más opciones 
    – Activar y desactivar la opción en bucle
    – Activar y desactivar la opción de aleatorio.

En el siguiente enlace podéis interactuar con el prototipo.

https://www.figma.com/proto/SF4o1hFH2wWlhbYod0CU6o/Spotify?page-id=0%3A1&type=design&node-id=40-10028&viewport=276%2C-664%2C0.24&t=tzHrl9OdWFw84hOn-1&scaling=scale-down&starting-point-node-id=40%3A10028&mode=design

Vídeo:

1.Prototipo_NúriaGómezBarceló

 

 

 

Debate0en Reto 1: Prototipo de spotify

No hay comentarios.