Connect with us

Cómo

Cómo construir un lenguaje visual para su marca

blank

Published

blank

Uno de los errores más grandes que cometen las personas nuevas en el diseño gráfico, ya sea que estén comenzando un blog para una pequeña empresa o revisando su marca existente, es pensarlo demasiado. El mejor diseño gráfico comienza y termina con una idea simple, aunque codificada de tal manera que pueda usarse en muchos contextos diferentes.

Los diseñadores se refieren a este tipo de diseño como un «lenguaje visual», pero esto podría exagerar la complejidad del mismo. Un lenguaje visual no es ni más ni menos que una caja de herramientas: un conjunto de elementos a los que puede acceder siempre que necesite diseñar una nueva página web o un nuevo producto. Puede tener docenas de elementos o puede tener dos.

En esta guía, le mostraremos cómo crear un lenguaje visual para su marca, comenzando en el nivel más básico y volviéndose lentamente más complejo.

1. Definir una paleta de colores

El primer y más fundamental paso para crear su lenguaje visual es elegir los colores que va a utilizar. Para muchas marcas, de hecho, sus colores se han convertido en una parte tan integral de su diseño gráfico (piense en el amarillo y el rojo de McDonald’s) que casi han reemplazado un logotipo y son reconocibles al instante.

Y si bien es cierto que la importancia de un esquema de color consistente es más evidente al diseñar su logotipo, la mayoría de los diseñadores necesitarán más que solo dos o tres colores llamativos de su logotipo para trabajar. Necesitará colores no solo para un empaque llamativo, sino también tonos más sutiles para su sitio web y una copia de formato largo.

Hay muchas herramientas excelentes que pueden ayudarlo a elegir una paleta de colores, pero mi favorita es Enfriadores. Este servicio en línea le permite generar rápidamente nuevas paletas y puede realizar pasos automatizados, como asegurarse de que todos sus colores tengan la misma intensidad.

2. Cree una jerarquía tipográfica

blank

En muchas clases de HTML, una de las primeras lecciones es la jerarquía tipográfica H1 / H2 / H3. Esta es la forma en que se codifican los encabezados en HTML, y hay una muy buena razón por la que se definen así: permite a los diseñadores mantener su estilo tipográfico consistente en todas las páginas y sitios. Crear coherencia visual en las publicaciones de bog, por ejemplo, se basa en asegurarse de que los encabezados y el texto de los párrafos sean igualmente coherentes.

Por lo tanto, el segundo paso para crear un lenguaje visual para su marca es pensar en las fuentes que utilizará. Nuevamente, debe definir 4 o 5 tamaños de fuente, desde los titulares hasta el texto del párrafo, para asegurarse de tener suficiente flexibilidad para el futuro de su marca.

3. Utilice cuadrículas

blank

Es posible que se enorgullezca de pensar de manera innovadora, pero aquí hay un pequeño consejo de un diseñador experimentado: todo se ve mejor en las cuadrículas.

Esta simple verdad significa que una parte central del lenguaje visual para una marca visual más exitosa es la cuadrícula. Las cuadrículas no solo hacen que su contenido se vea mejor, sino que también tienen otras ventajas. Al organizar el contenido de esta manera, puede transferirlo fácilmente entre diferentes formatos y contextos, al mismo tiempo que hace que su marca sea más accesible.

De hecho, muchos diseñadores aman tanto las cuadrículas que he visto descripciones detalladas de ellas escritas en las guías de estilo de las principales corporaciones. Si bien es posible que no necesite ir tan lejos, tener una buena comprensión de cómo funcionan las cuadrículas puede hacer que su marca y contenido se vean mucho más profesionales.

4.Haga una biblioteca de componentes

blank

El siguiente paso, después de crear un conjunto de colores y tipos de letra consistentes, es comenzar a construir una biblioteca de componentes a partir de ellos. Los componentes son elementos que utilizará en muchas plataformas diferentes y en muchos contextos diferentes, como un botón «pedir ahora» que aparecerá en su sitio web y en su aplicación.

Tener elementos inconsistentes realmente puede arruinar un diseño que de otra manera sería cuidadoso, pero las consecuencias pueden ser mucho peores. Los usuarios se acostumbran rápidamente al lenguaje visual que está utilizando. Cambiar el color de un botón entre páginas puede dificultar la navegación por su sitio, lo que aumenta las tasas de rebote.

Hay una regla simple cuando se trata de crear componentes: asegúrese de hacerlo solo una vez. Con eso, quiero decir que la primera vez que usa un botón en su página web, por ejemplo, debe crear una plantilla que seguirán todos sus otros botones. Si, al final de su proceso de diseño, no puede volver a crear su sitio usando solo plantillas, no ha creado suficientes componentes reutilizables.

5. Estilo de imágenes

blank
Imagen cortesía de Unsplash

Finalmente, unas breves palabras sobre el estilo de la imagen. La mayoría de los lenguajes visuales definirán un estilo de imagen, y esto puede ser tan complejo o tan simple como desee. Puede relacionarse con cualquier cosa, desde recortes de fotos (ajustados versus amplios), uso de filtros, velocidad de videos y estilo de composición, hasta si está usando fotos o ilustraciones (o imágenes dibujadas a mano de Guy Fawkes en medio de un grupo de soldados de asalto ) para su marca.

No importa lo lejos que vaya con la definición de un estilo de imagen, pruebe y elija el administrador de fotos que usará más temprano que tarde. Créame, su vida será más fácil y productiva. Esto le permite ver rápidamente las imágenes que tiene disponibles y que realmente encajan en el diseño en el que está trabajando.

El futuro

Si bien la coherencia es fundamental, es igualmente importante adaptar y cambiar su marca para adaptarse a los tiempos y al estado de ánimo de su audiencia. Debido a esto, debes pensar en tu lenguaje visual como uno en evolución. No esté demasiado interesado en cambiar los elementos que he mencionado anteriormente, y especialmente sus tipos de letra y colores, pero asegúrese de cambiar las cosas si no obtiene la tracción que debería.

Click to comment

Leave a Reply

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