Cómo adaptar el branding de tu marca a tu página web
Cómo adaptar el branding de tu marca a tu página web

Cómo adaptar el branding de tu marca a tu página web

12/04/2021

Shutterstock Darko 1981

12/04/2021
Tiempo lectura:

Shutterstock Darko 1981

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:

Cómo adaptar el branding de tu marca a tu página web: Letrana

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.

Cómo adaptar el branding de tu marca a tu página web: Letrana
paleta de colores Letrana

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:

Cómo adaptar el branding de tu marca a tu página web: ESPilar
paleta de colores ESPilar

#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.

Cómo adaptar el branding de tu marca a tu página web: Max Camuñas

AquĂ­ te dejo las dos versiones para que veas sus diferencias:

Así ha sido el rediseño de mi web y mi marca
Así ha sido el rediseño de mi web y mi marca

#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.

Cómo adaptar el branding de tu marca a tu página web: NEXLEVO
cabecera con ancho completo
Cómo adaptar el branding de tu marca a tu página web: NEXLEVO
páginas de servicios

#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.

Cómo adaptar el branding de tu marca a tu página web: PsicoSaludable

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.

Cómo adaptar el branding de tu marca a tu página web: Queen’s Gate School

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.

Cómo adaptar el branding de tu marca a tu página web: Talent Point HR

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.

Cómo adaptar el branding de tu marca a tu página web: En Conexión Contigo

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.

Cómo adaptar el branding de tu marca a tu página web: Eva Teruel

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.

Cómo adaptar el branding de tu marca a tu página web: ERM Consulting

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.

Cómo adaptar el branding de tu marca a tu página web: Clara Romeu

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.

Summary
🎨 Cómo adaptar el branding de tu marca a tu página web
Article Name
🎨 Cómo adaptar el branding de tu marca a tu página web
Description
Si estás creando tu negocio, en este artículo te cuento cómo adaptar el branding de tu marca para llevarlo a tu web.
Author
Publisher Name
Max Camuñas
Publisher Logo

0 comentarios

Enviar un comentario

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

[Información Básica sobre Protección de Datos] Responsable: Máximo Camuñas Fernández. Finalidad: moderar y responder comentarios. Legitimación: Consentimiento. Destinatarios: No se ceden a terceros. Se pueden producir transferencias. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@maxcf.es así como el derecho a presentar una reclamación ante una autoridad de control. Información adicional: en mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal ,incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.

¿Necesitas una página web, blog, landing o tienda online?
¡PIDE TU
PRESUPUESTO!
masterclass

10 CLAVES PARA QUE TU WEB BRILLE CON LUZ PROPIA

MASTERCLASS: 10 claves para que tu web brille con luz propia

guĂ­a

PARA DISEÑAR LOGOTIPOS MEMORABLES

GUÍA para diseñar logotipos memorables