Guía de estilo Web Grupo Empresarial INASSA
Marca Grupo• El Grupo Empresarial INASSA es una marca  sombrilla propiedad de INASSA S.A., es un  grupo de negocios que ge...
Relación de marca• Cómo es la relación Grupo-Participadas?  – El Grupo es una marca fuerte como plataforma para    nuevos ...
La comunicación visual de la marca   aplicada a la web afianza y asegura elefecto sombrilla en el portafolio de negocios  ...
1. Diagramación                                                     960px ancho• GrillaMaquetaA fondo blanco, se despliega...
2. Plantilla Portada                                                                                                x = 55...
3. Plantilla Portada +                                             Logo participada                        Menú principal•...
4. Plantilla Interna                                                Logo participada                                      ...
4. Plantilla Interna +                                     Logo participada                                               ...
5. Logo Participada• A izquierda  aire                                          960px               aire                  ...
6. Menú Principal     • A derecha                                   960px(total)–285px(logo)=675px de área para libre desp...
7. Pie de Página       • Incluir logo Grupo Empresarial         contenido para el pie         de libre diagramación       ...
8. Cromatografía                                                           100%• Color                                    ...
9. Tipografía• Arial   Regular       !"#$%&’()*+,-./:;{}? 0123456789       ABCDEFGHIJKLMNOPQRSTUVWXYZ       abcdefghijklmn...
10. JerarquíaH1 - Encabezado 1Regular, Black, Bold18/24pxColor: Blanco                         H2 - Encabezado 2Fondo: Azu...
11. Iconografía• Aplicación   –   Diseñado a la medida   –   Aspecto elaborado   –   Formas 2D y 3D   –   Pocos colores y ...
12. Imágenes• Ancho máximo 1024px.            Por ejemplo:• Sólo con relación de                                  Basada e...
13. Infografías• Relación de aspecto         Por ejemplo:                              Simplicidad visual de la informació...
14. Animaciones• Basadas en CSS  – Transiciones suaves y progresivas• Basadas en Adobe ® Flash  –   Mostrar indicador de c...
15. Videos•   Incrustados y hospedados en el servidor•   Relación de aspecto 3:4 o 16:9•   Tamaño recomendado: 500px * 375...
Lecturabilidad• Facilidad que ofrecen los textos escritos para ser  comprendidos sin mayor esfuerzo y depende de:   –   Ha...
Escaneabilidad• Propiedad que permite con una mirada rápida buscar  contenido clave para ahondar en él o abandonar,  evita...
Usabilidad• Es la eficacia, eficiencia y satisfacción con la que un  producto permite alcanzar objetivos a usuarios en cas...
Accesibilidad• Grado en el que todas las personas pueden utilizar un  objeto, visitar un lugar o acceder a un servicio,  i...
Para ser leído•   Agregue enlaces para separar su información.•   Sea breve y sucinto, la mitad del texto original.•   Enl...
Para ser encontrado• +50% de los usuarios buscan dentro del sitio.• Cómo se relaciona su página con las búsquedas?• Inicie...
Gracias!         Este Manual es una publicación de laOficina de Relaciones Públicas y Mercadeo de INASSA   hola@grupoinass...
Upcoming SlideShare
Loading in …5
×

Guia Practica de Estilos para Web

604 views
499 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
604
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Guia Practica de Estilos para Web

  1. 1. Guía de estilo Web Grupo Empresarial INASSA
  2. 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. 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. 4. La comunicación visual de la marca aplicada a la web afianza y asegura elefecto 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. 5. 1. Diagramación 960px ancho• GrillaMaquetaA fondo blanco, se despliega en unacolumna fija central de 960px parapantallas a 1024px. 600px “the fold”ColumnasLa diagramación interna es posibledesarrollarla usando un enrejado o grillade 12 columnas que habilitan 960pxDimensiones de la GrillaTamaño real recomendada paraaplicación de la grilla. 26px 66px aire aire área de contenido 14px 1024px
  6. 6. 2. Plantilla Portada x = 55px Logo participada Menú principal x• Maqueta encabezado visorÁreasEsta es una web tipo portafoliocorporativo en la que se aprecian con 600pxclaridad tres secciones: encabezado, Máximovisor y contenido. Alto Visible Ruta críticaMigas de PanIncluya en todas las páginas del sitio, laRuta Crítica (breadcrumbs) indica elnombre y la ruta de acceso a la página contenido libreque se esta visualizando.PieSe agrega una banda horizontal con laaplicación de la marca debajo del pie delcontenido de cada participada. Pie de la ParticipadaColor pieDebe evitarse el efecto sandwichproducido por colores iguales enencabezado y pie. Use colores de fondoscon bajo contraste. pie Logo Grupo Empresarial 2x
  7. 7. 3. Plantilla Portada + Logo participada Menú principal• Visor + encabezado visorColumna ExtraEs posible utilizar un ancho reducido parala ubicación de anuncios adicionales a laderecha. Apile hasta cuatro anuncios. ≈700px 240px Logo Grupo Empresarial
  8. 8. 4. Plantilla Interna Logo participada Menú principal• Menú encabezado visorUso menú verticalEspacio lateral para desplegar una barrade navegación vertical. Es opcional ypuede ser aplicado según el volumen decontenidos subyacentes. Ruta críticaTítulo de Nivel UnoEs opcional para todo título de primer nivelpresentarse con fondo azul y en color de Menú Título de Primer Ordenletra 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. 9. 4. Plantilla Interna + Logo participada Menú principal• Menú encabezado Ruta críticaOcultar Visor Menú Título de Primer Orden ≈240px de ancho Fondo: Azul (#30C2E0), Altura: 50px Ancho: ≈720px, Negrilla.Es posible retirar el visor defotos, 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. 10. 5. Logo Participada• A izquierda aire 960px aire Logo Empresa 110px Participada 285pxÁrea despliegue del logo Menú PrincipalSiempre en fondo blanco. Tamaño: 14/16pxEl logo puede ser aplicado en Estilo: Negritaun área de 285px*110px. Puntero Encima: Sin Subrayado
  11. 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* Contactosx 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. 12. 7. Pie de Página • Incluir logo Grupo Empresarial contenido para el pie de libre diagramación 300px xaire 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. 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
  14. 14. 9. Tipografía• Arial Regular !"#$%&’()*+,-./:;{}? 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz BOLD !"#$%&’()*+,-./:;{}? 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz BLACK !"#$%&’()*+,-./:;{}? 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
  15. 15. 10. JerarquíaH1 - Encabezado 1Regular, Black, Bold18/24pxColor: Blanco H2 - Encabezado 2Fondo: Azul (#30C2E0) Regular 14/16pxP - Párrafo RGB: 111,180,225RegularColor Gris al 80%RGB: 91,91,95.Tamaño mínimo fuente12px, 0,75em, 9pts. H3 - Encabezado 3Alto de línea párrafo:Recomendado al 125% Regular, Bold 14/16px RGB: 91,91,95 Borde Superior de 1pxUL / Li - ListasRegular12pxRGB: 91,91,95Tipo: CirculoColor RGB: 111,180,225
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 27. Gracias! Este Manual es una publicación de laOficina de Relaciones Públicas y Mercadeo de INASSA hola@grupoinassa.com ● www. grupoinassa.com Barranquilla, Colombia Diciembre 2012

×