Tienes abierta la web de tu proyecto y dudas entre una tipografía elegante, otra más legible y varios colores que parecen funcionar por separado. Un moodboard suele servir para reunir referencias y orientar el estilo visual, aunque su utilidad depende de que las imágenes apunten a una misma idea.
Un moodboard convierte una idea de marca en una dirección visual compartida
- Función: alinea sensaciones y referencias antes de diseñar la web.
- Selección: cada imagen, color o letra debe ayudar a expresar el mismo concepto.
- Formato: el moodboard inspira; un style tile concreta recursos de interfaz.
- Legibilidad: comprueba el contraste de los colores cuando vayan a llevar texto.
Un moodboard sirve para acordar cómo debería sentirse una marca
Imagina una tienda online de cerámica artesanal: quiere transmitir calma, pero también mostrar que sus piezas son actuales. Un collage de materiales, fotografías, formas, colores y tipografías ayuda a traducir palabras como «serena» o «contemporánea» en pistas visuales que el equipo puede comentar. La UOC describe el moodboard como una técnica de inspiración visual que reúne referencias para analizar el tono del proyecto.
Ese tono es el punto de partida, no una receta cerrada. Yo prefiero juzgar el tablero por una pregunta sencilla: ¿las referencias ayudan a tomar decisiones sobre la web? Si una imagen resulta bonita, pero no aclara el estilo de fotografía, el color o el ritmo visual, probablemente distrae más de lo que orienta.
Elige el formato según la decisión que necesitas tomar
Un collage abstracto puede ayudar a hablar de sensaciones; se queda corto cuando hace falta decidir cómo se verá una página. Para elegir entre esos niveles, piensa en lo que necesitas aprobar ahora.
- Moodboard: reúne referencias de ambiente, materiales, imágenes y tono. Encaja cuando el equipo aún compara direcciones.
- Style tile: muestra muestras de color, tipografía y elementos de interfaz, como botones. Sirve para conversar sobre cómo podría expresarse la marca en una web, sin diseñar una página completa.
- Sistema de diseño: organiza decisiones reutilizables, patrones y componentes para construir y mantener una interfaz coherente. Material Design, por ejemplo, describe sistemas de diseño a través de guías, componentes y patrones.
Si la duda es «¿qué ambiente queremos?», empieza por el moodboard. Si la conversación ya gira en torno a botones, enlaces y estilos de texto, prepara un style tile; si toca aplicar reglas compartidas en varias páginas, necesitas documentar un sistema de diseño.
Un tablero útil conecta cada referencia con una decisión
Cuando el collage parece una carpeta de imágenes favoritas, todavía no ayuda a diseñar. Empieza por una idea rectora, por ejemplo, «artesanía serena con un toque actual», y descarta cualquier referencia que no contribuya a ella.
- Escribe el objetivo en una frase. «La web debe transmitir calma y facilitar la compra» da una guía más clara que «que quede bonita».
- Busca referencias con funciones distintas. Añade una textura para hablar de materiales, una fotografía para el estilo de producto y una tipografía para señalar el tono.
- Anota qué debe aportar cada elemento. «Luz natural, fondos simples» explica mejor una foto que dejarla sin contexto.
- Retira lo que contradiga el objetivo. Si conviven una estética rústica y otra tecnológica, decide si expresan una mezcla intencionada o dos direcciones incompatibles.
Presentar el tablero sin explicar qué se evalúa puede desviar los comentarios hacia una imagen aislada. Pide opiniones sobre el tono, la fotografía o la tipografía, y aclara que las referencias sirven para comunicar una dirección, no para copiar literalmente otra marca.
Comprueba el contraste antes de llevar los colores al texto
Un color puede quedar precioso en una muestra y dificultar la lectura cuando se usa detrás de un párrafo. En las WCAG 2.2 del W3C, el contraste mínimo de nivel AA es 4,5:1 para texto normal y 3:1 para texto grande; el umbral de texto grande corresponde, entre otros casos, a texto de al menos 24 píxeles CSS sin negrita.
Piensa en el moodboard de una web de cerámica: propone titulares de 24 píxeles en verde oscuro sobre crema y párrafos de 16 píxeles con el mismo verde. Aunque ambos pares parezcan legibles en una imagen de presentación, el titular y el párrafo tienen umbrales distintos: el primero debe alcanzar 3:1 y el segundo, 4,5:1 para cumplir esos mínimos. Comprueba cada combinación con una herramienta de contraste antes de fijarla como color de texto; una muestra decorativa no demuestra que funcione en pantalla.
El contraste tampoco decide si la combinación transmite el carácter adecuado. Aún hace falta revisar que la paleta, la tipografía y las imágenes encajen con el mensaje de la marca y con el contenido real de la web.
Una referencia aprobada no congela el diseño final
Las opiniones sobre los moodboards suelen dividirse: pueden facilitar el acuerdo sobre el estilo, pero también generar confusión si alguien interpreta el collage como una propuesta acabada. Por eso, deja claro qué se está validando y qué sigue abierto. Un moodboard puede orientar el trabajo y cambiar cuando los elementos se prueban en una página real.
También conviene distinguir inspiración de reproducción: usa las referencias para identificar rasgos como la luz, la textura o el ritmo tipográfico, y crea una solución propia para la marca. Así, la colección de imágenes no se convierte en una plantilla que limite decisiones posteriores.
La prueba final está en la página, no en el collage
Cuando la dirección visual esté clara, llévala a una sección real de la web: por ejemplo, una ficha de producto con título, precio, descripción y botón de compra. Ahí se ve si la tipografía se lee, si el color del botón destaca y si las imágenes conviven con el texto. El moodboard habrá cumplido su función cuando facilite esas decisiones sin tener que obedecer cada referencia al pie de la letra.