En este post narraré el proceso de mi cuarta semana en Ironhack, y de nuestro primer choque serio con el mundo del UI.

No todo fue sketch y High Fidelity, y lo más difícil para mí fue, a menudo, lo que no sospechaba. He aquí algunos de los problemas que encontramos.

Los problemas de Violet Tea

Los colores, la tipografía, el tono que necesitábamos…En cierto modo el UI requería un research amplio que no se alejaba tanto de la parte del UX que ya nos era familiar y para mí todo el proceso fue un aprendizaje.

Violeta nos proporcionó dos tipografías: Lobster y Brandon Grotesque, de las que hablaré en detalle más adelante.

En cuanto a los colores, Violeta nos proporcionó dos con los que funcionar, pero adaptarnos a ellos supuso un reto enorme.

Image for post
Image for post

Violeta empleaba un fucsia claro y un verde greenery como colores de marca, y se quería alejar de cualquier tonalidad oscura o térrea. Esto nos pareció genial hasta que emprendimos nuestra propia research sobre el mundo del té.

En mi equipo habíamos visto ya muchísimas referencias de otros e-commerce de té, y aunque habíamos percibido gran parte de las decisiones de usabilidad y disposición de las páginas, hasta ahora no habíamos contemplado su paleta de colores.

El mundo del té, por naturaleza, invoca colores térreos que se extraen del color de las hojas de té secas. También juega con verdes oscuros, rojos intensos, e incluso marrones de una gran densidad

Image for post
Image for post

En definitiva, nada de lo que quería Violeta. A la hora de hacer un moodboard, el problema fue claro: ¿Cómo hacer que nuestra marca grite té a través de la paleta de colores opuesta a él?

El reto y las perspectivas.

Nuestras directrices giraban en torno a conseguir un tono fresco, juvenil, y vibrante, alejada de los tonos apagados.

La solución pasó por enfocarnos menos en la visión tradicional del té, y mucho más en la imagen de Violet Tea, tratando de desligarnos de una conceptualización genérica y ligando los valores de nuestra tienda con la salud, la relajación y la tranquilidad que se asocian con el té y las infusiones.

Para ello decidimos emplear imágenes límpias y más minimalistas, apoyándonos en el té matcha y algunas infusiones de tonos claros para extraer el verde greenery que Violeta necesitaba.
Por otro lado, necesitábamos cuadrar el violeta que ella consideraba su color de marca, y esto se logró a través de ideología floral, combinando el mundo de las infusiones con una imagen de naturaleza y frescura.

Este fué el resultado final:

Image for post
Image for post

En cuanto a las tipografías, Brandon Grotesque nos ofrecía un aire moderno y claro sin contaminar nuestra página y fué una adición bienvenida a nuestra selección.
Lobster, sin embargo, era prácticamente ilegible en multitud de contextos, y tuvimos que adaptarnos a las necesidades de usabilidad de la web.
Seleccionamos Montserrat como segunda fuente, ya que necesitábamos una tipografía para cuerpos y textos de menor tamaño, y esta nos proporcionaba la claridad suficiente para ello.

Image for post
Image for post

Los fallos.

Gran parte de nuestro High Fidelity final quedó sobredimensionado, dado que lo que en nuestras pantallas parecían tamaños correctos, en el prototipo se convirtió en algo inadecuado.

Este proyecto nos enseñó en gran medida la importancia de testar, de observar el proyecto en diversos dispositivos y de tomar referencias.

Por mi parte, también aprendí muchísimo a la hora de adquirir ojo para identificar los elementos que ensucian una composición.

El peso de las tipografías, el negro puro, o los tamaños de las fuentes fueron ejemplos de como los pequeños detalles pueden manchar un proyecto bien ejecutado, y me aseguré de trasladar este conocimiento a mis futuros proyectos.

Los aciertos.

Image for post
Image for post

Figma jugó un papel enorme a la hora de permitirnos un trabajo coordinado, y aunque requirió que aprendieramos el programa en apenas dos tardes, sus similitudes con Sketch nos permitieron llevar a cabo un trabajo perfectamente funcional y de una calidad casi idéntica a la que habríamos logrado con éste último.

Tuve la suerte de trabajar con otros diseñadores que supieron lidiar bien con las discrepancias, y el reparto de trabajo, si bien complicado, no llegó a convertirse nunca en un problema. Al final, a pesar de nuestros fallos, acabamos bastante orgullosos del resultado final:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Pantallas del prototipo final

Fue muy gratificante para mí el ver como las pequeñas piezas que habíamos diseñado cada uno de nosotros se juntaban para dar lugar a un proyecto estructurado y coherente.

Esta sección me parece importante dado que aprendí tanto de las críticas que se hicieron a nuestros fallos como de los aciertos de mis compañeros a la hora de proponer metodologías, o guiarme en los procesos que para mí fueron más difíciles.

Este aprendizaje fué para mí vital para mi siguiente proyecto, dado que yo no tenía experiencia en diseño gráfico previa, y todo lo aprendido aquí sentó las bases para mi primer proyecto individual: NaturAnimals.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store