Moodboards en UX: Qué son y cómo crearlos

8/05/2023 Autor: Rafael Gallegos 11 min de lectura
¡Comparte!

Un Moodboard es una representación visual formada por un conjunto de piezas gráficas que tratan de representar un conjunto de emociones y conceptos. La idea es que de un solo vistazo puedas entender un concepto y las emociones alrededor de él.

Lo difícil de trabajar en una profesión relacionada con lo visual como el Diseño UX/UI es que todo el mundo se imagina algo diferente cuando se trata de explicar un Look & Feel.

Cuando dices que el botón tendrá forma de manzana, cada persona del equipo imaginará su propia versión de una manzana. Algunos pensarán en una manzana con una mordida en la esquina, otros en una manzana roja, otros en una manzana amarilla, algunos la imaginarán con una hoja verde y otros sin ella.

Y si puede haber tantas versiones de algo tan sencillo como una manzana, imagina lo complejo que se vuelve llegar a acuerdos con conceptos como “alegre”, “moderno” y “digital”, por citar algunos ejemplos.

Ante este panorama, los Moodboard aparecen como una herramienta que te permitirá comunicar fácilmente cómo se sentirá y percibirá un diseño de manera que todo el mundo esté de acuerdo.

Si pides a diferentes personas que dibujen una taza con café, cada persona hará una versión con distintas formas y colores de acuerdo a sus propios gustos, por lo que los Moodboards son una gran alternativa para llegar a un acuerdo entre todos para representar un concepto de una manera única.

¿Qué es un Moodboard?

Un Moodboard es una representación visual formada por un conjunto de piezas gráficas que tratan de representar un conjunto de emociones y conceptos. La idea es que de un solo vistazo puedas entender un concepto y las emociones alrededor de él.

Con el Moodboard podrás representar y trabajar de forma colaborativa con el resto del equipo en cómo se percibirá y verá una Aplicación o Página Web.

Los Moodboards se utilizan ampliamente en diversas aplicaciones de las artes visuales, incluidas las marcas, los gráficos, la moda, el cine, el diseño industrial y de interiores. A veces, incluso se utilizan en campos no visuales como la música, o diseño de perfumes por ejemplo, para capturar estados de ánimo y sentimientos.

En el diseño de UX, los Moodboards se utilizan para mostrar visualmente los sentimientos o valores que debe crear el producto digital. Son collages accesibles y fáciles de entender, incluso para personas con poca experiencia en diseño.

Por ejemplo, imagina que tu equipo está creando una aplicación profesional para trabajadores de la construcción urbana. Puedes enumerar algunas palabras que describen el ambiente visual al que apuntarás:

  • Motivacional

  • Energético

  • Brillante

Tales palabras no funcionan tan bien como una guía para el diseño visual o la marca. En su lugar, puedes usar un panel de estado de ánimo con imágenes de trabajadores de la construcción jóvenes que laboran arduamente y paisajes urbanos enérgicos, en una paleta de colores azul y amarillo. Un panel de estado de ánimo dará al equipo pistas visuales sobre el tipo de aplicación que deben diseñar.

Por lo general, los paneles de inspiración se utilizan para definir los colores principales de la interfaz de usuario del producto y la identidad del diseño visual, pero pueden incluir otros aspectos del diseño. Por ejemplo, tu Moodboard también podría tener:

  • Palabras de tono de voz

  • Ideas de marketing o persuasión

  • Patrones de diseño de interacción

  • Capturas de pantalla inspiradoras de otros productos

Esta colección podría incluso usarse más adelante para ayudar a inspirar una guía de estilo visual.

Principales Beneficios de los Moodboards

  • Recopilar inspiración de diseño en un solo lugar

  • Transmitir rápidamente el tono del producto

  • Alinear interpretaciones y futuras direcciones de diseño.

  • Trabajo colaborativo: varias personas pueden aportar sus ideas, ya sea de forma sincrónica o asincrónica.

¿Por qué hacer un Moodboard?

Por una simple razón: Las palabras hacen que cada persona se imagine algo distinto, pero un Moodboard ayudará a que todos los miembros del equipo tengan en mente lo mismo.

De esta forma te asegurarás de estar en el camino correcto y que no trabajarás en una propuesta que no no cuadre con lo que tu cliente o gerente tenía en mente.

¿Cuándo crear un Moodboard?

Los tableros de inspiración se utilizan en las primeras etapas del proceso de diseño de un nuevo producto o cuando se revisa sustancialmente un producto existente. 

Por ejemplo, pueden crearse durante las fases Definir o Idear en el ciclo de pensamiento de diseño. Ayudan a obtener consenso sobre el estilo de las imágenes antes de que los diseñadores comiencen a trabajar en los prototipos.

