Guía de estilo WebGrupo Empresarial INASSA

Marca Grupo

• El Grupo Empresarial INASSA es una marca sombrilla propiedad de INASSA S.A., es un grupo de negocios que gestionan el ciclo integral del agua en Latinoamérica.

Relación de marca

• Cómo es la relación Grupo-Participadas?– El Grupo es una marca fuerte como plataforma para

nuevos negocios.– Marca con trayectoria, proyección y respaldo.– La marca será endosada a las participadas.– Las participadas apropiarán, alinearán y aplicarán las

comunicación adyacente según su visión estratégica.

La comunicación visual de la marcaaplicada a la web afianza y asegura el

efecto sombrilla en el portafolio de negocios del Grupo Empresarial.

Estos son los lineamientos para la aplicación de la comunicación visual del

Grupo Empresarial en las páginas web de las Empresas Participadas.

La comunicación visual de la marcaaplicada a la web afianza y asegura el

efecto sombrilla en el portafolio de negocios del Grupo Empresarial.

1. Diagramación

960px ancho

1024px

área de contenidoaire aire

600px

“the fold”

Maqueta

66px

14px

26px

A fondo blanco, se despliega en una columna fija central de 960px para pantallas a 1024px.

Tamaño real recomendada para aplicación de la grilla.

Dimensiones de la Grilla

• Grilla

ColumnasLa diagramación interna es posible desarrollarla usando un enrejado o grilla de 12 columnas que habilitan 960px

2. Plantilla Portada

pie

x

600pxMáximo

AltoVisible

2xLogo Grupo Empresarial

x = 55px

visor

contenido libre

Esta es una web tipo portafolio corporativo en la que se aprecian con claridad tres secciones: encabezado, visor y contenido.

Incluya en todas las páginas del sitio, la Ruta Crítica (breadcrumbs) indica el nombre y la ruta de acceso a la página que se esta visualizando.

Se agrega una banda horizontal con la aplicación de la marca debajo del pie del contenido de cada participada.

• Maqueta

Ruta crítica

Áreas

Migas de Pan

Pie

Pie de la Participada

encabezadoMenú principalLogo participada

Debe evitarse el efecto sandwich producido por colores iguales en encabezado y pie. Use colores de fondos con bajo contraste.

Color pie

3. Plantilla Portada +

Logo Grupo Empresarial

Es posible utilizar un ancho reducido para la ubicación de anuncios adicionales a la derecha. Apile hasta cuatro anuncios.

• Visor +

240px

visorColumna Extra

≈700px

encabezadoMenú principalLogo participada

4. Plantilla Interna

Logo Grupo Empresarial

visor

Espacio lateral para desplegar una barra de navegación vertical. Es opcional y puede ser aplicado según el volumen de contenidos subyacentes.

• Menú

Uso menú vertical

contenido libre

Menú≈240px de ancho

≈250px de alto,hasta la línea de

alto visible.

Este espacio puede usarse para anuncios,

fotos o infografías. También dejarse

vacío o en blanco.

