Un lenguaje visual es como cualquier otra forma de comunicación.
Dondelenguaje” se refiere a la comunicación hablada o escrita, el lenguaje visual va un paso más allá para conectarse con una comunidad en particular. Elementos de color, estilo, tipo de fotos o ilustraciones determinan lo que es una marca o empresa. Estos elementos visuales conectan a un grupo de una manera estructurada y convencional que la gente entiende.
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, símbolos, logotipos y elementos que el usuario puede ver en la pantalla. A menudo, los usuarios no saben que existe un lenguaje visual; sólo saben que reconocen su sitio o marca cuando lo ven.
Cómo crear un lenguaje visual que sea entendido por los usuarios.
Resumen de el Contenido
- 1 1. crear una paleta de colores
- 2 2. crear una jerarquía tipográfica
- 3 3. crear una cuadrícula
- 4 4. crear una biblioteca de componentes
- 5 5. resaltar un estilo de imagen
- 6 6. reglas de construcción para animaciones
- 7 7. consistencia del texto y de la imagen
- 8 8. ser fiel a sí mismo
- 9 9. ser coherente
- 10 10. desarrollar una guía de estilo…..y forzarla
1. crear una paleta de colores
Una paleta de colores fuerte es una herramienta de identificación para el usuario. Al utilizar colores consistentes que se consideran conocidos y asociados a la marca o sitio, los usuarios saben dónde están. No se Footerrden en el vasto universo web porque les has dicho visualmente con qué sitio web o marca están interactuando.
Esta paleta de colores no sólo debe aplicarse a su sitio web. Debe ser universalmente aplicable y estar conectado a todo lo que una marca hace en línea, redes sociales, artículos o paquetes de Swag, tarjetas de visita.
Además, la paleta de colores debe reforzar los valores de la marca.
Footernse en los colores del restaurante McDonald’s: amarillo y rojo. Los colores representan la felicidad (amarillo) y el hambre (rojo). ¿Cuántas veces has visto este sello sin losArcos de Oro” o algo así con el rojo en el envase?
2. crear una jerarquía tipográfica
Tan importante como elegir las fuentes para su marca es cómo se utilizarán.
Una jerarquía tipográfica marca el tono, ya sea que se hable con los usuarios, se les susurre (tipografía de luz pequeña) o se les grita (letras mayúsculas grandes). No hay una manera correcta o incorrecta de comunicarse; se trata de saber lo que funciona para su tribu.
El truco para construir una escala tipográfica es que cada nivel debe ser diferente del anterior y del siguiente, por lo que es fácil ver los cambios en el texto.
Airbnb tiene su propia escala tipográfica con tamaños y pesos para la tipografía, la cual está estandarizada. Esta estandarización también se extiende a la paleta de color y espaciado para contribuir a un lenguaje visual sólido.
3. crear una cuadrícula
La distancia y la ubicación de los elementos pueden ser tan importantes como los elementos mismos. ¿Es su identidad visual limpia y organizada o más caótica?
Tu cuadrícula responde a esa pregunta.
FreeCodeCamp explica bien esta estructura:
Una estructura modular ofrece la posibilidad de trabajar con equipos de ingeniería completos. Esto le ha permitido producir rápidamente productos adecuados para todas las plataformas. Si crea diseños conceptuales a partir del sentido del mensaje, el método de integración tiene más sentido.
En resumen, ¿qué transmite la complejidad o simplicidad de la red sobre usted?
4. crear una biblioteca de componentes
Desde botones e iconos hasta mapas y ventanas emergentes, se crea 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 un lado y un cuadrado rojo en el otro. Un símbolo no debe ser un estilo de línea en un lado y un color completo en el otro. Esta inconsistencia puede hacer que los usuarios se pregunten si han abandonado accidentalmente su sitio.
Una buena biblioteca de componentes contiene todos los elementos necesarios para crear páginas dentro del diseño, y reglas de tamaño y escala de uso para cada tamaño de dispositivo, y personalizaciones para dispositivos iOS y Android.
Al crear componentes comunes puede parecer una gran tarea en el frontend, crear nuevas páginas puede ser muy sencillo.
5. resaltar 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 elementos visuales más fuertes que los usuarios recordarán y asociarán con su sitio o marca.
Este estilo se refiere a todo, desde culturas fotográficas -cerca de lo ancho, uso de filtros, velocidad de video y estilo de composición.
Echa un vistazo a los diferentes elementos de Smashmallow a continuación. Aunque no estén agrupados, contienen elementos comunes que vinculan las imágenes a la marca. (No el globo aerostático en todas las fotos.) Este estilo visual define el tono de quién es esta compañía y cómo se conecta con los usuarios.
6. reglas de construcción para animaciones
Los elementos animados también deben seguir un conjunto básico de reglas. ¿Se mueven rápida o lentamente? ¿Se mueven solos o sólo como un estado flotante?
Estas interacciones también ayudan a establecer una identidad visual. Las animaciones pueden marcar el tono de un proyecto. Con o sin usarlos, pueden decir mucho sobre quién eres y qué quieres ser.
Este mojito Dribbble, abajo, tiene un movimiento circular. Footernsa en cómo serían las otras animaciones en el mismo lenguaje visual. También puede moverse de la misma manera circular y con la misma velocidad.
7. consistencia del texto y de la imagen
Para que un lenguaje visual sea efectivo, debe corresponder al lenguaje real del dibujo. 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 de comunicación global que haga hincapié en las mismas cosas.
Steffany, abajo, usa color, un logo femenino y palabras para mostrar de qué se trata su sitio. Las partes trabajan juntas para crear una imagen global y no compiten con diferentes mensajes de texto e imágenes.
8. ser fiel a sí mismo
Un lenguaje visual sólo funciona 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 basa en Big Bird y Elmo y otros. Cada Footerza de 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, vea cómo se utilizan ambos en el diseño del sitio. Esto ayuda a unir visualmente la fantasía y la realidad y así mantener la identidad de la marca.
9. ser coherente
Una vez que haya desarrollado un conjunto de pautas para el lenguaje visual, respételas. El mayor error al trabajar en la construcción de un lenguaje visual es la inconsistencia.
FreeCodeCamp hace hincapié en que un lenguaje de diseño debe responder a las siguientes preguntas. También son la vara de medir para saber si se respeta la consistencia de las imágenes.
- ¿Qué color usamos?
- ¿Dónde se encuentra el logotipo?
- ¿Se usó este patrón en otro lugar?
- ¿Qué es la documentación más reciente?
- ¿Cómo creamos esta animación?
- ¿Es de la biblioteca de componentes?
Tenga en cuenta que Corby puede confirmar las respuestas a estas preguntas. El logotipo está en un lugar común, los colores uniformes se utilizan en todas partes, y los patrones/animaciones se utilizan de la misma manera.
10. desarrollar una guía de estilo…..y forzarla
Establecer un lenguaje visual y codificarlo.
Entonces deje la responsabilidad de la ejecución a otra persona. Su identidad es demasiado importante para dejarla al azar. Las personas son visuales por naturaleza; el lenguaje visual puede ser uno de los elementos más fuertes que conectan a los usuarios con su sitio web o marca.