Diseño web e IA
Moodboard: qué es y cómo hacer uno para tu marca o tu web (paso a paso)
El método neutral, en papel o en cualquier app, con la parte que casi nadie cuenta: cómo convertir el tablero en una paleta que se lea bien en pantalla.
Un moodboard es un tablero con imágenes, colores, letras y texturas que fija cómo debe verse y sentirse tu marca o tu web antes de diseñar nada. Se hace en una tarde: defines de 3 a 5 palabras de marca, juntas referencias, filtras hasta quedarte con 8 a 15 piezas y sacas de ahí la paleta y la tipografía.
Casi todo lo que hay en Google sobre esto lo escriben Canva, Miro o Figma para enseñarte su herramienta. Aquí tienes el método neutral y la parte que nadie explica: cómo pasar del tablero a una paleta que se lea bien en pantalla, con el caso real de la marca Notablia. Es el primer paso de cualquier proyecto de diseño web o de marca.
En esta guía
Qué es un moodboard y para qué sirve
Un moodboard sirve para que todos imaginen lo mismo antes de diseñar: tú, tu diseñador y tu cliente, con el mismo tablero delante.
Un moodboard es un tablero visual que reúne imágenes, colores, tipografías, texturas y palabras para fijar el estilo de un proyecto antes de diseñarlo. Convierte adjetivos vagos como «moderno» o «cercano» en referencias concretas, para que el equipo y el cliente tomen las decisiones de diseño con un criterio común.
Lo que no es: no es un collage decorativo ni un tablero de Pinterest con 300 pines sin filtrar. Tampoco es el manual de marca. El moodboard va antes y marca la dirección; el manual llega después y fija las normas.
¿Cuántos tipos de moodboards existen?
No hay una lista oficial, pero se dividen por formato (físico o digital) y por uso: marca, web, interiorismo, moda, fotografía o vídeo y eventos, como una boda. Cambia lo que pesa en cada uno: en interiorismo mandan los materiales; en una web, la tipografía y los botones.
Cómo hacer un moodboard paso a paso
Para hacer un moodboard, escribe tus palabras de marca, recoge referencias sin filtrar, quédate con las mejores y saca de ellas colores y letras.
-
Escribe el objetivo y de 3 a 5 palabras de marca
Para qué es el tablero (logotipo, web, local o fotos) y qué debe sentir tu cliente. «Cálida, artesana, de barrio» filtra mejor que «bonita». Nielsen Norman Group recomienda partir de 4 o 5 palabras de ambiente.
-
Recoge referencias sin juzgar
Fotos de ambientes, materiales, letras, envases, webs, carteles y hasta capturas del móvil. No te limites a tu sector: una panadería puede inspirarse en una cerámica. Si después vas a usar alguna foto en tu web, sácala de un banco de imágenes gratis con licencia clara, no de Google Imágenes.
-
Filtra hasta quedarte con 8 a 15 piezas
Quita lo que no encaje con tus palabras y lo que se contradiga. Si dudas entre dos direcciones, haz dos tableros: mezclarlas en uno lo vuelve ilegible.
-
Ordena el tablero por jerarquía
Una o dos imágenes grandes, el resto alrededor y una franja con colores, tipografías y palabras. Añade una zona de «esto no» con lo que tu marca nunca debe parecer.
-
Saca la paleta y las tipografías
Toma con el cuentagotas los colores que se repiten, quédate con 3 a 5 y dales una función. Elige una letra para titulares y otra para texto. Lo explicamos a fondo más abajo.
-
Pásale la prueba a alguien de fuera
Enséñalo a alguien que no conozca el proyecto y pídele tres adjetivos. Si coinciden con tus palabras, el tablero funciona.
-
Conviértelo en decisiones escritas
Apunta los códigos HEX, las tipografías, el estilo de foto y lo prohibido. Esa hoja es el puente entre el moodboard y el diseño final.
¿Cuántas imágenes debe tener un moodboard?
Entre 8 y 15 piezas en total, contando colores y tipografías, es lo que mejor se entiende de un vistazo. Con menos de 6 no hay dirección; con más de 20 vuelve a ser un tablero de Pinterest. Cada IA da una cifra distinta, y lo comprobamos.
Moodboard branding: qué debe tener el de tu marca
Un moodboard branding lleva seis bloques: palabras de marca, imágenes principales, estilo de foto, tipografías, texturas y colores, más una zona de «esto no».
- Palabras de marca. De 3 a 5, escritas en el tablero.
- Una o dos imágenes ancla. Las que enseñarías si solo pudieras enseñar una.
- Estilo de fotografía. Luz, encuadre, fondo y si salen personas.
- Tipografías. Con una frase de muestra, no solo el nombre.
- Texturas. Papel kraft, lino o metal dicen mucho de tu precio.
- Colores. Muestras con su código.
Si el tablero es para un logotipo, añade referencias de tipos de logotipos para decidir antes qué familia buscas. Y si eres diseñador, guarda cada moodboard aprobado: explica tu proceso mejor que nada cuando aprendes cómo hacer un portfolio que venda.
Brandboard: qué es y en qué se diferencia del moodboard
Un brandboard es una lámina única que resume la identidad de una marca ya decidida: logotipo, paleta con códigos, tipografías, tono de voz y un par de aplicaciones de ejemplo. El moodboard busca el camino; el brandboard enseña el camino elegido en una sola página.
| Moodboard | Brandboard | Manual de marca | |
|---|---|---|---|
| Cuándo se hace | Al empezar | Mientras se diseña | Al terminar |
| Para qué sirve | Explorar direcciones | Validar la identidad con el cliente | Fijar las normas de uso |
| Qué lleva | Referencias ajenas y notas | Logotipo, colores, letras, tono y ejemplos | Todo lo anterior y los usos incorrectos |
| Cuánto ocupa | Un tablero | Una lámina | Varias páginas |
Para un negocio pequeño, la regla es sencilla. Si solo vas a pasar tu marca a un diseñador web, un impresor o un rotulista, un brandboard bien hecho te basta y te ahorra el manual largo. Si van a tocar la marca varias personas durante años, o vas a franquiciar, hazte el manual.
Para montarlo en Canva o Figma en media hora, pon arriba el logotipo sobre fondo claro y sobre fondo oscuro. En el centro, la paleta con su HEX y su función. Abajo, dos tipografías con una frase de muestra y tres frases que suenen a tu marca. Cierra con un «sí» y un «no» de estilo de foto, sacados de tu moodboard.
Moodboard web: del tablero a la paleta de colores y a la página
El moodboard web se traduce en decisiones: de 3 a 5 colores con función, dos tipografías, un estilo de foto y de botones, y contraste comprobado.
El tablero inspira; la paleta tiene que funcionar. Por eso no se copian todos los colores: se reparten papeles. Uno principal (logotipo, enlaces, botones), uno o dos secundarios, un acento para lo que quieres que se pulse, un neutro claro de fondo y uno oscuro para el texto. Con nuestro generador de paleta de colores puedes sacar la armonía y copiar los códigos.
Después viene la prueba que se salta casi todo el mundo: el contraste. Según las pautas WCAG 2.2 del W3C, el texto normal necesita un contraste mínimo de 4,5:1 con su fondo y el texto grande (unos 24 px, o 18,5 px en negrita), de 3:1.
¿Qué colores del moodboard pueden ir en el texto de la web?
Solo los que pasan el 4,5:1 sobre tu fondo. El caso de Notablia lo enseña bien. Su guía de marca (2026) baja la idea de «la biblia del marketing con un marcapáginas» a cinco colores con función. Este es el contraste de cada uno sobre blanco, calculado por nosotros con la fórmula de WCAG:
| Color | Código | Función | Contraste sobre blanco | Texto normal (4,5:1) |
|---|---|---|---|---|
| Índigo | #3D3AE0 | Principal y enlaces | 7,29:1 | Sí |
| Violeta | #7C3AED | IA y detalles | 5,70:1 | Sí |
| Coral | #FF5A36 | Acento | 3,10:1 | No, solo texto grande |
| Coral para texto | #D93A16 | Acento en texto pequeño | 4,60:1 | Sí |
| Tinta | #14161C | Texto y logotipo | 18,08:1 | Sí |
El coral es el color con más carácter y, a la vez, el que no vale para un párrafo. La solución no es quitarlo: es crear su versión oscura para el texto y dejar el coral vivo para botones grandes, iconos y detalles. Haz lo mismo con tu acento.
Moodboard online: Canva, Pinterest, Figma o en papel
Para hacer un moodboard online gratis bastan Pinterest para recoger y Canva o Figma para montar; el papel sigue ganando en interiorismo y materiales.
| Herramienta | Para qué es mejor | Plan gratis | Ojo con |
|---|---|---|---|
| Recoger referencias en tableros secretos | Sí | No filtra por ti | |
| Canva | Montar el tablero con una plantilla moodboard | Sí | Plantillas muy vistas |
| Figma o FigJam | Moodboards de web y en equipo | Sí | Cuesta más al principio |
| Milanote | Proyectos creativos con notas y enlaces | Sí, limitado | Pensado para creativos |
| Miro | Talleres con el cliente en directo | Sí, limitado | Se llena de notas |
| Cartón y corcho | Materiales reales, interiorismo y moda | Casi gratis | No se comparte por enlace |
Para un moodboard canva rápido basta una plantilla. Para una web, Figma gana: el tablero y el diseño viven en el mismo archivo.
¿Se puede hacer un moodboard con IA?
Sí, para dos cosas: generar referencias que no encuentras (una textura o un ambiente concreto) y ordenar tus ideas antes de buscar. Canva y Adobe ya tienen funciones de moodboard con IA, y más abajo tienes cómo sacarles partido. Úsalas para inspirarte, no para la web final: cada herramienta tiene sus condiciones de uso.
Actúa como director de arte. Mi negocio es [qué vendes], en [ciudad], para [tipo de cliente], y quiero que se sienta [cómo quieres que se sienta]. Dame: 1) cinco palabras de marca, 2) doce búsquedas concretas para Pinterest que encajen con esas palabras, 3) tres cosas que mi marca nunca debe parecer y 4) una propuesta de paleta de 5 colores con su función y su código HEX. No inventes datos de mi negocio: si te falta algo, pregúntamelo.
Moodboard generator con IA: cómo usarlo sin que salga genérico
Un generador de moodboards con IA te da material en bruto en segundos, pero no hace el filtro por ti. Funciona bien para texturas, ambientes y variaciones de color. Falla donde hace falta coherencia: personas reales, tu producto, texto dentro de la imagen y diez imágenes que parezcan hechas por la misma mano.
Este es el flujo que mejor resultado da:
- Escribe una frase de estilo fija y pégala en todos los prompts: «luz natural lateral, grano fino, fondo crema, sin personas».
- Genera unas 20 imágenes y quédate con 5. Si te gustan 15, tu frase de estilo es demasiado vaga.
- Mezcla esas 5 con fotos reales y capturas tuyas. Un tablero 100 % IA se reconoce a la legua y se parece al de todo el mundo.
- Etiqueta las piezas generadas como «referencia». Para la web final, usa fotos tuyas o con licencia.
Firefly Boards, de Adobe, funciona como un lienzo infinito. Según su página oficial, importas imágenes, generas otras con texto, aplicas referencias de estilo y lo usas gratis con una cuenta de Adobe, con generaciones diarias gratuitas y planes de pago para más volumen. El mismo método vale con el generador de imágenes que ya uses.
Antes de publicar nada generado, lee las condiciones de uso de la herramienta. Para un tablero interno, el riesgo es mínimo.
Moodboard ejemplos: marca, web, interiorismo y moda
Cada tipo de moodboard pone el foco en algo distinto: la marca en las sensaciones, la web en la interfaz, el interiorismo en los materiales y la moda en la temporada.
| Tipo | Qué lleva sobre todo | Ejemplo orientativo |
|---|---|---|
| Marca | Palabras, fotos de ambiente, letras y colores | Panadería de Zaragoza: «cálida, artesana»; madera, kraft, crema y verde oliva |
| Web | Tipografías, botones, fotos e iconos | Clínica de fisioterapia: «calma, confianza»; luz natural, botones redondeados |
| Moodboard interiorismo | Materiales, muebles y luz | Cafetería: roble, azulejo verde y latón |
| Moodboard moda | Tejidos, colores de temporada y poses | Colección de punto: lana cruda y tonos tierra |
Son ejemplos de moodboard orientativos, no casos de clientes. Si buscas moodboard ejemplos reales, Behance tiene miles: fíjate en cuántas piezas usan los que mejor se entienden.
Preguntas frecuentes sobre el moodboard
¿Qué va en un moodboard?
En un moodboard va lo que fija el estilo del proyecto: de 3 a 5 palabras de marca, una o dos imágenes principales, referencias de fotografía, tipografías con una frase de muestra, texturas y colores con su código. Suma una zona de «esto no» con lo que tu marca nunca debe parecer. Lo que sobra son los logotipos de la competencia, las capturas de webs que quieres copiar y las fotos que te gustan pero contradicen tus palabras. En total, de 8 a 15 piezas.
¿Cómo se traduce mood board al español?
Mood board se traduce como «tablero de inspiración», «tablero de ambiente» o «panel de tendencias». «Mood» es estado de ánimo y «board», tablero: un tablero que transmite una sensación. En diseño casi todo el mundo usa la palabra inglesa, y en España se busca mucho más junta, «moodboard», que separada. Si lo pones en un presupuesto para un cliente que no es del sector, añade la traducción la primera vez.
¿Qué es un moodboard en interiorismo?
Un moodboard de interiorismo es un tablero con los materiales, colores, muebles, texturas y luz que tendrá un espacio antes de comprar nada. Pesa más lo físico que en uno de marca: muestras de madera, azulejo, tela o pintura, a menudo pegadas en un cartón. Sirve para que el cliente apruebe el ambiente y para ver si el roble y el latón conviven con la luz real. En proyectos grandes, uno por estancia.
¿Qué es un moodboard de moda?
Un moodboard de moda es el tablero que fija la inspiración de una colección o de una sesión de fotos: siluetas, tejidos, colores de temporada, estilismo, poses y localizaciones. A diferencia del de marca, cambia con cada temporada o campaña. Si vendes ropa online, te sirve para dirigir la sesión de producto: el fotógrafo sabe qué luz, fondo y actitud buscas sin tener que adivinarlo.
¿Cuál es la diferencia entre un moodboard y un collage?
La diferencia es el propósito: el collage es una obra terminada que se cuelga o se publica, y el moodboard es una herramienta de trabajo para diseñar otra cosa después. En un collage manda la composición; en un moodboard, que cada pieza diga algo útil sobre la marca o el proyecto. Por eso el moodboard lleva colores con su código, tipografías y palabras clave. Si tu tablero solo es bonito, es un collage.
¿Sirve un tablero de Pinterest como moodboard?
Un tablero de Pinterest sirve para recoger referencias, pero casi nunca es un moodboard terminado. Pinterest guarda todo lo que te gusta, sin filtro y en orden de llegada; un moodboard es una selección de 8 a 15 piezas con jerarquía. Un moodboard pinterest bien usado es un cajón de recogida: tablero secreto, 40 o 50 pines sin pensar y, al final, las mejores pasan a Canva, a Figma o a un cartón.
¿Cómo hacer un moodboard en Canva?
Para hacer un moodboard en Canva, busca «moodboard» en las plantillas, elige una con huecos para imágenes y borra lo que sobre. Sube tus referencias, arrástralas y deja una o dos más grandes como imágenes principales. Añade cuadrados de color con el código HEX de cada tono y tus palabras de marca con las tipografías candidatas. Al terminar, descárgalo en PDF o comparte un enlace de solo lectura con tu cliente.