Libro Estilos Web

8/6/2019 Libro Estilos Web

1/27

Libro de estilos

PROYECTO WEBChari Nogales 2b


2/27

Arquitectura de la InformacinOrganizacin de la informacin : Segn el punto de vista de la empresa y el pblico objetivoEstructura de la webEtiquetado (Inventario)Objetivos comunicativos

Aspectos competitivos: Punto fuerte de la pgina.

Distribucin de espaciosTipo de web : ventana cerrada, elstica, scroll descendente (o lateral), plano abierto o unainterfaz basada en metforas (objetos y/o escenarios)Retculas y mdulosBocetos GUI

Sistema de NavegacinMens y submens (jerarquas)Navegacin alternativasAyudas a la navegacin

Diseo de la Interaccin.Protocolos y rutinas de acceso a los contenidos.Story Board

Uso del Color.General (clave alta, Clave Baja, Contraste o Armona,)Uso funcional (jerarquas, organizacin, apoyo a la navegacin, etc.)

Tipografas (Tipos y estilos)Recursos Grficos e interactivos.Elementos corporativos.Tratamiento de elementos multimediaMsica y efectos de sonidosPictogramas y metforas visuales


3/27

Arquitectura de la

Informacin


4/27

ARQUITECTURA DE LA INFORMACIN >OrganizacinDespus de la indagacin de obtuvo la conclusin de que paraThings, existan 3 pblicos objetivos diferentes:- El Crafter

- El Artista- El Comprador

Teniendo en cuenta esto, se han agrupado los contenidos en 5 tiposdiferentes:

- THINGS : Qu es? Contacto? Qu hace?- PRODUCTOS THINGS: Cmo son los productos de Things? Dndepuedo comprarlos?

- INFO CRAFT: Te enseamos algunos trucos y tutoriales, te damosnoticias del mundo craft.- ARTISTAS: Esta es la gente que trabaja para nosotros.

En la ilustacin se aprecia la cantidad de inters que muestracada tipo de pblico objetivo con relacin a las clases de conteni-dos.Para una comparacin ms exhaustiva, se realizaron 4 esquemasque muestra la arquitectura de la informacin desde el punto de

vista de la empresa, as como de los tres pblicos objetivos.

Para ello se ha subdivido la informacin en los siguientes bloques,que pueden constituir por s solos secciones principales en la web.Estos esquemas se describen a continuacin:

T H I N G S

PRODUCTOS THINGS

INFO CRAFT

ARTISTAS

Crafter Artista Comprador

SECCIONES:

- Tienda- Catlogo (accesorios ypeluche)- Novedades

- Artistas- Quienes somos?- Contacto- Noticias (Blog)- Tutoriales- Ofertas


5/27

ARQUITECTURA DE LA INFORMACIN >Organizacin

EMPRESA

Tienda

Catlogo

Novedades (Blog)

ArtistasQuienes somos? Contacto

Noticias (Blog) Tutoriales

Ofertas

Nivel 1

Nivel 2

Nivel 3


6/27

(*)

El pblico objetivo que se engloba dentro de Com-prado en realidad podra subdividirse en :

- Compradores que entran en la web sabiendo lo quebuscan- Compradores que buscan un regalo pero no sabenqu exactamente.

Esto repercutir en el esquema anterior, ya que el

primer tipo de comprador tendr en el primer ordenla tienda, las ofertas y las novedades (va directamen-te a comprar eso que vi), en cambio el compradorque no sabe lo que busca quizs tenga como prefe-rencia lo anterior ms el Quienes somos? (se sup-ne que no sabe quin es Things) y el catlogo (paramirar toda la variedad de productos).

COMPRADOR

Tienda CatlogoNovedades (Blog)

ArtistasQuienes somos? Contacto


OfertasNivel 1

Nivel 2

Nivel 3

ARQUITECTURA DE LA INFORMACIN >Organizacin(*)


7/27


ARTISTA

Tienda

Catlogo

Novedades (Blog)

Artistas Quienes somos?Contacto

Noticias (Blog)

TutorialesOfertas

Nivel 1