¿Quiénes participan en un Moodboard?

Por lo general, los profesionales creativos, como los diseñadores de interfaces de usuario, diseñadores visuales, diseñadores de plataformas o diseñadores de movimiento (interacción), lideran el proceso, pero pueden involucrar a otras partes interesadas, como propietarios de productos, líderes de diseño o administradores de contenido. 

¿Dónde crear un Moodboard?

Los canales para construir un Moodboard son infinitos. 

Puedes imprimirlo, usar recortes de revistas y colocarlo en una pared o tablero real.

Puedes usar programas como Sketch, Indesign, Photoshop y cualquier software de diseño que exista. 

Incluso puedes crearlo en la web con aplicaciones como Pinterest y Milatone. Sin embargo, recomendamos construir tu Moodboard con tableros de Invision (similar a Pinterest pero con algunas herramientas para personalizar tus tableros).

Esto simplifica el proceso y te ahorras un tiempo valioso. Si estás construyendo un boceto en Photoshop, debes preocuparte por el diseño, colocar las imágenes con cuidado y no tendrás imágenes de movimiento o gifs.

Invision es mucho más fácil que Photoshop porque no tienes que instalar ningún programa, y también es mejor que Pinterest porque te permite agregar muestras de color, fuentes reales y es fácil colaborar con un equipo o compartir con las partes interesadas.

¿Dónde encontrar inspiración para un Moodboard?

Google y Pinterest son la vieja confiable, pero hay un problema con ellos: Solo encontrarás imágenes populares que datan de hace 5 años. Corres el riesgo de encontrar diseños anticuados.

Te sugerimos buscar en sitios web seleccionados por diseñadores para inspirarte. Te recomendamos no solo mirar los diseños más populares, sino también los más recientes. Aquí algunos sitios para encontrar inspiración para el diseño.

¿Cómo crear un Moodboard?

1. Revisa la identidad de marca de la empresa

Si su empresa o equipo ya tiene una identidad de marca establecida o guías de estilo, revise estos documentos antes de crear un panel de inspiración. Úsalos como punto de partida para asegurarte de que tu panel de ideas cumpla con los estándares existentes.

2. Selecciona el Tipo de Moodboard (Físico o Digital)

Elige la herramienta que usarás para crear tu Moodboard. Puedes crear un tablero físico o digital.

  • Tableros físicos

Si tú y tu equipo aprecian las actividades prácticas, hacer una pizarra blanca o un tablero de espuma podría ser una buena opción. Agregar y mover fuentes con las manos puede estimular la inspiración y las ideas.

La desventaja es que no es buena para equipos remotos y es más difícil de guardar y compartir en toda la organización. Además, preparar e imprimir imágenes físicas y usar herramientas como pegamento, alfileres, imanes y cintas puede llevar mucho tiempo y ser un desperdicio.

  • Tablero de estado de ánimo digital

Esencialmente, todo lo que necesitas es una herramienta capaz de recopilar y mover imágenes. Muchas herramientas de diseño visual, diseño de interfaz de usuario y creación de prototipos admiten estas actividades. 

Si planeas crear tu tabla de estado de ánimo en colaboración con tu equipo, elige una herramienta con la que todos puedan trabajar juntos. Las herramientas de pizarra digital como Invoice, Miro, Mural o FigJam funcionan bien para los talleres remotos de Moodboard.

3. Elige los Estados de Ánimo

Los Estados de Ánimo son básicamente las emociones que la gente debería sentir al mirar tu Moodboard.

Para elegir el Estado de Ánimo adecuado, piensa en tu producto y en los usuarios. ¿Qué ambiente o estado de ánimo deseas que entregue tu producto? ¿Cómo quieres que se sientan tus usuarios al usar el producto?

Piensa en las diferencias sutiles entre cada palabra y elige 4 o 5 palabras que representen mejor el estado de ánimo que deseas transmitir (Ejemplo: Tranquilidad, inspiración, emoción, libertad, nostalgia). Este proceso es similar al que se utiliza para establecer un tono de voz de un producto, en el que escribes varias palabras de tono y las agrupas.

Ejemplos de Estados de Ánimo para un Sitio Web de Salud Bucal:

  • Tranquilidad: Los adultos mayores sienten tranquilidad al conocer prótesis dentales como alternativa a la pérdida de sus dientes

  • Inspiración: Los niños se sienten inspirados al saber que los brackets pueden ayudar a mejorar su sonrisa

  • Emoción: Las mujeres se sienten emocionadas al saber que un blanqueamiento dental puede limpiar sus dientes y dejarles una sonrisa de protagonista de telenovela

4. Dirección: Definir propósito y objetivos del proyecto

