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 por 480 px de alto, lo
que facilitará que en dispositivos de gran tamaño no se corra el riesgo de que los elementos se
distribuyan a su antojo.

La web se muee de izquierda a derecha con la tecnología Javascript. En el fondo se desarrolla una
ilustración la recorre.

Retículas y módulos

La página se divide en módulos de 144 px (ancho del módulo) por 64 px (alto del módulo) con un
medianil entre cada módulo de 16 px, lo que da 6 módulos horizontales y 6 módulos verticales
mínimo, los cuales se pueden sumar en las diferentes páginas creando retículas de 2 y 3 columnas,
siempre manteniendo 16 px de distancia entre los elementos de la página.
NIVEL 1:

# 1 módulo de ancho y alto para el logotipo / 5 módulos de ancho y 1/2 Módulo de alto para el
menú principal y el buscador.
# 2 módulos de ancho y 4 módulos de alto para la ilustración / 4 módulos de ancho y 3 de alto
para las noticias destacadas.
# 1 módulo de ancho y 1 de alto para el footer.
NIVEL 2:

# 1 módulo de ancho y alto para el logotipo / 5 módulos de ancho y 1/2 Módulo de alto para el
menú principal y el buscador.
# 3 Módulos de ancho y 4 de alto para cada información (talleres, exposiciones y conferencias).
# 1 módulo de ancho y 1 de alto para el footer.
NIVEL 3:

# 1 módulo de ancho y alto para el logotipo / 5 módulos de ancho y 1/2 Módulo de alto para el
menú principal y el buscador.
# 3 Módulos de ancho y 4 de alto para cada información (foto artista, info y galería).
# 1 módulo de ancho y 1 de alto para el footer.
Sistema de Navegación
INICIO MOTIVARTE MOTIVARTE MOTIVARTE MOTIVARTE MOTIVARTE AGENDA ARTISTA ARTISTA ARTISTA ARTISTA ARTISTA ARTISTA TIENDA BLOG CONTACTO

HOME QUIENES... PERFIL INFO/VEN CONDIC FORM TA/EX/CON VARIOS 1 2 3 4 5 TIENDA BLOG DA/SI/FORM

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

MENÚ PRINCIPAL:
Inicio
Motivarte
quiénes somos
asóciate
Perfil Artista Motivarte
Información (ventajas)
Condiciones
Formulario de inscripción
AGENDA
Talleres
Exposiciones
Conferencias
Artistas
galería
Info Artista
Imágenes Obras
 Tienda (prestashop)
Blog (wordpress)
Contacto
datos contacto
situación
formulario envío de datos
FOOTER:
Revista
Redes Sociales
Prensa
Suscripción
Patrocinadores.

Ayudas a la navegación

Aparición del menú principal en todas las páginas del sitio web, chibatos que digan al usua-
rio 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