Nivel 2

Nivel 3


8/27

CRAFTER

Tienda

Catlogo

Novedades (Blog)

Artistas

Quienes somos?

Contacto


Ofertas

Nivel 1

Nivel 2

Nivel 3



9/27

ARQUITECTURA DE LA INFORMACIN > Estructura de la web1. THINGS

Qu es Things?ContactoFAQ

2. ARTISTAS Artistas Things

Quieres trabajar con nosotros?

3. CATLOGO DE PRODUCTOS Accesorios

PeluchesPedidos custom

4. TUTORIALES Proyectos

Mndanos el tuyo

5. BLOG

(En el Blog se incluir las novedadesy las noticias del mundo Craft)

6. TIENDA

Redes SocialesRSSBoletn (Newsletter)Poltica legalFormas de pago y gastos de envo

Estas sern las secciones prin-cipales que tendr la web y sussubsecciones.


10/27

ARQUITECTURA DE LA INFORMACIN >EtiquetadoQu hace falta para llenar la web? Como mnimo:

- Seccin artistas: 3 personas, con muestras de su trabajo (3 fotos)

y alguna direccin y una pequea bio.

- Productos: 3 peluches y 3 accesorios

- Blog: 5 noticias

- Para el pase de fotografa del home: 1 oferta, 1 artistas, un pro-ducto como novedad.

- Tutoriales: 4 tutoriales (a ser posible, dos con 4 fotos y otros doscon vdeo). 3 personas con versiones de algun tutorial. 1 foto decada uno.


11/27

ARQUITECTURA DE LA INFORMACIN > Objetivos comunicativos1. THINGS EN LA WEBSe crea la web con el objetivo de promover la marca a travs de laweb. Por lo tanto, se debe prestar especial atencin a la seccion de

Qu es Things?.

2. VENTA Y PRESENTACION DE ARTISTAS COMO SECCIONESPRINCIPALESSe incluirn banners de ofertas en las partes importantes de la web,as como presentando a los nuevos artistas que se vayan relacio-nando con Things.

3. SEGURIDADUn importante objetivo de la web es mostrar solidez que den se-guridad a nuestros clientes, que pueden hacer sus compras y quequieren tener la seguridad de que el producto es de calidad y elservicio de Thigs tambin.

4. LUGAR REFERENTE PARA CRAFTERSMediante el blog y la seccin de tutoriales se pretender crear unaweb que aporte informacin constante sobre el mundo craft a la

gente que entre en Things y les guste esto.


12/27

ARQUITECTURA DE LA INFORMACIN >Aspectos competitivosLos puntos fuertes de esta web sern:

TE ENSEAMOS A HACER PROYECTOSTutoriales, ya sea en forma de vdeo o paso a paso, que ademspueden ser de los propias personas que entre en la web y quieranaportar su granito de arena. Punto principal de la web, aspecto

competitivo frente al resto de webs que se analizaron en el briefing.

Objetivo principal:

COMPRA NUESTROS PRODUCTOS!Catlogo a la vista, ofertas y por supuesto, la tienda. Compra con lamayor seguridad, para ello:

BUEN DISEO Y TONO AMABLELa web apuesta por el buen diseo, cuidado y que muestre lapersonalidad de la marca: dinmica y alegre

PROMOVEMOS A LOS JVENES ARTISTAS

Punto fuerte de la web. Los jvenes artistas tienen su hueco aqu,pueden mostrar lo que hacen con el apoyo de la marca.

TE MANTENEMOS INFORMADONovedades y noticias en el blog, actualizadas continuamente, quetiene el objetivo de ser un punto de referencia informativo.


13/27

Distribucin de

espacios


14/27

DISTRIBUCIN DE ESPACIOS >Tipo de webANCHO FIJO para 1024 x 768 px

La web se disear con ancho fijo en el contenedor principal, ya

que presenta ventajas como:- La web tendr abundante carga grfica. El ancho fijo es idealpara este propsito.

- Fcil diseoSe disear con el ancho fijo para una resolucin de 1024 x 768.Para que en mayores resoluciones no se vea mal, se disear unfondo y la web se centrar. Adems se disear un pie de pginacontinuo a todo el ancho del navegador, as como una cabeceracontinua tambin.

