Download - Libro Estilos Web
-
8/6/2019 Libro Estilos Web
1/27
Libro de estilos
PROYECTO WEBChari Nogales 2b
-
8/6/2019 Libro Estilos Web
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
-
8/6/2019 Libro Estilos Web
3/27
Arquitectura de la
Informacin
-
8/6/2019 Libro Estilos Web
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
-
8/6/2019 Libro Estilos Web
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
-
8/6/2019 Libro Estilos Web
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
Noticias (Blog) Tutoriales
OfertasNivel 1
Nivel 2
Nivel 3
ARQUITECTURA DE LA INFORMACIN >Organizacin(*)
-
8/6/2019 Libro Estilos Web
7/27
ARQUITECTURA DE LA INFORMACIN >Organizacin
ARTISTA
Tienda
Catlogo
Novedades (Blog)
Artistas Quienes somos?Contacto
Noticias (Blog)
TutorialesOfertas
Nivel 1
Nivel 2
Nivel 3
-
8/6/2019 Libro Estilos Web
8/27
CRAFTER
Tienda
Catlogo
Novedades (Blog)
Artistas
Quienes somos?
Contacto
Noticias (Blog) Tutoriales
Ofertas
Nivel 1
Nivel 2
Nivel 3
ARQUITECTURA DE LA INFORMACIN >Organizacin
-
8/6/2019 Libro Estilos Web
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.
-
8/6/2019 Libro Estilos Web
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.
-
8/6/2019 Libro Estilos Web
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.
-
8/6/2019 Libro Estilos Web
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.
-
8/6/2019 Libro Estilos Web
13/27
Distribucin de
espacios
-
8/6/2019 Libro Estilos Web
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.
-
8/6/2019 Libro Estilos Web
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
-
8/6/2019 Libro Estilos Web
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
-
8/6/2019 Libro Estilos Web
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
-
8/6/2019 Libro Estilos Web
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
-
8/6/2019 Libro Estilos Web
19/27
Sistema de
Navegacin
-
8/6/2019 Libro Estilos Web
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
-
8/6/2019 Libro Estilos Web
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.
-
8/6/2019 Libro Estilos Web
22/27
SISTEMA DE NAVEGACIN >Navegacin alternativa y ayudas
-
8/6/2019 Libro Estilos Web
23/27
Uso del
Color
-
8/6/2019 Libro Estilos Web
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
-
8/6/2019 Libro Estilos Web
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
-
8/6/2019 Libro Estilos Web
26/27
Tipografa
-
8/6/2019 Libro Estilos Web
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
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
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