ACHS, SITIO WEB PÚBLICO. GUÍA GRÁFICA

Transcripción

1

2 INTRODUCCIÓN 2

3 INTRODUCCIÓN El presente manual tiene por finalidad establecer las guías gráficas generales en los estilos cromáticos, tipográficos, visuales, para el sitio web público de ACHS. Este manual, de información gráfica general, está dirigido a diseñadores y desarrolladores a cargo de la administración e implementación del sitio web. Para la aplicación de los elementos descritos en este manual, se debe seguir las siguientes reglas: Todos los elementos gráficos presentados en este manual deben ser aplicados sin modificación alguna. Cualquier modificación, debe seguir las reglas de aplicación de cada elemento. Cada vez que se realice una aplicación o modificación en el sitio web, se debe consultar este manual y los archivos originales adjuntos para poder asegurar una coherencia gráfica a lo largo del sitio. 3

4 DEFINICIÓN CROMÁTICA 4

5 UTILIZACIÓN CROMÁTICA La gama cromática está basada en los colores principales de la marca y grises complementarios. Colores base #24823A #7FBD26 #DD670F #195A28 Colores complementarios # # En base a estos colores, se define una escala cromática de colores cálidos, fríos y grises complementarios. Ésta escala cromática estará expresada en cajas modulares, botones, tipografías, links, iconografía, entre otros. #EBEDEC #E3E6E4 Para poder resolver combinaciones de colores: 5

6 UTILIZACIÓN CROMÁTICA UTILIZACIÓN DE COLORES #195A28 #7FBD26 #DD670F #24823A # # #EBEDEC #E3E6E4 Marca, botones de acción e iconografía Botones de acción y líneas de títulos Botón acceso área privada Títulos Principales y links Textos Textos secundarios Gráficas de apoyo Líneas separadoras Para poder resolver combinaciones de colores: 6

7 DEFINICIÓN TIPOGRÁFICA 7

8 DEFINICIÓN TIPOGRÁFICA TIPOGRAFÍA DE SISTEMA Se ha establecido Arial como única fuente sin serif para todos los llamados, títulos, subtítulos, listas y textos generales de los sitios web. Esta tipografía podrá ser usada en las siguientes expresiones: Normal. Bold. Cursiva. Alta. Arial Aa Ee Rr Aa Ee Rr a Se ha escogido la tipografía Arial por ser una fuente que privilegia la simpleza de la lectura para el tipo de usuario del sitio web, que buscará una lectura rápida y directa de la información. Otras de sus características, es que presenta mucha versatilidad y buen espaciado entre letras (hinting) que la hace más apta para ser leída en pantalla a distintas resoluciones. abcdefghijklmnñopqrstuvwxyz Por otra pae esta tipografía está diseñada para sopoe digital disponible nativamente en sistemas operativos como Windows y Mac OS X. Para más información sobre la tipografía Arial: 8

9 DEFINICIÓN TIPOGRÁFICA TIPOGRAFÍA ESPECIAL Se ha establecido DIN como familia tipográfica para la utilización en títulos y destacados. DIN añade líneas sutiles, modernas y estilizadas a la interfaz. Como DIN es una tipografía que no se encuentra nativamente en los computadores, se utilizará la para desplegarla en pantalla, manteniendo la propiedad editable. Dentro de la familia tipográfica DIN se utilizarán las siguientes variantes: DIN Regular DIN Medium DIN Black a abcdefghijklmnñopqrstuvwxyz DIN Aa Ee Rr Aa Ee Rr Para más información sobre la tipografía DIN: 9

10 DEFINICIÓN FORMAL 10

11 DEFINICIÓN FORMAL LAYOUT 11

12 DEFINICIÓN FORMAL LAYOUT HOME Layout home lo conforman 4 grandes sectores: Encabezado, Contenido principal y Pie de página. 940px 130px Encabezado Encabezado: Contiene la marca de ACHS, Navegación Principal, Acceso Área Privada, Links a otros sitios de ACHS, Información de contacto, Buscador e índice UV. Campaña: En esta área se despliega la(s) campaña(s) actuales de ACHS. Está compuesta principalmente de una gran imagen, título, bajada y llamado a la acción. 447px Campaña Contenido central: Está dividido en 2 secciones principales. En la primera se despliega el último video de campaña, los 3 últimos de ACHSTV/ICARE y la agenda con los próximos eventos. En la segunda sección se despliega la tasa de accidentes por rubro. Contenido lateral: Contiene campañas, accesos directos y redes sociales. Altura variable Contenido central Contenido lateral Pie de página: Contiene menú auxiliar, información de contacto y una zona con información contextual, que en este caso es de Actualidad y Noticias. 578px Pie de página 653px 208px 12

13 DEFINICIÓN FORMAL LAYOUT PÁGINAS INTERIORES Layout home lo conforman 4 grandes sectores: Encabezado, Contenido principal y Pie de página. 940px Encabezado: Contiene la marca de ACHS, Navegación Principal, Acceso Área 130px Encabezado Privada, Links a otros sitios de ACHS, Información de contacto, Buscador e índice UV. Contenido central: En esta área se despliegan los contenidos más impoantes de cada sección. Contenido lateral: Se despliegan contenidos secundarios contextuales. Altura variable Contenido central Contenido lateral Pie de página: Contiene menú auxiliar, información de contacto y una zona con información contextual, que en este caso es de Actualidad y Noticias. 578px Pie de página 653px 208px 13

