Prototipat - Aula 1 | Prototipado - Aula 1

Pública

¡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! ????​