DISEÑO WEB Y DISEÑO GRÁFICO: INTRODUCCIÓN

Los que me seguís ya sabéis que antes de pasarme al marketing online, me dedicaba al marketing tradicional. Era jeda de marca en una multinacional de bebidas, en la que tuve la suerte de poder trabajar con increíbles profesionales del marketing y las mejores agencias internacionales.

Fue en esa época donde aprendí a marchas forzadas sobre la importancia y el valor de la marca, y su consistencia y homogeneización multicanal. Mi libro de marca, desarrollado de hecho por Interbrands, era casi la biblia en el departamento de marketing, y nos ahorraba horas en decisiones y diseño gráfico.

Una marca no es sólo su loguito o pictograma, sino que se construye a base de repetición de los mismos elementos visuales, donde se incluyen colores, fuentes y demás estilos de diseño.

Por muy básico y rudimentario que sea, siempre deberíais tener vuestro libro de marca o identidad corporativa: un documento escrito, donde registráis vuestros colores corporativos, tamaños, fuentes a utilizar y demás.

Y com el sitio web es otro soporte más donde comunicamos nuestra marca, éste debería estar 100% alineado y homogéneo con nuestro libro de marca. Por eso, cuando comenzamos nuestra web, una de las primeras cosas que debemos hacer es decirle a Divi cuál es nuestra paleta de colores corporativos.

A muchos particulares (incluso a diseñadores!) se les olvida hacer este ejercicio, y se ponen a diseñar la web añadiendo a mano cada color en cada módulo o sección, incurriendo en mayores tiempos de desarrollo y errores humanos, colores parecidos pero que no son los oficiales…en deterioro de la identidad corporativa.

En esta entrada de hoy, hablaremos de dos grandes herramientas que nos ayudarán en relación a los colores de nuestra web en Divi: la paleta de colores y los colores globales.

Antes de comenzar, aquí os dejo una pequeña captura del programa de diseño gráfico que suelo utilizar, donde existe un KIT DE MARCA…el libro de identidad corporativa vaya, con lo básico que necesito para ser fiel a mi branding en todos los diseños: mis colores, mis letras, etc.

COLORES EN DIVI: PALETA DE COLORES PREDEFINIDOS

Lo primero que iremos entonces es irnos a nuestra web, y cargar estos colores en nuestra PALETA PREDETERMINADA DE SELECCIÓN DE COLORES de DIVI.

Para ello, nos iremos a DIVI – OPCIONES DEL TEMA – GENERAL, y ahí podéis ver la paleta multicolor por defecto.

Lo que haremos será pinchar en dichos colores, y añadir el código hexadecimal (#hex) de nuestros colores, y dejar la paleta precargada.

Al terminar, guardaremos los cambios, y veremos cómo a partir de ahora, siempre que abramos colores en Divi, nos saldrá nuestra paleta corporativa, para un trabajo más rápido y homogéneo.

Para los que no sepáis el hex de vuestros colores, os recomiendo la herramienta INSTANT EYEDROPPER, podéis acceder a ella aquí. 

COLORES EN DIVI: COLORES GLOBALES

Imagináos ahora que el cliente, a mitad de la web, os dice que lo ha estado pensando…y que ese amarillo que escogió pese a tus consejos en contra… dos meses después su marido y amigas opinan que es demasiado chillón….caso real. O que te vuelves loca y decides cambiar tu imagen corporativa por completo.

Significa esto que tienes que ir página a página, sección a sección, fila a fila, módulo a módulo…cambiando los colores de la web?

Antes sí. Pero ya no, gracias a los COLORES GLOBALES EN DIVI. Una maravillosa nueva adición a Divi recién salida del horno de Elegant Themes.

Qué es esto? Pues hacer las paletas de colores predefinidos, dinámicas. De manera que si cambias el color de la paleta, se cambia automáticamente en todos los sitios de la web donde estuviera puesto!!!!! Una maravilla.

Tenéis el tutorial oficial de Elegant Themes sobre este tema aquí. 

OJO. Si no lo véis todavía, quizás os toque actualizar Divi primero a la última versión. 

Lo que voy a hacer es añadir también mi paleta de colores corporativos a la paleta de colores globales de la web. 

Clico en GLOBAL, y los voy añadiendo con el simbolito +.

Fijáos, que los colores globales tienen un iconito diferentes, acabado en puntita, para poder diferenciarlos.

Si estás empezando tu web, te recomiendo acostumbrarte a añadir colores globales en lugar de colores estáticos 🙂

Pero si ya tenías tu web hecha antes del lanzamiento de esta nueva funcionalidad, no te precoupes: nunca es tarde si la dicha es buena! 

Puedes convertir cualquier color de la web a global, clicando sobre él con el botón derecho y dándole a CONVERT TO GLOBAL. Una vez lo tengas global, de nuevo con el botón derecho le das a FIND & REPLACE, activas la casilla de buscar dicho color por toda la web…et voilá!