¿Qué es un Moodboard y un UI Kit? | Descubre cómo hacer el tuyo  








A medida que el universo de las aplicaciones dejó de ser una novedad para convertirse en una parte indispensable de nuestro día a día, cada vez fueron más las plataformas digitales que aparecieron buscando ganarse nuestra consideración y un lugar en nuestros teléfonos. Si bien hace unos pocos años existía una aplicación para cada necesidad, esto ha cambiado y se han multiplicado los players que compiten por ser nuestro delivery, transporte o streamer de cabecera.


En un contexto de tanta competencia, resulta crítico poder encontrar diferentes focos de diferenciación. Entre ellos, uno de los más importantes es la creación de una identidad atractiva capaz de comunicar un mensaje único, cautivar al consumidor y que se termine traduciendo en una interfaz amigable que haga disfrutable el uso de la plataforma, a fin de que las personas vuelvan a utilizar el servicio.


El origen de esta identidad diferenciadora se encuentra en la creación de un Moodboard sumamente conceptual que posteriormente se volcará en el UI Kit de la Plataforma. En este nuevo Coder Blog vamos a explicar todo sobre estos dos conceptos, analizando a fondo cómo podemos hacer para crear una ventaja diferencial desde la estética.


¡Empecemos!








¿Qué es un Moodboard?


Un Moodboard es un tablero compuesto por diferentes estímulos visuales y elementos estéticos que se construye para dejar en evidencia en qué nos estamos inspirando para desarrollar la UI (Interfaz de Usuario) de nuestra plataforma o aplicación.


El Moodboard de todo proyecto es un collage compuesto por diferentes elementos como la paleta de colores, tipografías, texturas, diseños, ilustraciones, fotografías, screenshots de aplicaciones que tengan un tono similar al que aspiramos alcanzar y otros componentes gráficos que nos ayuden a explicar nuestra idea a otras personas.














¿Para qué sirve un Moodboard?


Nos permite realizar un acercamiento al concepto, mensaje e información que vamos a comunicar con nuestro desarrollo.Permite definir el clima visual del proyecto.Nos ayuda a corroborar si nuestra idea se alinea o no con las expectativas del cliente.Hace posible que podamos identificar el tema y el espíritu visual de una idea.Abre nuestra creatividad, permitiéndonos enfocar y dar forma a nuestras ideas.





La gran ventaja que nos otorga un Moodboard es la de poder organizarnos y comunicarnos de una manera más efectiva con el cliente. Este tablero funciona como punto de encuentro entre las expectativas del Diseñador UX UI y el cliente.











Caso Práctico:


Llevando esto a un caso práctico, podríamos plantear un escenario donde contamos con un cliente que únicamente tiene la intención de crear una app de Yoga, pero no cuenta con una identidad visual definida.


Esta situación dará lugar a la creación de un Moodboard capaz de reflejar conceptos asociados a la actividad como armonía, vitalidad, luz y calma. El Diseñador UX podría elegir una paleta de colores acordes como el verde o el amarillo, una tipografía delicada y diferentes imágenes que connoten esos valores como bosques, flores, atardeceres, curvas y personas haciendo yoga.


De esta manera el cliente podrá entender si el equipo de diseño está alineado con lo que está buscando y podrá corregir aspectos importantes como el estilo de diseño, gama cromática, colores y tipografías.


Los ajustes correspondientes darán lugar a igualar las expectativas de todos los participantes, a fin de continuar el proceso de diseño con un criterio en común.








¿Cómo hacer un Moodboard?





Tips para realizar un Moodboard:


Antes de comenzar a diseñar un Moodboard es importante tener en cuenta estos tips.


Buscar Apps y Plataformas similares a nuestro proyecto para definir un estilo visual, relevando qué colores, imágenes, fuentes tipográficas utilizaron y cómo distribuyeron los elementos. Definir conceptual y climáticamente qué queremos transmitir.Investigar las últimas tendencias de diseño de cajas, botones y patrones que nos servirán para inspirarnos.Seleccionar una tipografía principal y otra complementaria. Definir una posible paleta de colores para utilizar.Definir el estilo de las imágenes que compondrán el App.





Paso 1 - Palabras Clave y Título:


El primer paso a la hora de entender cómo hacer un Moodboard es definir las palabras clave tal y como lo describimos anteriormente en el caso práctico de la App de Yoga. Las palabras elegidas deben poder transmitir fielmente el espíritu del proyecto y no deberían ser más de 5, de manera tal que apuntemos a lo verdaderamente esencial.


En una segunda instancia vamos a tener que pensar un título para el Moodboard, intentando no repetir ninguna de las palabras que elegimos anteriormente.





Paso 2 - Recopilar Imágenes:


