![](data:image/svg+xml;charset=utf-8,<svg height="470" width="655" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Cuando pensamos en una empresa lo primero que se nos viene a la mente es su logo, sus colores o su tipografía. Incluso muchos no recordarán una marca solo por el servicio o producto que ofrece, ya que estos siempre están asociados a una imagen corporativa la cual está construida tanto por elementos visuales como por conceptos abstractos, considerando los valores que inspira y los conceptos que destaca.
Las piezas que componen una imagen corporativa están especificadas en un manual de normas gráficas. Normalmente este documento está orientado a los medio impresos, dejando de lado aspectos clave para su correcto uso en plataformas digitales.
En proyectos web es fundamental contar con definiciones claras para las distintas aplicaciones de la marca en plataformas digitales, ya que estas tienen características muy diferentes a las de los medios impresos. Este documento tiene como principal propósito unificar los criterios, normar el manejo de la imagen gráfica y asegurar un nivel de calidad, por lo que su uso es obligatorio y debe ser respetado por todos los miembros del equipo.
Elementos que define el manual
En IDA nuestro manual cuenta con secciones que definen las normas básicas para el uso del logo y los componentes de la marca, especificando las características de las imágenes a usar en las distintas plataformas en las que estamos presentes. Estos son los elementos generales de estos apartados:
Imagotipo o Isologo
![](data:image/svg+xml;charset=utf-8,<svg height="360" width="655" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Define el símbolo o signo que representa a la empresa y la escritura que lo acompaña. Ambos forman un isologo, el cual debe ser un vector escalable y legible. En el documento se detallan los tamaños, proporciones y tipografías que usan.
Esta sección debe incluir instrucciones sobre lo que no se puede hacer con el elemento, de esta forma se previenen usos incorrectos por una mala interpretación de las definiciones.
Colores web
![](data:image/svg+xml;charset=utf-8,<svg height="353" width="655" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Muestra los colores corporativos que se han escogido para transmitir la personalidad de la marca y ser identificado por los consumidores. Indica colores principales y secundarios con sus valores exactos en los sistemas RGB, CMYK, Pantone y Hex, para cubrir todas las opciones y así prevenir errores. Si no se cuenta con toda esta información, el manual debería al menos incluir la definición de colores en web 216.
Fuentes optimizadas para pantallas
![](data:image/svg+xml;charset=utf-8,<svg height="300" width="715" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Describe las tipografías corporativas optimizadas para web y muestra todos los caracteres, incluyendo números y símbolos, en mayúscula y minúscula. También se incluyen las distintas versiones o estilos de esta.
Vistas o versiones del logo
![](data:image/svg+xml;charset=utf-8,<svg height="315" width="665" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Para asegurarse de que la marca se adaptará correctamente a cualquier plataforma y pantalla, el manual define cómo se verá en las distintas situaciones. Esto incluye combinaciones alternativas de colores, vistas en escala de grises y blanco y negro, el favicon, y las versiones del logo responsive.
Adaptaciones para distintas plataformas
![](data:image/svg+xml;charset=utf-8,<svg height="310" width="655" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Esta sección expone los diseños que se utilizarán en las redes sociales y los canales donde la marca tenga presencia. Cada modelo se adapta a las características particulares de la plataforma, definiendo los tamaños e imágenes que se usarán como avatares y temas de perfil, más las frases que estas contendrán. Por ejemplo, en Twitter la foto de fondo debe ser de 1500px por 500 px y si lleva un mensaje este debe estar alineado a la izquierda.
Así mismo, se debe definir el diseño de las firmas en correos electrónicos corporativos, especificando la tipografía, el tamaño, la imagen a utilizar y el contenido escrito.
Objetivos y usos
Todos los elementos anteriores permitirán:
- Definir claramente los usos de la marca en plataformas digitales.
- Asegurar la coherencia de la imagen de marca en Internet.
- Prevenir errores de visualización a través de la descripción en detalle de las características de cada elemento.
- Homologar los usos de la marca a través de la descripción de las distintas formas que puede tomar el logo.
- Establecer guías de uso para aplicaciones futuras.
- Funcionar como una guía de consulta para nuevos integrantes del equipo.
Un buen manual de normas gráficas digitales modelará la imagen corporativa online, asegurará el correcto uso de los elementos visuales de la marca y mantendrá un alto nivel de calidad. Esto fomentará la confianza y valoración positiva de los usuarios hacia la marca, sus productos y sus servicios, afectando a su vez los indicadores de conversión y venta. Por esta razón en IDA recomendamos incluir en estos manuales una sección especialmente dedicada al mundo digital que describa en detalle todos los elementos que mencionamos en esta nota.