Piensa en tu diseño como un niño que quiere crecer y convertirse en astronauta. Necesitas guiar a este niño en cada paso del camino fomentando sus habilidades y destrezas. 

Necesitas darle una dirección firme para que, sin importar quién o qué adversidades encuentre, pueda mantenerse enfocado y lograr su objetivo. La dirección es lo que deseas que sea tu diseño, producto o servicio una vez que se lance y crezca.

Comienza definiendo el ¿Por qué?

En su libro Start With Why, Simón Sinek afirma que muy pocas personas pueden articular claramente por qué hacen lo que hacen. Esto no podría ser más cierto acerca de los diseñadores. Me parece que esto es falta de dirección. 

En una pizarra o en tu cuaderno dibuja un círculo

  • Por qué: Propósito del diseño

¿Por qué estás haciendo este diseño? ¿Por qué es relevante? Piensa más en las líneas de por qué te apasiona este diseño.

  • Cómo: El proceso

¿Cómo vas a hacer que suceda el por qué? ¿Usarás un marco: bootstrap, material design? ¿Cómo es mejor tu diseño? ¿Cómo logrará ser innovador tu diseño?

  • Qué: Los objetivos comerciales

¿Cuál es el problema que tu diseño está tratando de resolver? ¿Cuáles son los objetivos comerciales y de usuario?

Después de responder, combina el por qué, el cómo y el qué en una sola oración, y tendrás una dirección.

5. Recopila las imágenes y contenidos

Encuentra y recopila cualquier tipo de recurso visual (imágenes, ilustraciones, fotogramas de video, patrones o texto) que sea relevante para el estado de ánimo. Considera buscar recursos visuales en los siguientes lugares:

  • Búsqueda de imágenes de Google

  • Pinterest, Behance u otros servicios de selección de imágenes

  • Objetos físicos como revistas, libros o artefactos personales.

A medida que recopiles estos artículos, busca la unidad. Si bien un Moodboard es un crisol de diversos formatos, todos deben pertenecer a un tema determinado y transmitir los estados de ánimo que hayas elegido. Evita hacer un tablero desordenado con imágenes contradictorias.

Por ejemplo, las características tranquilas y serias no deben combinarse con las divertidas y lindas. Si tienes en mente varios conceptos visuales distintos, haz Moodboards separados en lugar de comprimirlos en uno solo.

Si el formato que elegiste es un Moodboard Digital, no pienses en incluir solo imágenes estáticas: Un Moodboard puede contener fragmentos de videos, audios, recortes de revistas, gifs, colores, tipografías y hasta fotografías que hayas hecho tú mismo.

6. Organiza las imágenes y contenidos recopilados

Un buen Moodboard tiene una jerarquía visual clara. Decide la importancia de cada estado de ánimo. Haz que las fuentes clave sean más grandes que otras o colócalas en medio. 

Además, puedes agrupar recursos del mismo tipo para ayudar a otras personas a navegar rápidamente por tu panel de ideas. Utiliza espacios en blanco para crear una separación ordenada entre cada elemento.

No te olvides que el Moodboard sirve para representar cómo se percibirá y verá el proyecto que tienes entre manos. No hace falta ordenarlo poniéndolo todo súper alineado ni dejarlo muy desordenado como si fuera un collage, pero esto depende de tus gustos.

7. Comparte el tablero con tu equipo

Si creaste un panel de estado de ánimo por tu cuenta, es una buena idea permitir que tus compañeros de equipo brinden comentarios y agreguen sugerencias.

Si creaste un panel de estado de ánimo en colaboración con algunos de tus compañeros de equipo, comparte el panel terminado con el resto de tu equipo o departamento. Comunica claramente tu justificación para elegir los estados de ánimo y las imágenes.

Si optaste porque cada compañero de equipo creara un tablero diferente, reúne los tableros creados por tus colegas en un solo lugar y compáralos. Verás algunas ideas comunes y diferentes, ya que todos tienen perspectivas visuales únicas.

Da retroalimentación a tus colegas dejando notas adhesivas directamente en la pizarra. Codifica con colores si es necesario, como verde para lo que deseas eliminar y rojo para lo que deseas evitar. 

INSPIRACIÓN DIRIGIDA HACIA LA DIRECCIÓN CORRECTA

A veces, como creativos, simplemente nos enamoramos de un diseño o elemento, pero el hecho de que nos guste no significa que esa fuente o ese color vaya con el proyecto en el que estamos trabajando. 

Un Moodboard te será útil para alinear a todo el mundo y asegurarte de que estás diseñando la interfaz en la dirección correcta. 

Además también puede ser útil cuando estás diseñando y te falta la inspiración: Volver a consultarlo te ayudará a percibir de nuevo aquello que se quería representar.


Te recomendamos leer...