Normas gráficas en diseño web

¿Para qué sirve un manual de normas gráficas digitales?

Diseño|4 min de lectura|10 de febrero de 2015

Comparte

La imagen corporativa de una empresa en las distintas plataformas web influirá en la percepción de los usuarios sobre la marca, afectando su decisión de compra. Para asegurarnos de que todo el equipo use los elementos visuales de forma transversal en Internet es fundamental contar con un manual de normas gráficas con una sección dedicada a los canales digitales.

¿Para qué sirve un manual de normas gráficas digitales?

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

tipos de logo de IDA

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

Colores de IDA

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

tipografías de IDA

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

versiones del logo de IDA

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

Perfil de IDA en Twitter

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.