14 DEFINICIÓN FORMAL MEDIDAS 14

15 ACHS, SITIO WEB PÚBLICO. DEFINICIÓN FORMAL MEDIDAS HOME 25px 105px 450px 30px 30px 20px 250px 20px 100px 30px 30px 30px 50px 50px 92px 20px 80px 80px 20px 20px 15

16 DEFINICIÓN FORMAL MEDIDAS PÁGINAS INTERIORES 25px 105px 30px 20px 40px 20px 30px 30px 20px 50px 50px 92px 20px 80px 80px 20px 20px 20px 20px 16

17 DEFINICIÓN FORMAL IMAGEN CAMPAÑA 17

18 DEFINICIÓN FORMAL IMAGEN CAMPAÑA La imagen de campaña desplegada en la home, estará optimizada para resoluciones de hasta 1280px de ancho. Con esto, aseguramos una óptima visualización de las imágenes para la mayoría de los computadores. A pair de dicha resolución, la imagen se degradará a gris #2E332F para así generar una imagen de poco peso y rápida descarga. Degradado lineal a #2E332F Area visible de 1280px Degradado lineal a #2E332F 18

19 DEFINICIÓN FORMAL TEXTOS 19

20 DEFINICIÓN FORMAL TEXTOS Tipografía: DIN Medium Tamaño: 13 pixeles Color: # Uso: Navegación principal Tipografía: Arial Regular/Bold Tamaño: 11 pixeles Color: #777F79 Uso: Menú auxiliar Cabecera Tipografía: Arial Regular/Bold Tamaño: 12 Color: # Uso: Información de contacto Cabecera Tipografía: Arial Regular Tamaño: 11 pixeles Color: # Uso: Buscador e índice UV Tipografía: DIN Black Tamaño: 32 pixeles Color: #FFFFFF Uso: Título Campaña Home 20

21 DEFINICIÓN FORMAL TEXTOS Tipografía: DIN Regular Tamaño: 22 pixeles Color: #FFFFFF Uso: Bajada Campaña Home Tipografía: Arial Bold Tamaño: 13 pixeles Color: # Uso: Títulos áreas home Tipografía: DIN Medium Tamaño: 18 pixeles Color: # Uso: Títulos contenido principal home Tipografía: DIN Regular Tamaño: 18 pixeles Color: #24823A Uso: Títulos especiales y sidebar Tipografía: Arial Regular/Bold Tamaño: 12 pixeles Color: # Uso: Texto genérico 21

22 DEFINICIÓN FORMAL TEXTOS Tipografía: Arial Regular/Bold Tamaño: 12 pixeles Color: #247F39 Uso: Links Tipografía: DIN Regular Tamaño: 18 pixeles Color: # Uso: Título Pie de Página Tipografía: DIN Black/Regular Tamaño: 26 pixeles Color: #247F39 Uso: Títulos especiales Páginas Interiores 22

23 DEFINICIÓN FORMAL CONTENEDORES 23

24 DEFINICIÓN FORMAL CONTENEDORES Módulo Eventos Color sólido: #FF8C00 20px 20px 20px 20px Arial 12px #

25 DEFINICIÓN FORMAL CONTENEDORES Módulo contenido campañas Color sólido al 70%: #2E332F 30px 30px 30px Arial Regular 12px #FFFFFF DIN Regular 22px #FFFFFF DIN Black 32px #FFFFFF 25

26 DEFINICIÓN FORMAL CONTENEDORES Campañas sidebar Color sólido al 70%: #2E332F 10px 10px 10px Arial 12px #FFFFFF 26

27 DEFINICIÓN FORMAL CONTENEDORES Presentaciones Color sólido: #EBEDEC Arial Bold 10px #FFFFFF Arial Bold 12px #FFFFFF Arial 12px # DIN Regular 32px # Arial Bold 12px #

28 DEFINICIÓN FORMAL ELEMENTOS GRÁFICOS 28

29 ELEMENTOS GRÁFICOS ICONOGRAFÍA 29

30 DEFINICIÓN FORMAL ELEMENTOS GRÁFICOS / ICONOGRAFÍA Iconografía genérica Color degradado: #7FBD26 #24823A 100px 100px 30

31 ELEMENTOS GRÁFICOS BOTONES 31

32 DEFINICIÓN FORMAL ELEMENTOS GRÁFICOS / BOTONES Botones de acción y formularios Borde: Ninguno Esquinas: Rectas Texto: Arial Bold 12px #FFFFFF #7FBD26 #24823A 31px 10px 10px Acceso Área Privada Borde: Ninguno Esquinas: Rectas Texto: Arial Bold 12px #FFFFFF #D4DD0F #DD670F 31px 10px 10px Navegación campañas Home 11px Borde: Ninguno Esquinas: Rectas Texto: Arial Regular/Bold 12px #FFFFFF #2E332F al 70% 40px 11px 32

33 DEFINICIÓN FORMAL ELEMENTOS GRÁFICOS / BOTONES Navegación galerías Páginas Interiores Borde: Ninguno Esquinas: Rectas Texto: Arial Regular/Bold 10px #FFFFFF #2E332F al 70% 20px 33

34 34