SCROLL VERTICAL

Se pondr scroll vertical. Se piensa que el usuario teme ms a tenerque dar muchos clicks antes de darle a la rueda del ratn y bajarel scroll. Se limitar el alto a un mximo de 2000 px, y se colocarinformacin interesante hasta el final.

1024 x 768 px

Manteniendo un fondo de color y una cabecera y unfooter continuo, al cambiar de resolucin no da lasensacin de que la pgina se ha quedado pequea yaislada en el navegador

>1024 x 768 px

Web

Fondo

Header y Footer

ANCHO FIJO para 1024 x 768 px

La web se disear con ancho fijo en el contenedor principal, ya

que presenta ventajas como:- La web tendr abundante carga grfica. El ancho fijo es idealpara este propsito.

- Fcil diseoSe disear con el ancho fijo para una resolucin de 1024 x 768.Para que en mayores resoluciones no se vea mal, se disear unfondo y la web se centrar. Adems se disear un pie de pginacontinuo a todo el ancho del navegador, as como una cabeceracontinua tambin.

SCROLL VERTICAL

Se pondr scroll vertical. Se piensa que el usuario teme ms a tenerque dar muchos clicks antes de darle a la rueda del ratn y bajarel scroll. Se limitar el alto a un mximo de 2000 px, y se colocarinformacin interesante hasta el final.


15/27

54 px 30 px

12 columnas978 px

DISTRIBUCIN DE ESPACIOS > Retculas y MdulosRETCULA DE 978 px

La retcula que se utilizar para esta web ser de un ancho fijo de

978 px, con 12 columnas. Cada columna mide 54 px, y el espacioentre ellas es de 30 px, el medianil vertical y horizontal ser el mis-mo, 30px.

Esta retcula permite un aprovechamiento del espaciocon multitud de opciones.

978 px

894 px

138 px

54 px

54 px

222 px

306 px

390 px

474 px

810 px

726 px

642 px

558 px

474 px


16/27

DISTRIBUCIN DE ESPACIOS >Bocetos GUILas siguientes ilustraciones sern ejemplos de como sern los m-dulos de la web. Tendr un header principal, dnde se ubicar elmen principal y otro secundario, y un footer, dejando mucho espa-

cio en medio para colocar contenido y poder acomodar los grficosfcilmente.El contenido de cada pgina se distribuir en 4 columnas, y sepodrn utilizar o bien las 3, o bien dos columnas, haciendo unacolumna de 2 mdulos y otra de 1.

El header contedr tanto el men principal, dividido en 3 partesprincipales (Una dedicada a Things y otra a sus productos), un bus-cador, y un men secundario (Novedades (Blog), Artistas, Tutoriales

y Tienda).El footer tendr informacin accesoria, como otro enlace aContacto, Informacion sobre Things, Formas de pago y Pol-ticas de Envo, Redes sociales, RSS, Copyright y Newsletter.

HEADER

FOOTER


17/27

FOOTER

DISTRIBUCIN DE ESPACIOS > Bocetos GUITRIPLE PANTALLA

Toda la web estar basada en pginas de triple pantalla, es decir,

que el largo de la pgina se divide en 3 partes iguales, cada una deellas ajustada a la ventana del navegador.Habr pginas que por su contenido sea solo la ltima divisin laque se ajuste a la ventana del navegador.

Para el home, se dividir en:

- 1 divisin: persuasiva- 2 divisin: informativa

- 3 divisin : informacin auxiliar (footer)

La tercera divisin la ocupar siempre el footer.

2000

px


18/27

DISTRIBUCIN DE ESPACIOS >Bocetos GUIEste es un ejemplo del home del sitio web:

- El footer permanecer siempre igual.

- La zona del logo y los menus principalesse mantendrn tambin.- La zona de la composicin tipografca semantendr en las pginas inicio de cadaseccin principal.

650

px

650

px

650

px

FOOTER

Imagen concomposicintipogrfica

Logo Zona Mens