Título de Primer OrdenFondo: Azul (#30C2E0), Altura: 50px Ancho: ≈720px, Negrilla.

Ruta crítica

Es opcional para todo título de primer nivel presentarse con fondo azul y en color de letra blanco, una sola vez y al inicio del contenido por página.

Título de Nivel Uno

encabezadoMenú principalLogo participada

4. Plantilla Interna +

• Menú

contenido libre

Menú≈240px de ancho

≈250px de alto,hasta la línea de

alto visible.

Este espacio puede usarse para anuncios,

fotos o infografías. También dejarse

vacío o en blanco.

Título de Primer OrdenFondo: Azul (#30C2E0), Altura: 50px Ancho: ≈720px, Negrilla.

Ruta crítica

Es posible retirar el visor de fotos, para ganar visual de otros contenidos.

Ocultar Visor

encabezadoMenú principalLogo participada

5. Logo Participada

• A izquierda

285px

Logo EmpresaParticipada

Menú Principal

960pxaire aire

Siempre en fondo blanco.El logo puede ser aplicado en un área de 285px*110px.

Tamaño: 14/16pxEstilo: Negrita

Puntero Encima:Sin Subrayado

Menú PrincipalÁrea despliegue del logo

110px

6. Menú Principal

• A derecha

Inicio

x3

xMenú 1 Menú 2 … Menú N* Contactos

DondeN=6/7

960px(total)–285px(logo)=675px de área para libre despliegue de contenidos del menú. aire

Sub Menú 2.2

…

Sub Menú N

Sub Menú 2.1

Colores al MenúEn el menú desplegable, el color de la letra será de Gris al 80% y el comportamiento de puntero encima para cada enlace el color de la letra es #0C82C5 sin subrayado

Desplegable opcionalAl ubicar el puntero sobre el elemento del menú es opcional el uso del comportamiento con el puntero encima y revelar contenido subyacente.

El primer elemento del menú principal se llama Inicio y siempre retorna

a la Portada. Use nombresde menús cortos

El último elemento del menú principal se llama

Contacto y retorna a la página de contacto.

7. Pie de Página

• Incluir logo Grupo Empresarial

300px

960pxaire aire

x

contenido para el piede libre diagramación

Abajo a la derecha, fondo blanco, enlazado a http://www.grupoinassa.com Link Title: Grupo Empresarial InassaImage Alternate Text: idem

Marca al Pie

8. Cromatografía

R 0G 119B 197

R 111G 180B 225

#0C82C5

#30C2E0

40% 100%

100%

100%

R 0G 130B 100

# 9EBD3B

100%

Paleta de Colores

Cada empresa es libre de usar colores asignados a su marca.

Se permite integrar en la comunicaciónel uso del color verde para reforzar el

compromiso ambiental de la marca.

• Color

9. Tipografía

• ArialRegular

!"#$%&’()*+,-./:;{}? 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

BOLD!"#$%&’()*+,-./:;{}? 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

BLACK!"#$%&’()*+,-./:;{}? 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

10. Jerarquía

H1 - Encabezado 1

H2 - Encabezado 2

H3 - Encabezado 3

UL / Li - Listas

P - Párrafo

Regular, Black, Bold18/24pxColor: BlancoFondo: Azul (#30C2E0)

RegularColor Gris al 80%RGB: 91,91,95.

Tamaño mínimo fuente12px, 0,75em, 9pts.

Alto de línea párrafo:Recomendado al 125% Regular, Bold

14/16pxRGB: 91,91,95Borde Superior de 1px

Regular12pxRGB: 91,91,95Tipo: CirculoColor RGB: 111,180,225

Regular14/16pxRGB: 111,180,225

11. Iconografía

• Aplicación– Diseñado a la medida– Aspecto elaborado– Formas 2D y 3D– Pocos colores y tonos– Sin efectos ni sombras– Sin degradados

12. Imágenes

• Ancho máximo 1024px.• Sólo con relación de

aspecto 16:9 y 4:3.• Sólo en uso vertical, 8:10 es

permitido.• Sin sombras ni efectos.• Sin marcos o bordes. • Peso estimado por foto

entre 40Kb y 60Kb

Por ejemplo:Basada en imágenes que tienen relación de aspecto 16:9 a 2 columnas

Full Columna

Media Columna

Un tercio de Columna

Con Panel Sin Panel

Miniaturas – 46x26

Columna Derecha

446x250 286x160

206x116

126x71

86x48

8:10274x342

• Relación de aspecto preferencial 3:4.

• Ancho máximo 1024px.• Sin sombras ni efectos. • Sin degradados.• Sin bordes ni marcos.• Colores mínimos, tenues y

frescos.1

2

34

5

Por ejemplo:Simplicidad visual de la información

13. Infografías

14. Animaciones

• Basadas en CSS– Transiciones suaves y progresivas

• Basadas en Adobe ® Flash– Mostrar indicador de cargando– Evitar bordes visibles– Barra indicadora de progreso al reproducir– De incluir audio, agregar control de volumen y mutismo

15. Videos

• Incrustados y hospedados en el servidor• Relación de aspecto 3:4 o 16:9• Tamaño recomendado: 500px * 375px• Incluir controles

– Arranque– Reproducción– Volumen– Mutismo

Lecturabilidad

• Facilidad que ofrecen los textos escritos para ser comprendidos sin mayor esfuerzo y depende de:– Habilidad lectora – Formación y conocimiento del mundo– Cercanía o lejanía cultural– Dominio del idioma – Familiaridad con la temática

• No significa que éste esté escrito utilizando un modo de expresión infantil o un lenguaje coloquial.

Escaneabilidad

• Propiedad que permite con una mirada rápida buscar contenido clave para ahondar en él o abandonar, evitando así leer palabra por palabra.– Usar títulos cortos (4-8 palabras claves)– Inicie con una idea clave por párrafo (70 palabras)– Controle el uso de altas y negrillas– Indentado y viñetas bajan rapidez de escaneo

Usabilidad

• Es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos a usuarios en casos específicos.

• Las interacciones deben ser intuitivas, como otras en la vida real, sin conocimiento previo.– Presenta la información concisa y con claridad.– Opciones y formatos apropiadas al usuario.– Elimina la ambigüedad al interactuar.– Ubica lo más importante en el lugar correcto.

Accesibilidad

• Grado en el que todas las personas pueden utilizar un objeto, visitar un lugar o acceder a un servicio, independientemente de sus capacidades técnicas, cognitivas o físicas

• Es opcional para cada Participada:– Guía de Accesibilidad:

• http://www.w3.org/WAI/intro/wcag

– Evalúa la accesibilidad del sitio publicado en: • http://www.tawdis.net/

Para ser leído

• Agregue enlaces para separar su información.• Sea breve y sucinto, la mitad del texto original.• Enlaces a PDF completos para lecturas extensas.• La web es informal e inmediata, use frases simples.• Evite el enfoque del mercadeo, sea objetivo.• Racionalice sus imágenes, sobretodo las grandes.• Apoye con ilustraciones, gráficas o diagramas.• Verifique gramática, puntuación y consistencia.• Evite términos orientados a la web. P.ej. Clic Aquí

Para ser encontrado

• +50% de los usuarios buscan dentro del sitio.• Cómo se relaciona su página con las búsquedas?• Inicie con un resumen, resaltando keywords.• Encuentre y refine periódicamente sus keywords.• Qué keywords usan otros como Usted?• Cuáles son las keywords que identifican a su sector

industrial, geográfico y cultural?• Cuántas veces nombra su negocio en su sitio web?• Cuáles son las keywords que más deben repetirse?

Este Manual es una publicación de la Oficina de Relaciones Públicas y Mercadeo de INASSA

hola@grupoinassa.com ● www. grupoinassa.com

Barranquilla, Colombia

Diciembre 2012

Gracias!