snowboard skate surf
LIBRO DE ESTILOS WEB
snowboard skate surf
libro de estilos ESTRUCTURA DE LA WEB
CATÁLOGO BLOG TEAM MEDIA
CATÁLOGO BLOG TEAM MEDIA
CATÁLOGO BLOG TEAM MEDIA
“botón de inicio ilustrado y animado”
_ La web se divide en tres partes:
1. Surf
2. Skate
3. Snow
_ Cada página lleva un mismo sistema de navegación pero el contenido es diferente, adaptándose al deporte que se elija en un principio. elow
04
_ Todas las páginas (deportes) están unidos mediante unos iconos que harán cambiar de deporte rápidamente, situado en la parte superior derecha. _ El footer está presente en todas las páginas, y contiene el vínculo a ElowShop, Tablas Mag, y ArtElow además de iconos a redes sociales.
“En el footer también se incluye un menú de navegación de link de texto e iconos a redes sociales.”
libro de estilos NIVELES DE JERARQUIZACIÓN
1 2 3
SKATE
CATÁLOGO
HOMBRE
SURF
SNOW
BLOG
MUJER
TEAM
WORDPRESS
MEDIA
VIDEO Nivel 1 Nivel 2 Nivel 3
_ Catálogo
Vamos intentar que los niveles de jerarquización sean los mínimos posibles para que el usuario encuentre pronto lo que busca. Para ello, vamos a utilizar en la mayor parte de las páginas el Script jQuery para que todo el contenido cargue en la misma página sin tener que esperar la carga de otra. El máximo será de tres niveles. Las secciones que los contienen son:
- Hombre (Otra página)
- Mujer (Otra página)
_ Blog (Blog en WordPress) _ Media
- Fotografía: Visualizar fotos en me diante una galería en jQuery (en la misma página).
- Vídeo: Enlaces externos a webs de vídeo como Youtube, Vimeo, etc.. ( en otra página).
La sección “Team” tiene dos niveles. Es una sección fotográfica del equipo, por lo que las fotografías cargarán en la misma pá
05
elow
libro de estilos PUNTOS FUERTES 1. DISTINGUIR CLARAMENTE CADA SECCIÓN
(al inicio de la web nos dará a elegir claramente el deporte adecuado a cada público objetivo que visite la web)
2. COHERENCIA ENTRE LAS 3 SECCIONES PRINCIPALES skate - surf - snow, utilizando los colores corporativos y detalles en colores que ya se especificarán más adelante.
3. VENTA ON-LINE
con la venta on-line fidelizaremos más clientes al darle la facilidad de comprar desde sus casas
4. RÁPIDA NAVEGACIÓN
sin más de 3 clicks para que el cliente encuentre lo que busca
5. PROMOCIONES
con ello, nos ganaremos la confianza del público objetivo
6. ENLACE A PÁGINAS EXTERNAS Y REDES SOCIALES
páginas que pertenecen a la empresa Elow y redes sociales donde nos daremos a conocer más rápidante pudiendo aumentar así las ventas y fidelizando a clientes
elow
06
libro de estilos DISTRIBUCIÓN DE ESPACIOS tipología de la web 1. WEB DE ANCHO FIJO
de 950px de ancho máximo
2. ALTURA MÁXIMA 1030px
para evitar tener un scroll demasiado grande
3. BODY CENTRADO EN PANTALLA la web siempre irá centrada
4. RETÍCULAS IGUALES PARA CADA SECCIÓN
podemos distinguir las tres seciones más importantes, skatesurf-snow, cada sección de cada una de ellas tendrá la misma retícula en una y otras
07
elow
libro de estilos DISTRIBUCIÓN DE ESPACIOS retículas y módulos
10 px
70 px
1024 px
_ Retícula
950 px de ancho
1050 px de alto
12 columnas de 70 px cada una
Medianil de 10 px
950 px
_ Columnas
1 columna (950px)
2 columnas (470px)
3 columnas (310px)
4 columnas (230px)
6 columnas (150px)
* Medidas calculadas respetando el medianil.
_ Módulos
elow
08
Adaptados según contenido, pero siempre respetando un medianil de 10px entre cajas.
3 columnas
310px
2 columnas
4 columnas
470p x
230px
1 columna
950px
6 columnas
150px
libro de estilos DISTRIBUCIÓN DE ESPACIOS HOME bocetos gui
340 px 1024 px
LOGOTIPO
_ Primero nos encontramos con la página de bienvenida o home. En ella tenemos directamente la posibilidad de elegir el deporte del cuál estamos interesados, para que así al cliente no se pierda buscando algo en concreto del deporte que le gusta. _ Ésta página no contiene footer, puesto que... ¿A qué página lo vincularíamos sin saber que deporte es que el quiere elegir el cliente?
“Se colocarán tres imágenes, cada una hace referencia a su respectivo deporte.”
09
elow
libro de estilos DISTRIBUCIÓN DE ESPACIOS bocetos gui INDEX
950 px 1024 px
Esta es la página “index.html” la cuál será utilizada para las tres secciones en la que se divide la web.
Menú en flash
Galería de imágenes en jQuery
Noticias/Novedades/Promociones
Media/Catálogo
Footer/Link a páginas externas
elow
10
libro de estilos DISTRIBUCIÓN DE ESPACIOS 950 px
CATÁLOGO bocetos gui
1024 px
Menú en flash
Boceto de la p ágina “catalogo.html” que será utilizada en las tres diferentes secciones de la web.
Carga de imágenes de galería jQuery
Galería de imágenes jQuery
Footer/Link a páginas externas
11
elow
libro de estilos DISTRIBUCIÓN DE ESPACIOS bocetos gui BLOG
950 px 1024 px
Esta es la página “blog.html”. Para todas las secciones. Menú en flash
Construcción tipográfica
Información sobre el blog y el link a otra web para leer su contenido
Footer/Link a páginas externas
elow
12
libro de estilos DISTRIBUCIÓN DE ESPACIOS TEAM bocetos gui
950 px 1024 px
Esta es la página “team.html”. Para todas las secciones. Menú en flash
El funcionamiento es sencillo: 1. Elegir el miembro del equipo.
2. Nos carga una foto del miembro en el espacio reservado para carga de imáDiferetes miembros del equipo genes de jQuery.
1
3. En la parte de abajo de la columna de miembros del equipo y de la de carga de imagenes de jQuery servirá para cambiar de imagen.
Carga de imágenes de galería jQuery
2
Para cambiar de fotografía
3
Footer/Link a páginas externas
13
elow
libro de estilos DISTRIBUCIÓN DE ESPACIOS bocetos gui MEDIA
950 px 1024 px
Esta es la página “media.html”. Para todas las secciones. Se compone de una galería en la que Menú en flash se irán cambiando las imágenes y además podrás ir pasándolas tu hacia delante o hacia atrás las fotografías por si quieres buscar alguna en especial. Debajo encontramos una galería con dos vídeos los cuales también podrás pasar para ver otros diferentes. Galería de imágenes jQuery
Galería de vídeo
Footer/Link a páginas externas
elow
14
libro de estilos SISTEMA DE NAVEGACIÓN 1. MENÚ PRINCIPAL
en él podremos elegir el deporte favorito
2. TOP MENÚ
con él nos podremos mover por cada sección de la web. Son tres menús diferentes adaptados a cada deporte pero con las mismas funciones.
3. FOOTER
encontramos link a todas las secciones además de a páginas externas.
15
elow
libro de estilos SISTEMA DE NAVEGACIÓN menú principal Este es el primer menú que saldrá cuando entremos a la web. Como podemos ver se divide en tres secciones
Menú principal en reposo
Menú principal con el ratón encima. Se irán coloreando las imágenes según vayas colocando el ratón encima
elow
16
950 px 1024 px
libro de estilos SISTEMA DE NAVEGACIÓN SKATE top menú Podemos encontrar tres menús diferentes para cada uno de los deportes. Logotipo de la marca
Ilustración para decorar y diferenciarse de otras empresas
Podremos cambiar de deporte rápidamente con sólo pulsar la silueta de cada personaje. snowboard skate surf
CATALOGO
El skate tendrá la función de inicio, pero no a la pantalla anterior, sino a la pantalla de inicio del deporte elegido, en este caso snow.
BLOG
TEAM
MEDIA
Botones por los que nos podemos mover por cada sección.
17
elow
libro de estilos SISTEMA DE NAVEGACIÓN top menú SURF Este es el primer menú que saldrá cuando entremos a la web. Como podemos ver se divide en tres secciones Logotipo de la marca Ilustración para decorar y diferenciarse de otras empresas Podemos cambiar de deporte rápidamente con sólo pulsar la silueta de cada personaje.
snowboard skate surf
CATALOGO
La furgoneta tendrá la función de inicio, pero no a la pantalla anterior, sino a la pantalla de inicio del deporte elegido, en este caso snow.
elow
18
BLOG
TEAM
MEDIA
Botones por los que nos podemos mover por cada sección.
libro de estilos SISTEMA DE NAVEGACIÓN SNOW top menú Podemos encontrar tres menús diferentes para cada uno de los deportes. Logotipo de la marca
Ilustración para decorar y diferenciarse de otras empresas
Podremos cambiar de deporte rápidamente con sólo pulsar la silueta de cada personaje.
snowboard skate surf
CATALOGO
La casa tendrá la función de inicio, pero no a la pantalla anterior, sino a la pantalla de inicio del deporte elegido, en este caso snow.
BLOG
TEAM
MEDIA
Botones por los que nos podemos mover por cada sección.
19
elow
libro de estilos SISTEMA DE NAVEGACIÓN footer El footer de 950px de ancho y 150px de alto contiene los link a todas las secciones de esa misma web (dependiendo en el deporte que nos encontremos) además de enlaces a webs externas.
Catálogo | Blog | Team | Media | Contacto
Link a la tienda Link a web Tablas Redes sociales Link a ArtElow
Footer con link a todas las secciones y contacto Única forma de llegar al contacto en footer
Al colocar el ratón encima de los iconos de las redes cambiarán de color
elow
20
Link a sierranevada.es
libro de estilos INTERACCIÓN Cantidad de veces que hay que pulsar el botón del ratón para llegar a todo el contenido
1
SKATE
2
CATÁLOGO
3
HOMBRE
1
primer click que te vincula al index del deporte que elijas
2
segundo click al elegir una sección
SURF
BLOG
MUJER
SNOW
TEAM
WORDPRESS
4
MEDIA
VIDEO
cuarto click ara elegir algún contenido dentro de una sección, como puede ser una fotografía, vídeo, camiseta, etc...
1er click 2º click 3er click
3
tercer click para subsecciones
21
elow
libro de estilos INTERACCIÓN En el footer también hay links a otras partes de la web además de webs externas.
Catálogo | Blog | Team | Media | Contacto
2
en dos click podemos estár dentro del blog tiene la misma función que el top menú
elow
22
2
en dos click podemos estar en las webs externas
libro de estilos USO DEL COLOR _ Fotografía de fondo dependiendo del deporte. RGB: 0 0 0 HEX: #000000
_ Diseño limpio y sencillo. _ Colores corporativos para botones u otros gráficos utilizados en la web. _ Fotografías a todo color y en blanco y negro. _ Además de los colores corporativos:
RGB: 0 155 215 HEX: #009BD7
RGB: 91 49 140 HEX: #5B318C
vamos a utilizar también para elementos gráficos o texto:
RGB: 246 168 0 HEX: #F6A800
23
elow
libro de estilos USOS TIPOGRÁFICOS Para texto base se utilizará la “Trebuchet MS” a 16px. Para botones en menú y titulares se utilizará “Bebas”. En ocasiones algunas secciones utilizarán un lettering en vez de una tipografía.
Trebuchet MS Texto base Pié de foto Footer
abcdefghijklmnñopqrstuvwxyz ABCDEFGHIJKLMNÑOPQRSTUVWXYZ 123456789
Botones Titulares
bebas abcdefghijklmnñopqrstuvwxyz ABCDEFGHIJKLMNÑOPQRSTUVWXYZ 1234567890 ?!-_.,/()&
Botones Titulares
Lobster 1.4 abcdefghijklmnñopqrstuvwxyz ABCDEFGHIJKLMNÑOPQRSTUVWXYZ 123456789
elow
24
libro de estilos RECURSOS GRÁFICOS Para texto base se utilizará la “Trebuchet MS” a 16px. Para botones en menú y titulares se utilizará “Bebas”. Estos pictogramas nos ayudan a movernos rápidamente de un deporte a otra sin tener que volver al Inicio
En ocasiones algunas secciones utilizarán un lettering en vez de una tipografía.
En cada menú hay una ilustración que si la pulsamos nos lleva a la primera página de carga después de haber elegido un deporte.
25
elow
libro de estilos RECURSOS GRÁFICOS
En cada menú hay una ilustración que si la pulsamos nos lleva a la primera página de carga después de haber elegido un deporte.
En cada menú hay una ilustración que si la pulsamos nos lleva a la primera página de carga después de haber elegido un deporte.
elow
26
Jesús Vázquez Luque vazquezdesigner@gmail.com 2º B Diseño Gráfico y Producción Multimedia EscuelaArteGranada
snowboard skate surf