Estás preparando la web de una marca y tienes dos referencias delante: una con colores vivos y otra más sobria. El mood es la sensación y la dirección visual que quieres transmitir, aunque todavía no define por sí solo cómo serán el logo, la tipografía o cada página. La diferencia entre una idea inspiradora y una identidad coherente está en cómo conviertes esa sensación en decisiones de diseño.
El mood orienta la identidad y debe traducirse en decisiones visibles
- Mood significa el tono o la atmósfera visual de una marca.
- Moodboard es el tablero de referencias que ayuda a expresar esa dirección.
- Adjetivos con criterios permiten elegir colores, tipografías e imágenes con coherencia.
- El contraste puede obligar a ajustar una combinación que encaja con la estética.
El mood define una dirección, no el diseño terminado
Una cafetería puede querer parecer cercana, tranquila y artesanal. Esos adjetivos ya sugieren una atmósfera, pero aún no dicen si el sitio tendrá una tipografía serif, fondos claros o fotografías con luz cálida. El mood es el criterio que orienta esas elecciones; la identidad visual es el sistema que las hace funcionar juntas.
En diseño, la palabra inglesa mood se refiere al tono emocional o ambiente que transmite una pieza o una marca. Un moodboard, en cambio, es un tablero de imágenes, colores, materiales y referencias que ayuda a comunicar ese ambiente. La distinción evita una confusión habitual: una colección de fotos inspiradoras puede sugerir una marca, pero no equivale a una identidad visual lista para aplicar.
Yo prefiero tratar el tablero como una brújula, no como una maqueta que haya que copiar. Una foto puede servir por su luz o su textura, aunque sus formas no deban pasar al logo; esa separación protege la personalidad propia de la marca.
Tres adjetivos útiles se convierten en decisiones de diseño
«Moderno», «bonito» y «elegante» suenan bien, pero dejan demasiado espacio a interpretaciones distintas. Para que un mood ayude de verdad, cada palabra debe apuntar a algo que puedas elegir o descartar. Si el término no cambia ninguna decisión visual, todavía es demasiado vago.
Una regla práctica: conserva un adjetivo solo si puedes asociarlo con al menos un recurso visual y explicar qué evitarías. Por ejemplo, «cercano» puede llevar a fotografías cotidianas y una tipografía de formas abiertas; «artesanal», a texturas discretas y detalles hechos a mano. Si todas las referencias parecen aptas para cualquiera de los dos conceptos, conviene afinar las palabras.
Imagina la web de una pequeña panadería: busca transmitir «cálida, sencilla y actual». Podría usar crema como fondo, un marrón oscuro para el texto, una tipografía con personalidad solo en los titulares y fotos de producto con luz natural. Un acabado muy brillante o una letra tecnológica futurista chocaría con esa dirección, aunque cada recurso por separado resulte atractivo.
Material Design 3 muestra por qué el color necesita funciones
Una paleta puede tener tonos preciosos y, aun así, volverse caótica en una web. Google Material Design 3 organiza el color por funciones, como primario, secundario, superficie y error: una forma de decidir dónde se usa cada tono, en vez de elegir colores como muestras aisladas.
En la práctica, esa lógica ayuda a traducir el mood: asigna un color a la acción principal, otro a los fondos y reserva los acentos para elementos que deban destacar. Para la panadería, el crema podría ocupar grandes superficies y el marrón identificar texto y botones; un naranja más vivo quedaría para una promoción puntual. Así, la marca conserva calidez sin convertir cada sección en un cartel distinto.
La idea no exige seguir un sistema de interfaz concreto. Sirve como filtro: antes de sumar otro tono, decide qué función tendrá y si refuerza la misma atmósfera. Si no puedes responder, probablemente sobra.
Una paleta expresiva aún debe dejar leer la web
El contraste puede recortar las opciones de color, incluso cuando la combinación encaja con el mood. Las pautas WCAG 2.2 del W3C fijan un contraste mínimo de 4,5:1 para texto normal y 3:1 para texto grande. Por eso un tono pastel que funciona como fondo puede fallar cuando se usa para texto pequeño.
| Situación | Qué puede pasar | Qué hacer |
|---|---|---|
| Texto pequeño en un tono claro sobre fondo blanco | El contraste puede quedarse corto y dificultar la lectura. | Oscurece el texto o usa un tono más claro de fondo; comprueba que alcance 4,5:1. |
| Titular grande con color de acento | Puede admitir menos contraste que el cuerpo del texto, pero aún necesita suficiente separación. | Comprueba que alcance 3:1 si cumple el criterio de texto grande. |
| El botón destaca por su color, pero la etiqueta se pierde | La forma puede llamar la atención sin que el texto se lea bien. | Ajusta la relación entre fondo y texto del botón; no confíes solo en el color para comunicar su función. |
El propio W3C indica que el texto de un logotipo queda fuera de ese requisito específico, pero esa excepción no se extiende al contenido habitual de la web. Yo reservaría la combinación más delicada para un detalle decorativo y mantendría títulos, botones y párrafos fáciles de leer: la identidad también se expresa en una página que no obliga a forzar la vista.
La identidad funciona cuando la sensación se reconoce en toda la web
Vuelve a la primera pantalla de la cafetería: si transmite calma, pero el botón parece de una aplicación financiera, hay una decisión que revisar. El mood sirve cuando permite detectar esos choques y corregirlos sin tener que empezar cada página desde cero.
Antes de publicar, mira el conjunto en móvil y escritorio: colores, tipografías, imágenes, botones y espacios. Si todos apuntan a la misma personalidad y el texto sigue siendo legible, la dirección visual ya está haciendo su trabajo. La referencia inspira; la coherencia se construye en cada elección.