LIBRO DE ESTILOS

PROYECTO WEB
Esquema del proyecto gráfico del website
Estructura de la información (arquitectura): Organización.

Qué tiene que contener cada nivel de la estructura.

NIVEL 1: Comprendido dentro del home. Resúmen de contenidos de todo el sitio web, desde el primer nivel, se accede al segundo.
Ejemplo: acceso a la tienda, a la galería de artistas, a la zona de noticias, al blog, enlace a la web de la revista...

NIVEL 2: Se accede mediante el menú principal. Contenidos un poco más específicos, en él, se accede a las categorías del tercer nivel,
desglosándolas. Ejemplo: Galería de artistas: lista de nuestros artistas.

NIVEL 3: Acceso a tarvés del subemenú. Contenidos más concretos. Ejemplo: Acceso a un artista concreto, pudiendo acceder
directamente a sus obras, a su currículum, a sus exposiciones...

NIVEL 4: Enlaces externos, de menor importancia, pero con relación a la empresa. Ejemplo: Enlace a la web de Papel de Estraza.

CONTENIDOS (Etiquetado y Organización)

NIVEL 1: Home (menú principal con acceso a información de la empresa, galería de artistas, tienda motivarte, noticias, agenda
(exposiciones y talleres), cómo asociarse, contacto, blog...; noticias destacadas sobre motivarte y la publicación en papel, artista
motivarte que expone, artistas consagrados que colaboran con la asociación, breve agenda de exposiciones y talleres.

NIVEL 2: Submenú: desglose de las categorías del menú principal, enlaza a las secciones específicas que el usuario desee visitar.
Ejemplo: Galería de artistas: una lista de todos ellos con una breve descripción, actúa de enlace al nivel 3, simplificando la información.

NIVEL 3: Contenido concreto. Ejemplo: leer una noticia completa sobre la última exposición realizada por motivarte, incluyendo una
galería de imágenes del acto.

Objetivos comunicativos

El objetivo es conseguir que el usuario consiga llegar rapida y facilmente a los contenidos que le interesen, que tenga una experiencia
satisfactoria sin encontrarse enlaces que lleven a ningún sitio, conseguir una estructura limpia y organizada, con un diseño simple, sin
elemento que estorben y entorpezcan la usabilidad.
Aspectos competitivos:
Punto fuerte de la página.

La página es un escaparate de la empresa, por lo que, aprovechando esa cualidad, está

estructurada por temáticas y contenidos similares entre sí, lo que hace más simple el diseño de la
misma, por lo que el usuario no se pierde al entrar, los contenidos apareciendo y desarrollándose a
lo largo de la navegación, según sus necesidades y lo que vaya buscando, con una ayuda en cada
página, enlaces directos a otras secciones, todo organizado utilizando los colores corporativos, lo
que también ayudará a la orientación dentro del sitio al usuario, y guías que comuniquen al usuario
donde se encuentra en cada momento.
Distribución de espacios

Tipo de web

La web de Motivarte tiene un diseño en ancho fijo, a 960 px de ancho, lo que facilitará que en
dispositivos de gran tamaño no se corra el riesgo de que los elementos se distribuyan a su antojo.

Con scroll lateral de corto recorrido, facilitando el desarrollo de los contenidos, ahorrando así la
distribución del mismo en varias páginas (lo que dificulta más la navegación, condiciona al diseño
creando una página recargada...), falicita la tarea de creación de la web...

Retículas y módulos

La página se divide en módulos de 160 px por 160 px (horizontales y verticales), lo que serían
6 módulos horizontales mínimo, pero esta modulación ofrece la posibilidad de fusionar módulos
creando dos, tres y cuatro columnas, dependiendo del contenido a desarrollar en cada página.

La retícula es de tres columnas, cada una de 320 px, divisibles cada una a su vez en otras 2, de 160
px cada una.
NIVEL 1:
1 columna de 6 módulos y 1 fila de 1 módulo.
1 columna de 6 módulos y 2 filas de 2 módulos.
3 columnas de 2 módulos y 3 filas de 3 módulos.
1 columna de 6 módulos y 1 fila de 1 módulo.
NIVEL 2:
1 columna de 6 módulos y 1 fila de 1 módulo.
1 columna de 6 módulos y 1 fila de 1 módulo.
3 columnas de 2 módulos y 2 filas de 2 módulos.
3 columnas de 2 módulos y 2 filas de 2 módulos.
1 columna de 6 módulos y 1 fila de 1 módulo.
NIVEL 3:
1 columna de 6 módulos y 1 fila de 1 módulo.
1 columna de 6 módulos y 1 fila de 1 módulo.
3 columnas de 2 módulos y 3 filas de 3 módulos.
3 columnas de 2 módulos y 1 fila de 1 módulo.
1 columna de 6 módulos y 1 fila de 1 módulo.
Sistema de Navegación

Menús y submenús (jerarquías)

MENÚ PRINCIPAL
/ HOME / QUIÉNES SOMOS / GALERÍA DE ARTISTAS / NOTICIAS / AGENDA / CONTACTO / TIENDA / BLOG
SUBMENÚ
QUIÉNES SOMOS / ARTISTA 1 NOTICIA 1 EXPO
ASÓCIATE ARTISTA 2 NOTICIA 2 TALLER
ARTISTA 3 NOTICIA 3
ARTISTA 4 NOTICIA 4

FOOTER
ENLACE A REDES SOCIALES, AVISO LEGAL, CONTACTO, SUSCRIPCIÓN NEWSLATTER

Ayudas a la navegación

Aparición del menú principal en todas las páginas del sitio web, chibatos que digan al usuario dónde
se encuentra en cada momento.
Uso del Color.

General.
El tratamiento del color es por contraste, utilizando los colores corporativos de la empresa, dotando
de más identidad al sitio web.

Rojo: Lo más destacado, opciones del menú...

Verde: Títulares menos importantes, etiquetas destacadas...
Negro: fondo del menú principal, destacados, entradilla de noticias, subtítulos...
Gris: enlace del menú en el que se encuentra el usuario, etiquetas destacadas de una noticia,
color del texto base...
Blanco: fondo de la página, opciones del menú de nivel 4 (footer)...

Uso funcional.

Los colores principales serán el rojo y el verde, estarán sobre negro y blanco, en distintas
tonalidades, según sea el punto de la página en el que se encuentre el usuario, uno por el que ya
haya pasado, o esté por pasar; títulos destacados o menos importantes...

También serán utilizados para los elementos gráficos, y con el mismo significado.
Tipografías (Tipos y estilos)
TITULARES.
HELVETICA (mac) / ARIAL (windows)
ENTRADILLAS.
HELVETICA (mac) / ARIAL (windows)
TEXTO BASE.
HELVETICA (mac) / ARIAL (windows)
PIES DE FOTO.
HELVETICA (mac) / ARIAL (windows)
MENÚ.
HELVETICA (mac) / ARIAL (windows)
SUBMENÚ.
HELVETICA (mac) / ARIAL (windows)
TÍTULOS ESPECIALES.
Construcciones tipográficas con distintas
fuentes, rasterizadas.
HELVETICA REGULAR
abcdefghijklmnñopqrstuvwxyz
abcdefghijklmnñopqrstuvwxyz
1234567890
HELVETICA OBLIQUE
abcdefghijklmnñopqrstuvwxyz
abcdefghijklmnñopqrstuvwxyz
1234567890
HELVETICA BOLD
abcdefghijklmnñopqrstuvwxyz
abcdefghijklmnñopqrstuvwxyz
1234567890
HELVETICA BOLD OBLIQUE
abcdefghijklmnñopqrstuvwxyz
abcdefghijklmnñopqrstuvwxyz
1234567890
ARIAL REGULAR
abcdefghijklmnñopqrstuvwxyz
abcdefghijklmnñopqrstuvwxyz
1234567890
ARIAL ITALIC
abcdefghijklmnñopqrstuvwxyz
abcdefghijklmnñopqrstuvwxyz
1234567890
ARIAL BOLD
abcdefghijklmnñopqrstuvwxyz
abcdefghijklmnñopqrstuvwxyz
1234567890
ARIAL BOLD ITALIC
abcdefghijklmnñopqrstuvwxyz
abcdefghijklmnñopqrstuvwxyz
1234567890