Si te encuentras en proceso de creaciĂłn de tu negocio y has llegado al momento en el que ya tienes listo tu branding y vas a empezar a diseñar tu página web, en este artĂculo te cuento cĂłmo adaptar el branding de tu marca para llevarlo a tu web.
Ya sabes que, antes de comenzar con el diseño de la web, es recomendable tener listo el manual de marca, con el que te será mucho más sencillo el hecho de trasladar y plasmar tu branding en tu sitio.
De modo que, si te encuentras en ese punto, en este post te enseño con ejemplos reales cómo adaptar el branding de tu marca a tu sitio web.
¡Empezamos!
#1 Paleta de colores
La paleta de colores es fundamental a la hora de trasladar el branding a una web. Se trata de plasmar los colores de tu marca en los diferentes elementos de tu sitio: textos, tĂtulos, botones, fondos, etc.
Parece fácil, ¿verdad?
Pues déjame decirte que no es tan sencillo. La dificultad está en encontrar el equilibrio entre los diferentes colores de marca y saber combinarlos de forma creativa. Es decir, de usarlos con gracia, no como si se estuvieran matando entre ellos.
Para ello, debes acudir a tu manual de marca y extraer los cĂłdigos hexadecimales de tus colores para configurarlos en tu plantilla.
Te dejo un par de ejemplos:
En la web de Letrana, utilizamos sus tres colores en los diferentes apartados y elementos: fondos con ancho completo, botones, tĂtulos, fondos e iconos de los servicios, etc.
Otro ejemplo es la academia online de español (ESPilar), donde utilizamos su paleta de colores de diferentes formas: fondos, separadores, botones, tĂtulos o degradados.
Esta es su paleta de colores:
#2 Logotipo y variaciones
Otra forma de trasladar el branding de una marca a su web es el uso de sus diferentes logotipos o variaciones del mismo, cosa que puedes ver en mi propio sitio.
Si te fijas en la barra de menú superior, verás que el logotipo es diferente en la versión inicial (cuando está fijo) que al hacer scroll.
En la primera vista aparece la versiĂłn principal de mi logotipo (con el apellido) y en la versiĂłn fija el diseño secundario, que no lleva el apellido y además se amplĂa un poco su tamaño.
AquĂ te dejo las dos versiones para que veas sus diferencias:
#3 La marca como recurso visual
Y hablando de logotipos, otra opción muy interesante es utilizar la propia marca como recurso visual para reforzar el branding sin necesidad de recurrir a elementos creativos externos a ella, tales como vectores o iconos de banco, muy utilizados en diseño.
En la web de NEXLEVO puedes ver cĂłmo utilizamos su isotipo en algunas cabeceras y elementos con ancho completo. De forma superpuesta, conseguimos un efecto visual muy potente que hace que el usuario tenga presente la marca en todo momento.
#4 Efectos visuales
Otra forma de llevar tu branding a tu web es a través de efectos visuales como pueden ser degradados, separadores o formas geométricas.
Con estos ejemplos seguro que lo entiendes mucho mejor.
En la web de PsicoSaludable, al tener un logotipo con formas redondeadas, quisimos trasladarlo a la web utilizando separadores con forma de onda, elementos circulares e iconos con formas curvas.
En el caso de Queen’s Gate School, como su logotipo es un escudo circular, utilizamos formas y bordes redondeados en el diseño de su web, además de fondos degradados para trasladar el punto elegante que tiene su branding.
Otro ejemplo es la web de Talent Point HR, en la que, para trasladar los sĂmbolos (parĂ©ntesis y asterisco) de su logotipo, integramos formas geomĂ©tricas en el diseño: puntos, bordes superpuestos, semicĂrculos, parĂ©ntesis apilados, etc.
#5 Movimiento
Hay marcas cuyo branding transmiten movimiento y dinamismo a simple vista, como es el caso que te quiero mostrar a continuaciĂłn.
Si te fijas en en logotipo de En Conexión Contigo, verás que tiene una especie de mancha con varios colores (amarillo, verde y azul) en el fondo.
ÂżCĂłmo podĂamos llevar ese elemento tan caracterĂstico hasta su web? Para ello, utilizamos vĂdeos (como fondo, en este caso) y animaciones para conseguir movimiento.
#6 Elementos gráficos
Por último, otra forma de adaptar el branding de una marca a su página web es utilizar elementos gráficos, como pueden ser iconos, vectores, dibujos o ilustraciones.
Te dejo varios ejemplos en cuyas webs utilizamos diferentes elementos gráficos.
Cuando diseñamos el branding de Eva Terual, me pidió que, como se dedica al copywriting, integráramos algún signo de puntuación en el logotipo.
A la hora de llevarlo a la web, recurrimos a esos mismos puntos con distintos y tamaños, alineaciones y colores (los de su manual de marca), que utilizamos como elementos de separación entre las diferentes secciones del contenido. De esta forma reforzamos su branding en la web y además conseguimos efecto visual muy creativo.
En el caso de ERM Consulting, el objetivo que buscaban a la hora de diseñar su web era conseguir un resultado visual moderno y fresco para diferenciarse de su competencia, otras consultoras con diseños más "conservadores".
Para ello, recurrimos a vectores muy coloridos, animaciones potentes y elementos en movimiento.
En la página de Clara Romeu, que es ilustradora y dibujante freelance, quisimos utilizar como recurso visual las propias creaciones de la autora, que convertimos en separadores entre los diferentes apartados. Además, elegimos una tipografĂa handwriting para reforzar algunos mensajes clave para ella.
Hasta aquà estos recursos y ejemplos con los que te he mostrado cómo adaptar el branding de una marca a su web. Espero que te sean de mucha inspiración y utilidad si estás en pleno proceso creativo de diseño de tu página.
0 comentarios