Date post: | 17-May-2015 |
Category: |
Documents |
Upload: | carlos-carvajalino |
View: | 403 times |
Download: | 3 times |
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
[email protected] ● www. grupoinassa.com
Barranquilla, Colombia
Diciembre 2012
Gracias!