como hacer un moodboard para el diseño de tu web

Cómo hacer un Moodboard para el Diseño de tu Web

Qué es y para qué sirve un Moodboard

Empecemos por entender qué significa la palabra MoodBoard y es Tablero de Inspiración, pero si buscas una traducción en google, aparecerá como Tablero de Humor,  y aunque suene algo diferente, el concepto como tal es que un Moodboard nos ayuda a mostrar y comunicar de manera visual un estado de ánimo, un proyecto, una idea, un concepto, un estilo, etc. La importancia de crear un  Moodboard es muy conocida y un proceso casi obligado en el diseño de interiores y el mundo de la moda, pero recientemente se ha ido incorporando con mucha fuerza en el proceso de trabajo del diseño gráfico y web, ya que es una herramienta que aporta claridad en el proceso de creación y permite desarrollar mejor la idea alrededor de un concepto gracias a la inspiración que se logra.
Te estarás preguntando porqué necesitas hacer un moodboard para la planificación o creación de tu web, y es porque gracias a esta herramienta lograrás definir la identidad visual de tu sitio web para que éste sea coherente con tu marca y refleje ese estilo visual que quieres que tu cliente perciba.

Cómo hacer un Moodboard para el diseño de tu Web.

Un Moodboard que te ayude al diseño de tu web está conformado por Fotografías, Tipografías, texturas, colores, patrones, frases, etc. Te sirve cualquier cosa que inspire y esté en concordancia con eso que quieres transmitir.

Puedes crear un moodboard en físico usando revistas, telas, objetos y demás, ó puedes hacerlo digital usando cualquier herramienta o aplicación que te permita organizar imágenes como en power point, pinterest, etc.

Empecemos:

Palabras Claves:

  • Selecciona hasta 5 atributos de tu marca, que son esas palabras claves que reflejan y transmiten eso con lo que tu quieres que te relacionen o perciban. Acá te dejo un listado de adjetivos para que elijas con cuales resuenas.
  • Una vez elegiste esos 5 atributos, busca sinónimos u otras palabras  que transmitan lo mismo. Por ejemplo, la palabra Tranquilidad la puedes relacionar con la palabra pluma, agua, bienestar. Ya no es necesario que te enfoques en adjetivos sino en palabras en general.
  • Te invito a que vayas más allá del significado y los sinónimos de las palabras que elijas y te enfoques en eso que ellas trasmiten.

Búsqueda:

  • Elige primero si vas a realizar tu tablero de inspiración en hacer en físico o digital.
  • Realiza búsquedas de imágenes, textos, colores, y demás elementos que sientas que representan esos adjetivos que elegiste y organízalos. Puedes usar Pinterest y sus tableros para buscar y organizar las imágenes que vas seleccionando.

Selección y Filtrado:

  • Captura y recopila todas esas imágenes, textos, colores o cualquier elemento que te transmite esos atributos que elegiste como palabras claves.
  • Si eliges hacerlo en físico, recopila imágenes de revistas, texturas de telas, colores, y demás elementos que consideres te van a inspirar. Si decidiste hacerlo en digital, organiza las imágenes en Pinterest, creando un tablero.
  • Una vez has recopilado suficiente información, es momento de hacer un filtro de lo que realmente sientes que te inspira pues es normal que no todo lo que has elegido refleja eso que quieres transmitir.

Composición:

  • Organiza todo lo que has seleccionado después del filtro y quédate con máximo 20 imágenes que te transmitan coherencia y sientas que reflejan lo que esperas transmitir con tu web.
  • Para este paso puedes usar un tablero de corcho, un cuaderno o bloc de notas si tu tablero de inspiración es en físico, o puedes usar herramientas como Canva o Photoshop para crear una composición digital.

Hagamos Juntos un Moodboard

Te mostraré el proceso de creación de mi MoodBoard. Como saben, mi proyecto es sobre diseño web y quería que mi marca y mi web se enfocaran en los siguientes atributos:

Palabras Claves:

Las tres palabras que escogí fueron: Actual – Cercana – Estética

Desglosando en otras palabras el atributo Actual escogí:  Moderno, Auténtico, Fresco, Movimiento, Vanguardia, Nuevo.

Para el atributo Cercana elegí: Amigo, Familiar, Calidez, Unión.

Y para Estética: Belleza, Arte, Simplicidad, Pulcritud y Sofisticado.

Búsqueda:

Eligí realizar mi  tablero de inspiración de forma digital usando Pinterest.

Realizé búsquedas en pinterest y fuí agregando todo a un tablero que creé.

En la siguiente imagen te muestro la selección que hice de acuerdo a las palabras claves, donde elegí formas, patrones, tipografías, colores, frases, fotografías, etc:

Selección y Filtrado:

Luego de haber seleccionado alrededor de 40 imágenes, creé un subtablero en Pinterest donde elegí únicamente 10 imágenes de todas las que tenía en el tablero principal (que te muestro arriba).
Estas imágenes fueron las que sentí transmitían y evocaban la esencia de lo quería fuera mi marca y mi web.

Composición:

Para la composición usé la herramienta Canva y así fue como quedó:

A partir de esas imágenes me inspiré para seleccionar la tipografía que quería, los colores, el estilo fotográfico de la web y demás elementos visuales que iba a usar para comunicar. 

Para terminar…

Si ves mi moodboard y el estilo de mi web, vas a ver que tengo muchos elementos similares a los de las imágenes de arriba. Y es por eso que un moodboard te servirá muchísimo en la planificación de todos los elementos visuales tanto de tu marca como de tu web.

Espero que este artículo te haya gustado y sobre todo, te haya servido y te anime a planificar cuanto antes tu web ;).

Porque todo lo bueno se comparte ;)

¿Llevas varios meses en incluso un par de años con tu web pero jamás has conseguido clientes a través de ella? Descarga este checklist con el listado de todos los elementos que debes tener en tu página web para conseguir clientes.

4 comentarios en “Cómo hacer un Moodboard para el Diseño de tu Web”

    1. Gracias Nunu. Ya revisé y se corrigió. El enlace ya está funcionando correctamente para descargar el listado. Gracias por avisarme. Un abrazo

    1. Hola Enzo, especializarte en UX/UI me parece muy acertado para complementar todo lo que haz aprendido de diseño gráfico. Te deseo éxitos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio

LISTADO ATRIBUTOS

DESCARGAR LISTADO DE ATRIBUTOS

.
Abrir chat
¿Tienes una pregunta? ¡Escríbenos!
¿Tienes una pregunta? ¡Escríbenos!