Manual de Identidad visual Intranet R. Índice 1. Estructura interactiva 1.1. Niveles de interacción 1.2. Navegación

Transcripción

1 Manual de Identidad visual Intranet Índice 1. Estructura interactiva 1.1. Niveles de interacción 1.2. Navegación 2. Diseño gráfico. Elementos básicos 2.1. Colores y tipografías y propiedades de página 2.2. Interfaces a) Interfaces tipográficas b) Interfaces gráficas 3. Diseño gráfico. Especificacies detalladas 3.1. Nivel 1 a) Diagramación b) Tipografías c) Interfaces 3.2. Nivel 2 a) Diagramación b) Tipografías c) Interfaces 3.3. Nivel 3 a) Diagramación b) Tipografías c) Interfaces 4. Herramientas de desarrollo

2 Manual de Identidad visual Intranet 1. Estructura interactiva Niveles de interacción Portada-Nivel 1 Menú principal con dos áreas de opciones diferenciadas: las rojas son opciones funcionales que conducen a páginas de nivel 2c. Las zonas verde, azul, etc., despliegan las opciones de los cuatro epígrafes principales de contenidos, y llevan a los niveles 2a y 2b. Nivel 2a Nivel 3a Menú intermedio simple. Nivel 2b Página de contenidos. Nivel 3B Menú intermedio cuyas opciones se dividen a su vez en diferentes epígrafes que aparecen en menús desplegables. Nivel 2c Página de contenidos con un menú en el área izquierda desde el que se accede a las opciones relacionadas (las que se despliegan en cada opción en el menú anterior Página de contenidos a la que se accede directamente desde el nivel 1. Es el caso de las opciones funcionales como el Tablón de Anunicios y de otras cuyos contenidos no se dividen en diferentes epígrafes, como Accionariado, etc.

3 Manual de Identidad visual Intranet 1. Estructura interactiva. 1.2 Navegación Portada-Nivel 1 Acceso al nivel 2 Vuelta a la portadanivel 1 Acceso a las opciones funcionales Nivel 2a Menú de acceso al nivel 3a Vuelta al menú nivel 2a Nivel 3a

4 Nivel 3b Manual de Identidad visual Intranet 1. Estructura interactiva Navegación Portada-Nivel 1 Acceso al nivel 2 Vuelta a la portadanivel 1 Acceso a las opciones funcionales Nivel 2b Menú de acceso al nivel 3b Vuelta al menú nivel 2a Menú con las opciones desplegadas en el nivel 2b. Siepre presente, muestra los contenidos en el área derecha de la página

5 Manual de Identidad visual Intranet 1. Estructura interactiva Navegación Portada-Nivel 1 Acceso al nivel 2 Vuelta a la portadanivel 1 Acceso a las opciones funcionales. Nivel 2c

6 Manual de Identidad visual Intranet 2. Diseño gráfico 2.1. Colores y tipografías Colores Argumentarios Información GB: 252, 160, 0 GB: 0, 153, 51 Procedimientos GB: 0, 153, 255 Políticas GB: 204, 102, 255 GB: 255, 220, 185 GB: 194, 231, 216 GB: 192, 232, 254 GB: 223, 255, 255 Varios GB: 204,0,0 GB: 254, 193, 193 GB: 113, 113, 113 GB: 213, 213, 2130 Tipografías Las tipografías utilizadas son: - Gerstner egular - Gerstner Bold. Propiedades de páginas HTML Las propiedades básicas de las páginas html son: -El olor de fondo es blanco. -El color de los hiperenlaces en todas las posiciones (incial, visitado y activo) es siempre rojo (GB 204, 0, 0).

7 Manual de Identidad visual Intranet 2. Diseño gráfico 2.2. Interfaces Las opciones seleccionables, tanto gráficas como tipográficas, tienen una estructura común: presentan tres fases gráficas diferentes en cuanto a forma, color y tamaño que corresponden a los tres estadios que pueden presentar: en reposo, cuando se pasa el ratón sobre ellas y cuando se seleccionan. En los menús tipográficos de la portada, con el propósito de simplificar la lectura de un menú con un gran número de opciones, sólo presentan dos fases que corresponden al estado inactivo y al cambio de color al pasar por encima con el ratón. a) Interfaces tipográficas Posición 1 Posición 2 Posición 3 a) Interfaces gráficas Posición 1 Posición 2 Posición 3

8 Manual de Identidad visual Intranet 3. Diseño gráfico. Especificaciones detalladas Nivel 1 Nivel 1 Iconos de acceso a las áreas funcionales. Tamaño máximo: 60x60 px. animada Tamaño: 67x67 px. Secciones TIpografía: Gerstner Bold, 12 pt. del área TIpografía: Gerstner Bold, 16 pt.

9 Manual de Identidad visual Intranet Diagramación y tipografías 3. Diseño gráfico. Especificaciones detalladas Nivel 2a animada. cuadrado 55x55 pixels del área de contenidos Tipografía: Gerstner Bold, 16pt. Color del área, versión clara de la sección Tipografía: Gerstner Bold, 16pt. Color blanco Filete de título Alto: 16 px. Color del área Iconos de acceso a las áreas funcionales. Tamaño máximo: 50x50 px. Filete de título ancho: 14 pixels alto: toda la página color: el de la sección Tipografía: Gerstner Bold, 16pt. Menú tipográfico. Tipografía Gerstner Bold. Tamaño variable en función del número de opciones para que ocupe toda la pantalla

10 Manual de Identidad visual Intranet Diagramación y tipografías 3. Diseño gráfico. Especificaciones detalladas Nivel 3a -Interfaz tipográfica de acceso al nivel anterior. Contenidos : Gerstner Bold, 14 pts. Color del área Cuerpo de texto: Gerstner egular, 12 pts. Color negro Alineación izuierda Margen izquierdo de la página: 40 pixels. Margen superior: 0 pixels Detalle de la interfaz tipográfica de acceso al nivel anterior activada Tipografía Gerstner Bold, 16 pt. Expandida verticalmente un 30%. Color rojo.

11 Manual de Identidad visual Intranet Diagramación y tipografías 3. Diseño gráfico. Especificaciones detalladas 3.1. Nivel 3b Página de contenidos. Márgenes vertical y horizontal de la página: 0 pixels. Menú tipográfico. Tamaño: 150 px. Color de fondo: color del área en versión claro. Las tablas combinarán los dos colores de cada área con el blanco, el negro y el gris en una forma que faciliten la lectura de los datos. El ancho de las tablas es de un 90% Detalle de la interfaz tipográfica de acceso al nivel anterior activada Tipografía Gerstner Bold, 16 pt. Expandida verticalmente un 30% y en color rojo Menú tipográfico. Nivel 1: TIpografía Gerstner Bold, 14 pt. Nivel 2: TIpografía Gerstner Bold, 12 pt. Opción activada: El mismo cuerpo de letra expandida verticalmente un 30% y en color rojo.

12 Manual de Identidad visual Intranet 3. Diseño gráfico. Especificaciones detalladas 4. Herramientas de desarrollo Las interfaces generales del sistema se desarrollarán con Macromedia Flash. La edición de páginas HTML con Microsoft Front Page. El tratamiento de imágenes con Adobe Photoshop