10 consejos para construir un lenguaje visual
Un lenguaje visual es como cualquier otra forma de comunicación.
Donde «lenguaje» se refiere a la comunicación hablada o escrita, el lenguaje visual va un paso más allá para conectarse con una determinada comunidad. Los elementos, desde el color al estilo, pasando por el tipo de fotos o ilustraciones, establecen lo que es una marca o empresa. Estos elementos visuales unen a un grupo de una manera estructurada y convencional que las personas entienden.
Un lenguaje visual incluye los elementos escritos y hablados de un sitio web o marca, así como todas las técnicas de diseño, fotos, íconos, logotipos y elementos que los usuarios pueden ver en la pantalla. A menudo, los usuarios no sabrán que existe un lenguaje visual; simplemente saben que cuando ven su sitio web o marca lo reconocen.
Así es como se crea un lenguaje visual que los usuarios puedan entender.
1. Cree una paleta de colores
Una paleta de colores fuerte es una herramienta de identificación para los usuarios. Cuando se utilizan colores consistentes, que son bien conocidos y están relacionados con la marca o el sitio web; los usuarios saben dónde están. No se pierden en el universo masivo de la web, porque les has dicho visualmente con qué sitio web o marca están interactuando.
Esta paleta de colores no debería ser exclusiva de su sitio web. Debe aplicarse universalmente y conectarse con todo lo que hace una marca: en línea, redes sociales, artículos de botín o empaques, tarjetas de presentación.
Además, la paleta de colores debería reforzar los valores de la marca.
Piense en los colores del restaurante de comida rápida McDonald’s: amarillo y rojo. Los colores representan la felicidad (amarillo) y el hambre (rojo). ¿Con qué frecuencia ha visto esta marca sin los “Arcos Dorados” o algo con rojo en el empaque?
2. Cree una jerarquía tipográfica
Tan importante como seleccionar las fuentes para su marca es determinar cómo se utilizarán.
Una jerarquía tipográfica establece el tono para hablar con los usuarios, susurrarles (tipografía pequeña y ligera) o gritarles (letras grandes en mayúsculas). No existe una forma correcta o incorrecta de comunicarse; es saber lo que funciona con tu tribu.
El truco para construir una escala tipográfica es que cada nivel debe ser lo suficientemente diferente del anterior y siguiente para que sea fácil ver los cambios en el texto.
Airbnb tiene una escala tipográfica distinta con tamaños y pesos para la tipografía que está estandarizada. Esta estandarización también se extiende a la paleta de colores y el espaciado para contribuir a un lenguaje visual sólido.
3. Establecer una cuadrícula
El espaciado y la ubicación de los elementos pueden ser tan importantes como los elementos mismos. ¿Tu identidad visual es limpia y organizada o un poco más caótica?
Tu cuadrícula responde a esta pregunta.
FreeCodeCamp explica bien esta estructura:
Una estructura modular ofrece la posibilidad de trabajar con equipos de ingeniería completos. Por lo tanto, podría producir rápidamente productos adecuados para todas las plataformas. Si está creando diseños conceptuales a partir de un mensaje, el método de integración será más útil.
En pocas palabras, ¿qué comunica sobre usted la complejidad o la simplicidad de la cuadrícula?
4. Cree una biblioteca de componentes
Desde botones hasta iconos, tarjetas o ventanas emergentes, cree una biblioteca de componentes para que todos los usos de los elementos dentro del diseño sean consistentes.
Un botón no debe ser un círculo azul en una página y un cuadrado rojo en otra. Un icono no debe tener estilo de línea en una página y estar a todo color en otra. Esta inconsistencia puede hacer que los usuarios se pregunten si abandonaron su sitio por error.
Una buena biblioteca de componentes incluye todos los elementos necesarios para crear páginas dentro del diseño y la regla de uso: tamaño y escala para cada tamaño de dispositivo y ajustes para dispositivos iOS en comparación con dispositivos Android.
Si bien la construcción de componentes comunes puede parecer una gran tarea en la parte frontal, puede hacer que la creación de nuevas páginas sea muy fácil en el futuro.
5. Enfatice un estilo de imagen
Ya sea que utilice fotos, videos o ilustraciones, es importante crear y mantener un estilo de imagen. Este es uno de los activos visuales más sólidos que los usuarios recordarán y asociarán con su sitio web o marca.
Este estilo se relaciona con cualquier cosa, desde recortes de fotos, ajustados versus amplios, uso de filtros, velocidad de videos y estilo de composición.
Mira los múltiples elementos de Smashmallow debajo. Aunque no estén agrupados, contienen elementos comunes que conectan las imágenes con la marca. (No el globo aerostático en cada imagen). Este estilo de imagen marcó el tono de quién es esta empresa y cómo se conectan con los usuarios.
6. Cree reglas para la animación
Los elementos animados también deben seguir un conjunto básico de reglas. ¿Se mueven rápido o lento? ¿Se mueven solos o solo como un estado flotante?
Estas interacciones también ayudan a establecer la identidad visual. Las animaciones pueden marcar la pauta para un proyecto. Usarlos o no usarlos puede decir mucho sobre quién eres y qué quieres ser.
Esto chupito de mojito de Dribbble, abajo, tiene movimiento circular. Piense en cómo se verían otras animaciones en el mismo lenguaje visual. También pueden moverse de la misma manera circular y a una velocidad similar.
7. Emparejar palabras y visuales
Para que un lenguaje visual sea eficaz, debe coincidir con el lenguaje real utilizado en el diseño. Si las palabras y los elementos visuales no coinciden, la experiencia podría confundir a los usuarios.
Los elementos deben trabajar juntos para crear un paquete general de comunicación que enfatice lo mismo.
Steffany, a continuación, usa color, un logotipo femenino y palabras para mostrar de qué se trata su sitio web. Las piezas funcionan juntas para crear una imagen general y no compiten con diferentes mensajes de texto y visuales.
8. Sea fiel a sí mismo
Un lenguaje visual solo funcionará si es creíble. Debe representar quién y qué eres.
¿Te imaginas Barrio Sésamo sin los personajes? Sería bastante difícil.
Toda la identidad visual de la marca se basa en Big Bird, Elmo y otros. Cada parte del diseño refleja esto. Para conectar aún más la identidad visual del programa de televisión y los personajes de dibujos animados, observe cómo se utilizan ambos en el diseño del sitio web. Esto ayuda a unir la fantasía y la realidad visualmente para ayudar a mantener la identidad de la marca.
9. Sea consistente
Una vez que haya desarrollado un conjunto de pautas para un lenguaje visual, cúmplalas. El mayor paso en falso al trabajar para construir un lenguaje visual es la inconsistencia.
FreeCodeCamp señala que un lenguaje de diseño debe responder a las siguientes preguntas. También son los puntos de referencia de si está respetando la coherencia con sus imágenes.
- ¿Qué color estamos usando?
- ¿Dónde se coloca el logo?
- ¿Se utilizó este patrón en otro lugar?
- ¿Cuál es la documentación más reciente?
- ¿Cómo construimos esta animación?
- ¿Es esto de la biblioteca de componentes?
Tenga en cuenta que Corby puede afirmar las respuestas a estas preguntas. El logotipo se encuentra en una ubicación común, se utilizan colores uniformes en todo momento y los patrones / animaciones se utilizan de la misma manera.
10. Desarrolle una guía de estilo … y aplíquela
Establece un lenguaje visual y codifícalo.
Luego ponga a alguien a cargo de hacer cumplir la ley. Tu identidad es demasiado importante para dejarla al azar. Los seres humanos son innatamente visuales; El lenguaje visual puede ser uno de los elementos más fuertes que conecta a los usuarios con su sitio web o marca.