El segundo paso consiste básicamente en recopilar imágenes referentes que ayuden a transmitir las palabras elegidas en el paso anterior. En este caso es importante nuevamente ir a lo esencial y buscar únicamente aquellos elementos del Moodboard que van a ayudarnos a transmitir lo que deseamos.


Los mejores sitios para obtener imágenes de calidad y estéticamente acordes con un proyecto son Behance, Dribble, Pinterest, Pexels y Unsplash.





Paso 3 - Elegir un Soporte:


El último paso consiste en componer el collage y colocar en un soporte digital (Adobe XD, Figma, Adobe Photoshop o Illustrator) aquellas imágenes, paletas de color, tipografías, texturas e ilustraciones que nos ayuden a mostrar de manera clara la idea general.








Ejemplos de Moodboard con Racional Creativo





Ejemplo de Moodboard 1:











Ejemplo de Moodboard 2:











Ejemplo de Moodboard 3:


En este caso podemos ver dos Moodboards que tratan de representar apps de ejercicio, sin embargo, la elección estética en el primer ejemplo nos habla de competitividad y alta performance mientras que el segundo collage transmite un entrenamiento más recreativo. En este caso podemos notar la importancia de utilizar verdaderamente las fotos y las estéticas que se corresponden con lo que queremos transmitir.














Una vez que ya contamos con una aprobación total del Moodboard por parte del cliente, ya estamos en condiciones de pasar a generar el UI Kit de nuestro desarrollo. 








¿Qué es un UI Kit?


Un UI Kit o User Interface Kit es un archivo o documento que incluye varios elementos previamente diseñados como por ejemplo botones, íconos, tablas, formularios, sliders, fuentes tipográficas, colores, imágenes, ilustraciones, cards etc, para ayudarnos en el desarrollo de nuestras interfaces de usuario. Este Kit integra, en un solo lugar, todos los componentes presentes en nuestra plataforma o aplicación.


Los elementos presentes en un UI Kit suelen estar construidos con capas y se pueden editar fácilmente para adaptarlos a nuestras necesidades cambiando su forma, tamaño o colores.








Ejemplo de UI Kit para Android (Izquierda) y IOS (Derecha)








¿Para qué sirve un UI Kit?


Nos ayuda a documentar y definir cómo va a ser la morfología de nuestros componentes.Nos permite crear nuevos componentes y funcionalidades para nuestra aplicación o plataforma siguiendo la línea estética original y evitando incoherencias.Generar diferentes UI Kit nos permite construir una biblioteca de recursos que a la larga se traduce en un ahorro de tiempo y dinero al no tener que desarrollar desde cero.Mediante la creación de un UI Kit, personas ajenas al proceso de Diseño UX como los programadores o desarrolladores pueden tener una guía efectiva para construir pantallas y funcionalidades respetando la línea estética original.Un UI Kit externo (realizado por otra compañía) nos ayuda a optimizar y agilizar nuestros diseños o explorar nuevos caminos ya que nos permite descubrir elementos o soluciones a problemas de diseño en los que ni siquiera habíamos pensado.





Ejemplo de Moodboard con una paleta de colores coherente.








¿Qué formato debe tener un UI Kit?


El UI Kit AI o UI Kit Illustrator es el formato más recomendable a la hora de crear un UI Kit ya que el mismo es más liviano y está compuesto por elementos vectorizados, los cuales se pueden redimensionar sin pixelarse o perder calidad.


Si bien hay gran cantidad de UI Kit PSD, lo ideal es utilizar UI Kit AI a la hora de diseñar una Interfaz de Usuario, dejando el Photoshop para tareas como el armado de Mockups o Moodboards.


Los elementos vectorizados, UI Kit AI, PDF Editables y SVGS (Vector Web) son ideales ya que son escalables, livianos y fácilmente reutilizables. 








¿Cómo hacer un UI Kit?





 





Antes de comenzar a analizar cómo hacer un UI Kit, siempre resulta útil repasar los 22 principios y elementos fundamentales del diseño para refrescar conceptos.





Paso 1 - Definir el Sistema de Color:


Si nos preguntamos cómo hacer un UI Kit, tenemos que tener en cuenta que el primer paso consiste en definir el sistema de color de la app o web que vamos a realizar. Este sistema de color está compuesto por al menos tres colores: un color principal, un color secundario y un color acento.











El color principal es el que va a identificar a nuestra plataforma, el color secundario va a ser el que va a complementar a nuestra primera elección y el color de acento deberá contrastar con los dos anteriores para justamente “acentuar” determinados elementos de nuestra web o aplicación.


Actualmente existen diferentes herramientas que son de gran utilidad a la hora de generar una paleta de color:


Material.io: Es una aplicación web ideal para probar combinaciones de colores primarios y secundarios. Asimismo, esta herramienta es capaz de determinar el color y las características que debemos aplicarles a los textos para favorecer la legibilidad.Colorable: Es una web muy simple que nos permite probar rápidamente combinaciones de color y texto que nos aseguran la mejor legibilidad. Con un mínimo de 2 A, la combinación es totalmente viable.Color Lovers: Página de tendencias de paletas de color.Adobe Color CC: Esta página nos permite jugar con todo el espectro del círculo cromático para generar paletas de colores análogos, monocromáticos, complementarios, compuestos, etc.





Paso 2 - Determinar el Sistema de Íconos:


El segundo paso a fin de entender cómo hacer un UI Kit es definir cuáles serán los íconos que vamos a utilizar en nuestra plataforma. En este punto es importante determinar qué estilo de vectores vamos a utilizar y cómo van a lucir estos íconos cuando se encuentren activos e inactivos (Es decir, de qué manera le van a dar a entender al usuario si se encuentran o no en uso)








 Ejemplo de Íconos en modo Activo e Inactivo.





Paso 3 - Definir la Tipografía:


En un tercer lugar es importante definir la tipografía en la que se van a expresar los textos de nuestra plataforma digital. En este paso determinamos la familia y variable tipográfica que se utilizará para, al menos las siguientes jerarquías:


Título 1.Bajada.Citas.Párrafos y Textos.Botones.





Contar con una tipografía adecuada y adaptable hará más sencillo el trabajo del UX Writer, del que puedes aprender mucho más en nuestro artículo sobre UX Writing.





Paso 4 - Determinar los Componentes:


El cuarto paso es también el más extenso en el proceso de hacer un UI Kit. En esta etapa nos toca definir cada uno de los elementos que se usarán en la aplicación. A continuación, vamos a nombrar algunos de forma genérica pero pueden ser más dependiendo el grado de complejidad de la plataforma:


Barras (Superiores, Inferiores)Formulario (Selectores, Campos de Texto, Botones)Tarjetas (Texto, Texto + Imagen)Controles (Medidores, Switches)


Si el componente tiene estados activos e inactivos, esto también debe expresarse en los componentes.











Paso 5 - Diseñar los Botones:


El quinto paso consiste en diseñar los botones. Para esto es necesario tener en cuenta el sistema operativo elegido (En Android, los botones son rectangulares mientras que en IOS predominan las elipses). 


Es importante definir un Botón Principal, Botón Secundario y Botón Terciario y sus 3 estados:


Activo.Inactivo.Presionado.











Paso 6 - Determinar Ilustraciones y Elementos Específicos:


El sexto y último paso en esta lista sobre cómo hacer un UI Kit consiste en definir las Ilustraciones, Fotografías y elementos específicos que el UI Kit necesite como podrían ser un mapa, un selector de asientos de cine o un Feed.


De esta manera podemos delimitar el tipo de ilustraciones que se van a utilizar para establecer un sistema y una coherencia a posteridad.











Considerando estos 6 pasos ya estaremos en condiciones de generar un UI Kit Completo. Veamos algunos ejemplos de UI Kits terminados:








Ejemplos de UI Kit Completos





Ejemplo de UI Kit 1:











Ejemplo de UI Kit 2:











Ejemplo de UI Kit de Coderhouse:

















¿Cuál es la diferencia entre UI Kit vs Design System?


Habiendo analizado los alcances de un UI Kit, ya estamos en condiciones de entender cuál es la diferencia entre este concepto y el de Design System, que en muchas ocasiones se utiliza erróneamente a modo de sinónimo.


Mientras que el UI Kit es únicamente la parte visual de nuestra plataforma digital, englobando los elementos concretos y tangibles que mencionamos anteriormente en el artículo, el Design System o Sistema de Diseño es un concepto más amplio y abarcativo.  


El Design System engloba tanto al UI Kit como a otros elementos: el tono de comunicación de la marca, la filosofía de marca, el manual de marca. Es importante destacar que este es un documento en constante evolución, mientras que un UI Kit se sostiene en el tiempo.








Conclusión


Tal y cómo lo analizamos a lo largo del artículo, generar una conceptualización pertinente y poderosa en la etapa de Moodboard que posteriormente pueda ser transferida a la interfaz de usuario nos va a permitir generar una identidad diferencial para destacarnos de nuestra competencia.


En una realidad donde todo entra por los ojos, trabajar a fondo en el desarrollo de un Moodboard y un UI Kit nos va a permitir obtener una ventaja diferencial y una herramienta fundamental para rankear primeros en la mente del consumidor.


¿Tienes alguna duda? ¡Te leemos en los comentarios!


¡Si quieres estar siempre actualizado sobre las nuevas tendencias que van surgiendo te recomendamos suscribirte al Coder Blog haciendo scroll down y si deseas continuar con tu formación UX UI, con los mejores profesionales, la información más actualizada y las mejores posibilidades de ingresar al mundo laboral,  te invitamos a conocer el Curso de Diseño UX UI de Coder House!