Imgenes de tutoriales,noticias y artistas

Pase de im-genes sobrenovedades

Redessociales

Men terciario

FormularioNewsletter


19/27

Sistema de

Navegacin


20/27

La navegacin a travs de la web se realizar mediante dos sistemaprincipales: El men principal y un submen.

El men principal: Ser un men desplegable aparentemen-te sencillo, divido en 3 partes: Things, Catlogo y Artistas.Dentro de cada seccin principal, se incluirn otras seccio-nes de cada temtica:

- Things: Quienes somos, Contacto , FAQ- Catlogo: Peluches, Accesorios, Pedidos Custom- Artistas: Nuestros artistas, Trabaja con nosotros

El men secundario, ser un men no desplegable, con otras sec-ciones importantes pero de segundo orden, tales como:- Tutoriales- Blog- Tienda

Y por ltimo el Footer contendr otro men, con informacin acce-soria como ya se ha comentado antes.

THINGS ARTISTASCATLOGO

Quines somos?

Contacto

FAQ

TUTORIALES BLOG TIENDA

Men principal desplegable

Men secundario

DISTRIBUCIN DE ESPACIOS > Mens y submens


21/27

SISTEMA DE NAVEGACIN >Navegacin alternativa y ayudasLa navegacin alternativa se compondr, en primer lugar, del menauxiliar presente en el footer, que ayudar a cambiar de seccionsin la necesidad de volver arriba.

Sin embargo, si se quiere volver arriba, se situar un elemento deancla con el que se subir.Por otro lado, se situar, en los lugares como la seccin de tutoria-

les, flechas con siguiente y anterior, para no tener quevolver al inicio de la seccin si se quiere cambiar.

El en blog se incluir, debajo de cada post, las noticias relacio-nadas, que ayudarn a saber ms del mismo tema sin tener querecurrir a todo el listado de post.

Adems de que todo lo anterior servir en parte como ayuda, se in-

cluirn cambios de color en el men para saber en que seccinestamos, breadcrumps para no perdernos y un mapa web.


22/27

SISTEMA DE NAVEGACIN >Navegacin alternativa y ayudas


23/27

Uso del

Color


24/27

USO DEL COLOR >GeneralLos colores elegidos para la web se ha limitado a 4 principalmente:- Corporativos: Morado y verde- No corporativos: Gris oscuro y beige.

Aunque el uso de estos colores es principalmente para apoyar laimagen de marca, se utilizarn tambin para recursos como diferen-ciacin de secciones, estados hover y focus de los botones, fondos,pestaas, recursos grficos...

Predominar el contraste entre los colores (sobretodo entre los cor-porativos) y estar en clave media-alta, ya que el fondo no serblanco, sino con textura beige.

COLORES CORPORATIVOS

# 553676

# FDEFCA

# B8B11C

# 1A1A1A

COLORES NO CORPORATIVOS


25/27

Se utilizar para el cuerpo de texto y para elementos grficos. Tambin estar presente en el men

Se utilizar para los ttulos y subttulos, palabras destacadas y para la composicin tipogrfica de algunaspginas. Tambin se utiliza para el cambio de color en el men.

Debido a su escasa legibilidad, este color se restringir a elementos grficos y decorativos y para el fondodel footer.

Fondo de todo el sitio web

USO DEL COLOR > Uso Funcional


26/27

Tipografa


27/27

TIPOGRAFAS > TiposSe utilizarn 3 tipos de fuentes en el sitio web:

- Fuente segura

- Fuente rasterizada- Fuente de GOOGLE FONT WEB API (font.com)

abcdefghijklmnopqrstuvwxyz




CENTURY GOTHIC Regular y Bold. Fuente segura. Para el cuerpo detexto a 12 px y para subttulosh3.

Fuente rasterizada. Para compo-siciones tipogrficas decorativas.

Fuente rasterizada. Para compo-siciones tipogrficas decorativas.

Fuente en servidor de Google.Para h2 (titulos importantes)

ANDROGYNE Regular

AACHEN EF Bold

NADIANNE Bold

Documents

Libro Estilos Web