fbpx Skip to content

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 cierta comunidad. Los elementos desde el color hasta el estilo, pasando por el tipo de fotos o ilustraciones, establecen lo que es una marca o una empresa. Estos elementos visuales unen a un grupo de una manera estructurada y convencional que la gente entiende.

Un lenguaje visual incluye tanto los elementos escritos como hablados de un sitio web o marca, así como cualquier técnica de diseño, foto, icono, logotipo y artículo que los usuarios puedan ver en la pantalla. A menudo los usuarios no sabrán que existe un lenguaje visual; sólo saben que cuando ven su sitio web o marca lo reconocen.

Así es como se crea un lenguaje visual que los usuarios pueden entender.

1. Crear 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 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. Necesita ser aplicada universalmente y conectada con todo lo que una marca hace – en línea, medios sociales, artículos o empaques, tarjetas de visita.

Además, la paleta de colores debería reforzar los valores de la marca.

Piensa en los colores del restaurante de comida rápida McDonald$0027s: Amarillo y rojo. Los colores representan la felicidad (amarillo) y el hambre (rojo). ¿Cuántas veces ha visto esta marca sin los “Arcos de Oro” o algo con el rojo en el envase?

2. Crear 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, susurrar (tipografía pequeña y ligera) o gritarles (letras grandes en mayúsculas). No hay una manera 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 que lo precede y lo sigue para que sea fácil ver los cambios en el texto.

Airbnb tiene una escala tipográfica distinta con tamaños y pesos para una tipografía estandarizada. Esta estandarización también se extiende a la paleta de colores y al espaciado para contribuir a un lenguaje visual sólido.

3. Establecer una cuadrícula

El espaciamiento y la colocación de los elementos pueden ser tan importantes como los elementos mismos. ¿Es su identidad visual 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. De esta manera, pudo producir rápidamente productos adecuados para todas las plataformas. Si está creando diseños conceptuales a partir de un sentido de mensaje, el método de integración será más útil.

En pocas palabras, ¿qué es lo que la complejidad o simplicidad de la cuadrícula comunica sobre ti?

4. Crear una biblioteca de componentes

Desde botones a iconos, pasando por tarjetas o ventanas emergentes, cree una biblioteca de componentes para que todos los usos de los elementos dentro del diseño sean coherentes.

Un botón no debe ser un círculo azul en una página y un cuadrado rojo en otra. Un icono no debe ser de estilo de línea en una página y a todo color en otra. Esta inconsistencia puede hacer que los usuarios se pregunten si han abandonado su sitio por error.

Una buena biblioteca de componentes incluye todos los elementos necesarios para construir páginas dentro del diseño y la regla de tamaño de uso y escala para cada tamaño de dispositivo y ajustes para dispositivos iOS versus Android.

Mientras que la construcción de componentes comunes puede parecer una gran tarea en la parte delantera, puede hacer que la creación de nuevas páginas una brisa más adelante en la línea.

5. Enfatizar un estilo de imagen

Tanto si utiliza fotos, vídeos o ilustraciones, es importante crear y mantener un estilo de imagen. Este es uno de los activos visuales más fuertes que los usuarios recordarán y asociarán con su sitio web o marca.

Este estilo se relaciona con cualquier cosa, desde los cultivos de fotos: hermético versus ancho, uso de filtros, velocidad de los videos y estilo de composición.

Mira los múltiples elementos de Smashmallow a continuación. Aunque no estuvieran agrupados, contienen elementos comunes que conectan las imágenes con la marca. (No el globo aerostático en cada imagen.) Este estilo de imagen marca la pauta de quién es esta compañía y cómo se conecta con los usuarios.

6. Crear 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 sólo como un estado flotante?

Estas interacciones también ayudan a establecer la identidad visual. Las animaciones pueden marcar el tono de un proyecto. Usarlos, o no usarlos, puede decir mucho sobre quién eres y qué quieres ser.

Este mojito de Dribbble, abajo, tiene movimiento circular. Piensa 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 gráficos

Para que un lenguaje visual sea efectivo, tiene que coincidir con el lenguaje real utilizado en el diseño. Si las palabras y los elementos visuales no coinciden, los usuarios pueden sentirse confundidos por la experiencia.

Los elementos deben trabajar juntos para crear un paquete general de comunicación que enfatice lo mismo.

Steffany, abajo, usa color, un logo femenino y palabras para mostrar de qué se trata su sitio web. Las piezas trabajan 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 sólo funcionará si es creíble. Debe representar quién y qué eres.

¿Te imaginas Plaza Sésamo sin los personajes? Sería muy difícil.

Toda la identidad visual de la marca se construye alrededor de Big Bird y Elmo y otros. Cada pedacito del diseño refleja esto. Para conectar aún más la identidad visual del programa de televisión y los personajes de los dibujos animados, tenga en cuenta cómo se utilizan ambos en el diseño del sitio web. Esto ayuda a unir visualmente la fantasía y la realidad para ayudar a mantener la identidad de la marca.

9. Ser consistente

Una vez que haya desarrollado un conjunto de pautas para un lenguaje visual, apéguese a ellas. El mayor error cuando se trabaja 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 usted está honrando la consistencia con sus imágenes.

  • ¿Qué color estamos usando?
  • ¿Dónde se coloca el logotipo?
  • ¿Se usó este patrón en otro lugar?
  • ¿Cuál es la documentación más reciente?
  • ¿Cómo se construye esta animación?
  • ¿Esto es de la biblioteca de componentes?

Tenga en cuenta que Corby puede afirmar las respuestas a estas preguntas. El logo está en una ubicación común, se utilizan colores consistentes en todas partes y los patrones/animaciones se utilizan de la misma manera.

10. Desarrollar una Guía de Estilo…Y hacerla cumplir

Establecer un lenguaje visual y codificarlo.

Entonces pon a alguien a cargo de hacerla cumplir. Su identidad es demasiado importante para dejarla al azar. Los 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.