2. 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.
3. 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.
4. La comunicación visual de la marca
aplicada 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.
5. 1. Diagramación
960px ancho
• Grilla
Maqueta
A fondo blanco, se despliega en una
columna fija central de 960px para
pantallas a 1024px.
600px
“the fold”
Columnas
La diagramación interna es posible
desarrollarla usando un enrejado o grilla
de 12 columnas que habilitan 960px
Dimensiones de la Grilla
Tamaño real recomendada para
aplicación de la grilla.
26px
66px
aire aire
área de contenido
14px
1024px
6. 2. Plantilla Portada
x = 55px
Logo participada Menú principal x
• Maqueta encabezado
visor
Áreas
Esta es una web tipo portafolio
corporativo en la que se aprecian con 600px
claridad tres secciones: encabezado, Máximo
visor y contenido. Alto
Visible
Ruta crítica
Migas de Pan
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
contenido libre
que se esta visualizando.
Pie
Se agrega una banda horizontal con la
aplicación de la marca debajo del pie del
contenido de cada participada.
Pie de la Participada
Color pie
Debe evitarse el efecto sandwich
producido por colores iguales en
encabezado y pie. Use colores de fondos
con bajo contraste. pie Logo Grupo Empresarial
2x
7. 3. Plantilla Portada +
Logo participada Menú principal
• Visor + encabezado
visor
Columna Extra
Es posible utilizar un ancho reducido para
la ubicación de anuncios adicionales a la
derecha. Apile hasta cuatro anuncios.
≈700px 240px
Logo Grupo Empresarial
8. 4. Plantilla Interna
Logo participada Menú principal
• Menú encabezado
visor
Uso menú vertical
Espacio lateral para desplegar una barra
de navegación vertical. Es opcional y
puede ser aplicado según el volumen de
contenidos subyacentes.
Ruta crítica
Título de Nivel Uno
Es opcional para todo título de primer nivel
presentarse con fondo azul y en color de Menú Título de Primer Orden
letra blanco, una sola vez y al inicio del ≈240px de ancho Fondo: Azul (#30C2E0), Altura: 50px Ancho: ≈720px, Negrilla.
contenido por página.
≈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.
contenido libre
Logo Grupo Empresarial
9. 4. Plantilla Interna +
Logo participada Menú principal
• Menú encabezado
Ruta crítica
Ocultar Visor
Menú Título de Primer Orden
≈240px de ancho Fondo: Azul (#30C2E0), Altura: 50px Ancho: ≈720px, Negrilla.
Es posible retirar el visor de
fotos, para ganar visual de otros ≈250px de alto,
contenidos. 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.
contenido libre
10. 5. Logo Participada
• A izquierda
aire 960px aire
Logo Empresa 110px
Participada
285px
Área despliegue del logo Menú Principal
Siempre en fondo blanco. Tamaño: 14/16px
El logo puede ser aplicado en Estilo: Negrita
un área de 285px*110px. Puntero Encima:
Sin Subrayado
11. 6. Menú Principal
• A derecha
960px(total)–285px(logo)=675px de área para libre despliegue de contenidos del menú. aire
x
3
Inicio Menú 1 Menú 2 … Menú N* Contactos
x
Sub Menú 2.1
Sub Menú 2.2 Colores al Menú
El primer elemento del
En el menú desplegable, el color Donde El último elemento del
menú principal se llama
de la letra será de Gris al 80% y el N=6/7 menú principal se llama
Inicio y siempre retorna
a la Portada. Use nombres … comportamiento de puntero encima Contacto y retorna
para cada enlace el color de la letra a la página de contacto.
de menús cortos
es #0C82C5 sin subrayado
Sub Menú N
Desplegable opcional
Al ubicar el puntero sobre el
elemento del menú es
opcional el uso del
comportamiento con el
puntero encima y revelar
contenido subyacente.
12. 7. Pie de Página
• Incluir logo Grupo Empresarial
contenido para el pie
de libre diagramación
300px
x
aire 960px aire
Marca al Pie
Abajo a la derecha, fondo blanco,
enlazado a http://www.grupoinassa.com
Link Title: Grupo Empresarial Inassa
Image Alternate Text: idem
13. 8. Cromatografía
100%
• Color
100%
R0
G 119
B 197
40% 100% #0C82C5
R 111
G 180
B 225
100% #30C2E0
Paleta de Colores
Cada empresa es libre de usar colores
asignados a su marca.
R0
Se permite integrar en la comunicación
el uso del color verde para reforzar el G 130
compromiso ambiental de la marca.
B 100
# 9EBD3B
15. 10. Jerarquía
H1 - Encabezado 1
Regular, Black, Bold
18/24px
Color: Blanco
H2 - Encabezado 2
Fondo: Azul (#30C2E0)
Regular
14/16px
P - Párrafo RGB: 111,180,225
Regular
Color Gris al 80%
RGB: 91,91,95.
Tamaño mínimo fuente
12px, 0,75em, 9pts.
H3 - Encabezado 3
Alto de línea párrafo:
Recomendado al 125% Regular, Bold
14/16px
RGB: 91,91,95
Borde Superior de 1px
UL / Li - Listas
Regular
12px
RGB: 91,91,95
Tipo: Circulo
Color RGB: 111,180,225
16. 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
17. 12. Imágenes
• Ancho máximo 1024px. Por ejemplo:
• Sólo con relación de
Basada en imágenes que tienen relación de
aspecto 16:9 a 2 columnas
aspecto 16:9 y 4:3.
Full Columna Columna Derecha
• Sólo en uso vertical, 8:10 es 446x250 286x160
8:10
permitido. 274x342
• Sin sombras ni efectos. Media Columna
• Sin marcos o bordes. 206x116
• Peso estimado por foto Un tercio de Columna
126x71
entre 40Kb y 60Kb Con Panel Sin Panel
86x48
Miniaturas – 46x26
18. 13. Infografías
• Relación de aspecto Por ejemplo:
Simplicidad visual de la información
preferencial 3:4.
• Ancho máximo 1024px.
• Sin sombras ni efectos.
• Sin degradados.
• Sin bordes ni marcos.
• Colores mínimos, tenues y 1
frescos. 5 2
4 3
19. 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
20. 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
21. 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.
22. 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
23. 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.
24. 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/
25. 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í
26. 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?
27. Gracias!
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
