La parte visual en una web es muy importante. Gracias a la experiencia visual que transmites en tu web puedes conectar a primera vista con tu público objetivo, transmitir confianza y hacer atractiva tu propuesta de valor. Dentro del proceso de diseño, hacer un moodboard es una técnica tremendamente útil para empezar a trabajar la parte visual de tu web.
Dotarte de superpoderes para hacer la parte visual de tu web un lugar reconocible, atractivo y apetecible de consumir es importante. Explicarte cómo hacer un moodboard es un pasito más para conseguirlo.
Muchos implementadores de sitios web no dan la importancia que merece al diseño en la creación de páginas web. Un diseño bien hecho, alineado con tu imagen de marca, propuesta de valor y objetivos, te ayuda a que una visita se convierta en cliente.
Contenido importante
¿Qué es un moodboard?
Un moodboard es la técnica dentro del proceso de diseño web encargada de ayudarte a elegir los distintos recursos gráficos que intervienen en el diseño de tu web, buscando referentes que te inspiren y ordenándolos de manera fácil de ver e interpretar.
Antes de ponerte a diseñar tu web, dedicar tiempo a investigar, ver qué hace la competencia, cómo lo presenta, que recursos gráficos utiliza y encontrar ideas inspiradoras en otro tipo de webs, te permite sacar conclusiones muy valiosas para establecer unas reglas sólidas en la estrategia visual que seguirás.
Esta investigación previa es vital en el proceso de diseño web. Establecer las reglas visuales de tu web antes de mover un solo pixel en tu pantalla te evita hacer continuos cambios e improvisar en la elección de colores, tipografía, imágenes y la línea de diseño que seguirá tu proyecto.
Trabajando un moodboard a la larga ahorrarás un tiempo muy valioso y conseguirás un resultado más profesional en el diseño de tus páginas web.
La técnica para poner orden y resumir toda la información que has sacado en el proceso de investigación es el moodboard. Te permite recopilar en un único documento de manera simple y visual toda la información que te servirá de guía para decidir qué línea de diseño necesita tu proyecto.
¿Por qué es útil hacer un moodboard?
Un moodboard es una técnica muy efectiva para ayudarte a definir los recursos de diseño que utilizarás en tu web y no dejar espacio a la improvisación y a los cambios continuos.
Gracias al trabajo previo de investigación y sacar conclusiones, encontrarás el por qué de todas las decisiones de diseño que tomes. Te ayuda a definir una estrategia visual pensada con un propósito estratégico que va más allá del simple gusto estético y personal.
Gracias al moodboard, te será más fácil tomar las decisiones para los elementos que intervienen en el diseño de tu web. Te ayuda a definir la paleta de color, qué tipografías utilizarás, estilo de imágenes, cómo presentarás el contenido y el aire general que tendrá la parte visual de tu web.
Hacer un moodboard no se trata de copiar lo que te guste de otras webs, recuerda que uno de los propósitos del diseño es ser reconocible. Te sirve para inspirarte y tomar decisiones en la dirección correcta para que el diseño cumpla con su función.
Pasos previos para crear un moodboard.
Vamos a la parte práctica. Un moodboard forma parte del proceso de investigación y es realmente sencillo de hacer.
Primero empieza por la fase de análisis de tu competencia. Pon las páginas web de tu competencia que te vengan a la cabeza en distintas pestañas de tu navegador.
Luego ves mirando una por una y haz captura de pantalla de las partes que te llaman la atención, las que te gustan y guárdalas en una carpeta la cual puedes nombrar «capturas competencia».
En una hoja de excel puedes anotar las tipografías que utiliza cada web, si encuentras acertada esa tipografía y por qué, y la paleta de color que utiliza. Al final del artículo te dejo una serie de herramientas que te ayudará a sacar esta información.
Una vez termines con tu competencia y hayas sacado conclusiones de cómo presentan su web a través del diseño, pasas a la fase de buscar inspiración.
Puedes sacar inspiración en cualquier sitio, en Pinterest, Instagram, páginas web. La idea es que mires varias fuentes y captures pantalla de todo lo que te guste. Puede ser que te guste por como presentan el contenido, por sus imágenes, diseños que te llamen la atención. Haz captura de pantalla de todo y lo guardas en otra carpeta que puedes nombrar «capturas inspiración».
¿Cómo crear un moodboard?
Una vez tengas todos los referentes guardados en tus carpetas, ya puedes crear tu moodboard para ordenar la información y sacar conclusiones que te resultarán muy útiles para elegir la línea de diseño que seguirás en tu proyecto.
Hacer un moodboard es sencillo, puedes utilizar el programa con el que te sientas más cómodo, yo utilizo Photoshop, pero puedes hacerlo incluso con un documento en blanco de Word.
Empezamos por la competencia. En el documento nuevo en blanco, ves añadiendo las capturas de pantalla que has hecho. Añade las que más te llamen la atención y que tú veas que son relevantes en el ámbito de diseño.
Luego añade a este documento las tipografías que utiliza la competencia y que veas más apropiadas. También añade las paletas de color más acertadas según tu criterio.
Te dejo el enlace al artículo que hablo sobre cuáles son las principales funciones de los colores en páginas web.
También te dejo este otro enlace para hacer un test rápido a tipografías web y saber si es correcta la elección o no.
Este moodboard te sirve para ver como es la comunicación visual de tu competencia. El objetivo es ayudarte a encontrar el espacio que necesitas para diferenciarte y destacar sobre ellos.
Vamos al segundo moodboard. Este ejercicio te ayudará a definir tu relato visual. Al igual que la anterior investigación de la competencia, crea un nuevo documento en blanco y añade todos los pantallazos que has hecho. Añade los que más te gusten por un motivo u otro.
Este segundo moodboard lo puedes utilizar como inspiración. Añade una paleta con los colores que más se repiten en las capturas de pantalla que has añadido al documento y escribe las tipografías que usan en el caso de las capturas de pantalla a páginas web.
Al final, en este documento, habrás ordenado de manera visual diseños que te gustan y que puedes usar como referencia para tu propia web. Con el análisis de colores, tipografías, imágenes y estilos de diseño que sacas de este moodboard, unido al espacio que te deja la competencia, tienes una poderosa herramienta para crear la comunicación visual que necesita y que quieres dar a tu proyecto para sentirte cómodo y destacar sobre los demás.
Herramientas útiles para sacar partido al moodboard.
Para finalizar te dejo enlaces a herramientas útiles que puedes utilizar en el proceso de investigación y crear tu moodboard.
La primera herramienta se trata de una extensión gratuita de Google Chrome para averiguar los colores de una web.
Simplemente, lo instalas y pulsando al icono del contador de gotas en la parte superior derecha del navegador, puedes pulsar sobre el color que te interesa averiguar y automáticamente te da la información.
La segunda herramienta es otra extensión de Google Chrome tremendamente útil. Se trata de WhatFont y gracias a esta herramienta sabrás qué fuente está utilizando una página web.
Pulsas sobre el icono que se crea al instalar la extensión y al pasar el cursor por encima de cualquier texto te muestra el nombre de la fuente.
La sensación que transmite la parte visual de una web interviene directamente en la sensación que percibe un usuario al visitarnos. Hacer un moodboard es parte importante en el proceso de diseño y sin duda te ayudará a inspirarte y tomar decisiones correctas para tu web.
- Puedes resolver tus dudas por email.
- Puedes proponer temas para el blog y escribiré un artículo detallado.
- Te envío un email semanal con el resumen de artículos para que no te pierdas nada.