Está en la página 1de 16

Diseño de Interfaces Web

ÍNDICE :

1 - INTRODUCCIÓN
2 - MAPA DE NAVEGACIÓN
3 - GUÍA DE ESTILOS:
3.1

- COLORES

3.2

- FUENTES

3.3

- FORMATOS PARA TÍTULOS, SUBTÍTULOS, ENCABEZADOS
Y

CUERPO PRINCIPAL.

3.4

- CABECERA.

3.5

- LOGOTIPO.

3.6

- IMÁGENES.

3.7

- ESTRUCTURA DE LAS PÁGINAS:
3.7.1 - ESTRUCTURA EXTERIOR
3.7.2 – ESTRUCTURA INTERIOR

así como facilitando la creación. normalizar. aportando las estructuras de las páginas principales y secundarias de la web. estandarizar.Diseño de Interfaces Web 1 – INTRODUCCIÓN: El objetivo de éste manual es tipificar. homogeneizar. tamaños de imágenes e iconos. armonizar. así como los diferentes estilos de tipografía. desarrollo y futuro mantenimiento de la web. hecha en Desarrollo de Aplicaciones Web Entorno Servidor. color. unificar y uniformar la estructura de los contenidos de la página web "Senderos de la Vega Baja". . Otorgando una determinada identidad a la página. favoreciendo su utilización y la lectura por parte del usuario.

Todos los colores. por la elección de la imágen de cabecera.COLORES Estos son los colores principales de la web: La elección de los colores ha estado marcada. mediante una herramienta de selección. tanto tipográficos como fondos. .Diseño de Interfaces Web 2 – MAPA DE NAVEGACIÓN: INICIO PRINCIPAL PRESENTACIÓN RUTAS GALERIA MAPAS IMÁGENES VÍDEOS 3 – GUÍA DE ESTILOS: 3. en gran medida. han salido de ella.1 .

FUENTES Para obtener una mayor legibilidad de los tipos tendremos en cuenta tres propiedades de los estilos: Color: Se medirá en valores de la web Hexagesimales. Tamaño: Grosor: Se medirá en valores porcentuales de escala o en px. Serán normal. Varía según la intensidad de lectura de los tipos. dando una grata sensación de armonía y homogeneidad. propios de una puesta de sol de montaña. Proporcionan además buen contraste entre texto y fondo. negrita y cursiva. .2 .Diseño de Interfaces Web Estos son los colores principales de las fuentes: Predominan los azules en tonos oscuros y luego los anaranjados. Están descritos en forma Hexagesimal y RGB. 3. Aunque aquí se muestren también sus valores RGB.

LOREN IPSUM Fuente: Verdana Bold <h1> Tamaño: 34px Letra Capital 22px Resto Color: #DBF04D <h2> Loren Ipsum Fuente: Arial Bold Encabezados Tamaño: 24px Laterales Color: #FFFFFF y Central <h3> Loren Ipsum Fuente: Verdana Bold Texto Tamaño: 18.Diseño de Interfaces Web 3. SUBTÍTULOS.FORMATOS PARA TÍTULOS.5px Enlaces Color: #FFC90E Laterales Loren Ipsum Loren Ipsum Menu Navegación Fuente: Verdana Bold Tamaño: 19px Color: #FB9115 Submenu Navegación Fuente: Verdana Bold Tamaño: 15px Color: #FFC90E Loren Ipsum Fuente: Misma del enlace a:hover Tamaño: Mismo del enlace Color: #529ACD Fuente: Arial Bold . ENCABEZADOS Y CUERPO PRINCIPAL.3 .

. común a todas las páginas de la web.4 .Diseño de Interfaces Web Loren Ipsum Texto Tamaño: 12px Párrafos Color: #529ACD Cuerpo Principal Texto Loren Ipsum Fuente: Arial Comentario Tamaño: 12px Fechas y Formulario Loren Ipsum Color: #FFC90E Texto Fuente: Verdana Italic Pie de Tamaño: 10px Imagenes Color: #FFFFFF Centrales 3. dos de ellos con submenus añadidos. Con cuatro accesos.Una imagen principal temática ocupando todo el ancho de la página. CABECERA PRINCIPAL: El encabezado superior de la web principal se compone de tres elementos: . . abajo a la derecha. .CABECERA.El logo distintivo de una serie de asociaciones senderistas amigas. A continuación viene el menú de navegación.El título de la página. en la parte superior izquierda.

como en el pie de las páginas que forman la web. Las imágenes de la página web estarán optimizadas en formato .LOGOTIPO.6 . Otorga una identidad própia a la web. siendo asi fácilmente distinguible.IMÁGENES. Lo encontraremos tanto en la parte superior. Para el bloque central tenemos imágenes que ocupan todo su ancho.png o jpg.Diseño de Interfaces Web 3. 3. Encontramos 5 tipos de tamaños de imágenes: Imagen de cabecera: 900px X 200px Imagen de miniatura de imagen: 90px X 60px Imagen de bloque central: 580px X 280px Imagen de miniatura de video: 150px X 150px Imagen botonera pie de página: 50-90px X 50px . He optado por prescindir de iconos. El logotipo escogido es una suma de logotipos de las páginas amigas del senderismo. para los accesos al contenido incorporando miniaturas de las imágenes como enlace en el lateral izquierdo.5 .

