Manual de Estilo Web Carlos III

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Manual de Estilo Web Carlos III"

Lucía Blanco Giménez
hace 7 años
Vistas:

1 Manual de Estilo Web Carlos III

2 Índice WEB CARLOS III 1. Home - Cabecera y footer - Navegación - Destacado Slide - Módulos y otros enlaces 2. Interior primer nivel (plantilla 1) 3. Interior primer nivel (plantilla 2) 4. Interior galería de imágenes 5. Interior segundo nivel (plantilla 1) 6. Interior segundo nivel (plantilla 2 listado) 7. Fuentes y colores básicos

3 1. Home: Cabecera y footer

4 1. Home: Cabecera y footer

1. Home: Navegación 2 1 3 1. Menú principal Cuerpo: 16pt 2. Enlaces Encabezado Cuerpo: 12pt Cuerpo: 14pt Color: #FFFFFF 3.

5 1. Home: Navegación Menú principal Cuerpo: 16pt 2. Enlaces Encabezado Cuerpo: 12pt Cuerpo: 14pt Color: #FFFFFF 3. Buscador Cuerpo: 12pt Color: #8b8f99 Tipografía bullets: Marcellus Cuerpo: 13pt - Botón: 40px de alto Color: #dee2ed Texto centrado - Rollover: 40px de alto Color: #bfc6d1 4. Enlaces de ineterés Cuerpo: 12pt Color: #590c Footer Tamaño: 960x55px Color: #FFFFFF

6 1. Home: Destacado Slide Destacado Slide Tamaño: 771x330px Margen blanco: 10px por cada lado Tamaño de imagen: 750x312px Caja de texto destacado: Cuerpo del titular: 26pt Cuerpo del texto seguido: 16pt - Marcador del Slide desactivo: color:#d8dce6 - Marcador del Slide activo: color:#b9becd

7 1. Home: Módulos y otros enlaces 1. Módulo con imagen - Titular: Cuerpo: 16pt Color: #590c09 - Texto seguido: - Tamaño de imagen: 136x111px Margen blanco de 5px por cada lado. Módulo básico - Titular: Cuerpo: 14pt Color: #590c09 - Texto seguido: - Link + noticias: Color: #20558A Rollover: #639EC8 2. Módulo especial con imagen - Tamaño de imagen: 344x144px Margen blanco de 5px por cada lado. - Texto: Cuerpo: 18pt - Link Ver más >>: Color: #20558A Rollover: #639EC Otros enlaces - Accesos directos y Eventos (Titular): Color de fondo caja: #f0d9d0 Cuerpo: 14pt Color: #590c09 - Enlaces: Cuerpo: 12pt Color: #20558A Rollover: #639EC8 4. Redes sociales Iconos: Tamaño: 24x24px Espacio entre iconos de 10px 1 4 2

2. Interior: primer nivel (plantilla 1) 1. Titular sección: Cuerpo: 25pt 1 - Breadcrumb: Color: #767677 2.

8 2. Interior: primer nivel (plantilla 1) 1. Titular sección: Cuerpo: 25pt 1 - Breadcrumb: Color: # Módulo información con imagen - Imagen: Tamaño: 134x154px Margen blanco de 5px por cada lado - Texto seguido: Cuerpo: 14pt Módulo contenido con imagen - Tamaño de imagen: 180x100px Margen blanco de 5px por cada lado. - Cabecera titular contenido: Tamaño: 580x30px Color de fondo: #f0d9d0 Cuerpo: 16pt Color: #590e09 - Texto links: Cuerpo: 12pt 4. Módulo contenido 2 con imagen a la derecha - Tamaño de imagen: 144X102px Margen blanco de 5px por cada lado. - Cabecera titular contenido: Tamaño: 580x30px Color de fondo: #b8becc Cuerpo: 16pt Color: # Texto links: Cuerpo: 12pt Color de fondo de la caja: #e5e9ec

3. Interior: primer nivel (plantilla 2) 1. Titular sección: Cuerpo: 26pt 1 - Breadcrumb: Color: #777777 2. Módulo contenido - Texto seguido: Cuerpo: 14pt 2 3.

9 3. Interior: primer nivel (plantilla 2) 1. Titular sección: Cuerpo: 26pt 1 - Breadcrumb: Color: # Módulo contenido - Texto seguido: Cuerpo: 14pt 2 3. Módulo imagen Tamaño: 753x308px Margen blanco de 7px por cada lado Módulo información con imagen - Tamaño de imagen: 147x152px Margen blanco de 5px por cada lado. - Texto seguido: Cuerpo: 14pt

4. Interior: galería de imágenes 1. Menú galería: Altura del menú: 48px Texto centrado con un pixel de separación de color: #5e5e5e Cuerpo: 18pt -Rollover: Cuerpo: 18pt Color: #580d0a 1 2 2.

10 4. Interior: galería de imágenes 1. Menú galería: Altura del menú: 48px Texto centrado con un pixel de separación de color: #5e5e5e Cuerpo: 18pt -Rollover: Cuerpo: 18pt Color: #580d0a Galería de imágenes - Thumbnails: Tamaño: 100x110px Margen blanco de 5px por cada lado y un borde de 1 px de color: #dbdbdb -Rollover thumbnails: Tamaño: 100x110px Margen de 5px por cada lado de color: #dbdbdb

11 4. Interior: galería de imágenes Galería de imágenes - Imagen seleccionada: La imagen aparecerá en un popup y se ajustará la ventana tanto si es vertical como horizontal. - Descriptivo de la imagen: Tipogrfía: Trebuchet MS Cuerpo: 24pt Color: #FFFFFF

5. Interior: segundo nivel 2 1. Módulos de texto: - Titular módulo: Cuerpo: 16pt Color: #590e09 -Texto seguido: Cuerpo: 14pt 1 3 2.

12 5. Interior: segundo nivel 2 1. Módulos de texto: - Titular módulo: Cuerpo: 16pt Color: #590e09 -Texto seguido: Cuerpo: 14pt Enlaces: - Tamaño de icono: 36x36px - Texto enlace: Color: #9a Redes sociales: - Color de fondo de la caja: #ecedf1 - Tamaño de icono: 16x16px - Texto enlace: Cuerpo: 10pt Color: #9a2925

6. Interior: segundo nivel Tabla listado: Ancho: 760px - Titular listado: Bold Cuerpo: 17pt -Texto contenido tabla: Cuerpo: 17pt Color: #5b6668 -

13 6. Interior: segundo nivel Tabla listado: Ancho: 760px - Titular listado: Bold Cuerpo: 17pt -Texto contenido tabla: Cuerpo: 17pt Color: #5b Colores de la tabla: Fondo encabezado: #b8becc Altura: 50px Linea separatoria de 1px Color: #a1a2a4 Celdas de contenido: #FFFFFF #e5e9ec Altura: 44px

14 7. Fuentes y colores básicos Tipografía Menú y titular: Marcellus Tipografía texto seguido y enlaces: Trebuchet MS Colores básicos: # #580d0a #3a3a3a #b8becc #20558A #639EC8

Documentos relacionados

Manual de Estilo Minisites Carlos III

Manual de Estilo Minisites Carlos III Índice MINISITES CARLOS III 1. Cabeceras y footer. Minisite A Home - Navegación - Módulos Fuentes y colores básicos 3. Minisite B Home - Navegación - Módulos Fuentes