Diseño de Interfaces Web IMÁGEN DE CABECERA: 900px 200px IMÁGEN DE BLOQUE CENTRAL: 580px 280px .

Diseño de Interfaces Web MINIATURAS DE IMAGENES: 90px 90px 60px 60px MINIATURAS DE VIDEOS: 150px 150px LOGOS: 50px 50px 90px 50px 50px 50px 80px 50px .

Se desarrolla horizontalmente con un tamaño de 900 x 200 px. Sección superior Esta sección contiene la cabecera y el menú de navegación principal.7 – ESTRUCTURA DE LAS PÁGINAS: La estructura web se basa en un modelo vertical formado por cabecera.7. El tipo de fuente elegido es “Verdana Bold”. El cuerpo de la página tendrá un tamaño de 960 px. contenido y pie de página. y siendo más fácil poder actualizar el diseño posteriormente. superior. central e inferior. menú. facilitando así el uso y manejo de los estilos de las diferentes secciones.Diseño de Interfaces Web 3. 3. . la web estará estructurada básicamente con etiquetas <div>. junto al logotipo de la página. si la pantalla donde va a ser mostrada es superior. En cuanto a diseño. Para la navegación por la página web he optado por un menú horizontal formado por 4 botones que enlazan a las diferentes secciones. Para los casos en los que la imagen no pueda ser mostrada. He optado por este modelo debido a su fácil navegabilidad y sencillez a la hora de mostrar el contenido. la cabecera se muestra sobre un fondo de color azul (#529ACD). el resto se mostrará con un color de fondo azul (#529ACD). He tomado la decisión de elegir una única cabecera para todo el sitio web. Se compone de una imagen mostrando a un grupo excursionista en la cima de una montaña al ocaso.1 ESTRUCTURA EXTERIOR La pagina de inicio se divide en tres secciones. El fondo del menú será en color azul oscuro (#142633). con un tamaño de 19px en letra mayúscula y justificación izquierda.

Diseño de Interfaces Web TAMAÑOS: padding 20px padding 30px 900 x 200px 20px 20px20px 24 x 960px 20px 640px 90x60px 150x150px 135px 580px 960 x 55px 185px .

Los laterales mostrarán enlaces a excursiones. se mostraran las imágenes de caminatas y excursiones previstas (580px x 280px) en la parte central. En la estructura exterior. 15% 65% 25% . blogs amigos. así como una breve introducción a modo de saludo. etc. formularios. canal de youtube.Diseño de Interfaces Web 55px Sección central: Esta sección se detallará mas en profundidad en la estructura interior. para la página principal. Cada uno de los artículos estará separado de los otros por líneas como se puede ver en el esquema de abajo.

que componen el logotipo propio de ésta página. Consiste en un menú de navegación con enlaces a otras páginas amigas.7. formado por los logotipos de las páginas. así como un enlace con mi correo electrónico.2 ESTRUCTURA INTERIOR .Diseño de Interfaces Web Sección inferior La sección inferior se compone del pie de página. 3.

Galería: Esta sección se ha estructurado en cuadricula mostrando cuatro miniaturas por fila de los diferentes vídeos/imágenes. ruta o video. Al pulsar en cualquier miniatura se abrirá una página que permitirá visualizar la ruta a tamaño completo.Diseño de Interfaces Web Aquí es donde encontramos el contenido de la web. Además añade una descripción de la última excursión o excursiones previstas. Presentación: En este modelo se reserva el lateral izquierdo para mostrar una foto del usuario y en la parte izquierda el nombre y foto de los ultimos usuarios que han accedido y debajo sus últimos comentarios. Principal: Cuenta con una imágen y un texto (texto-contenido) con una introduccíon breve al contenido de la página. En la parte central vemos las últimas presentaciones y comentarios hechos. Rutas: Esta sección se ha estructurado en cuadricula mostrando cuatro miniaturas por fila de las diferentes rutas. Cuando se acceda a una miniatura se mostrará una página con el título del elemento. una más compleja para la principal y otra más sencilla para el resto. junto a opciones para navegar entre diferentes rutas y volver a la sección principal. Debajo de cada miniatura irá el titulo del elemento. Al pulsar en cualquier miniatura se abrirá una página que permitirá visualizar la imagen o el video a tamaño completo. junto a opciones para navegar entre diferentes imágenes o videos y volver a la sección principal. . la descripción debajo del titulo <h2> y la imágen. La dividiremos en 2 modelos de estructura.

Diseño de Interfaces Web ESTRUCTURA (GALERIA. RUTAS): CABECERA MENU NAVEGACIÓN 150 x 150px TITULO TITULO TITULO TITULO TITULO TITULO TITULO TITULO PIE DE PÁGINA CABECERA MENU NAVEGACIÓN TITULO <H2> .

Diseño de Interfaces Web DESCRIPCIÓN 500 x 100px VIDEO IMÁGEN RUTA 640 x 480px PIE DE PÁGINA TITULO DESCRIPCIÓN .