Libro de estilos

Diseño web

MªCarmen Alcalá Cámara

 Estructura definitiva de la web

- Contendrá una entrada con el logotipo de la marca y dos opciones para clikear directamente al
cátalogo y a quienes somos, puesto que ahora mismo nos interesa darnos a conozer y vender
productos.

- La home de nuestra página web empieza por la cabecera en la que contendra el logotipo de
nuestra marca, un botón de registrarse en nuestra web, enlaces a redes sociales y un menu
superior y distingido al resto dandole la principal importancia para que el usuario pueda conocer-
nos antes de navegar por nuestra web.

Cada opción sera de un color y son 4 opciones:

-Nuestra revista: en la que podremos ver la revista en pdf

- Mi cesta: donde el usuario que compre online pueda ver sus artículos guardados para su
compra.
-Contacto: donde el usuario puede ver nuestra información para poder contactar con nosotros vía
email y ver con un mapa de españa donde tenemos nuestras tiendas y su localización correspondien-
te.
-Quienes somos: Explicamos a que nos dedicamos y la razón.

Despues de la cabecera obtenemos a lo largo un menu superior horizontal de color naranja con
la tipografía color blanco con 5 opciones:

-Concurso del mes : cada mes en nuestra página se sortea algún producto
-Artículo del mes: cada mes comentaremos un artículo relacionado con el cuidado del bebé y en
donde pondremos enlaces relacionados para el interés del usuario.
-Agenda de embarazo: Para ayudar a la madre sobre los sintomas de estar embarazada y cada
paso por
semanas de los sintomas que irá descubriendo.
-Noticias: esta sección contendra curiosidades y novedades
-Ofertas: Pondremos los artículos con los precios más bajos o de temporada pasada.
Estructura definitiva de la web

Despues del menu superior horizontal contendra a todo su ancho publicidad de productos sobre
mi marca en FLASH

Contendrá en su lateral izquierdo un menu lateral vertical que sera el catálogo se divide por
submenus jerarquizando las
opciones y sus principales son:

-Bebé: Que contiene en su submenú las opciones de complementos, puricultura y ropa

-Infantil: que contiene un submenú con las opciones de gafas, relojes, paraguas, joyeria infantil,
mochilas
y complementos.
-Ropa: tendra un submenú con opciónes para niño o niña
-Zapatos: tendra un submenú para niños o niñas
-Juguetes: con su submenú de bebes, niños y niñas.

En el lateral derecho contiene un espacio en blanco para la información que pongamos según las
opciones de los menus ya indicados, siempre que no haya opción contendrá un cartel o noticias en
resumen en las que enlazan a la principal, si hay opción escojida como por ejemplo del catálogo
ropa para niña en este lateral saldra todos los productos que obtenemos en esa opción tanto como
si por ejemplo le damos a un servicio como concurso del mes en este lateral se vera la información.

La web termina con un footer con las opciones de contacto, quines somos, registrate a la web y
politica de privacidad.

Nuestro punto fuerte y al que le daremos importancia a nuestra web es a la venta online
para ello tendremos que darle gran importancia al catálogo y obtener una venta comoda y fácil
para nuestros usuarios.
Distribución de espacios
1024 % Presentación a la web
Cuando entramos a nuestra web lo primero que nos encontramos
es una presentación con una fotografìa de nuestra empresa con el
logotipo ocupando todo el ancho de la pantalla y dejando dos
margenes por arriba y por abajo y en el margen de abajo irá
el eslogan: y un acesso al catálogo directamente.
Fotografia
con Logotipo

Eslogan empresa
CATÁLOGO
960px
630 px 630 px
Página web

Logotipo
Menu superior cabecera Registrarse redes sociales

Menu superior de servicios

Publicidad en flash

Menú INFORMACIÓN
Lateral
(CATÁLOGO)
1250 px
(aproximadamente)

Este sería un gran ejemplo de nuestra estructura web en modulos, Ilustración o textura Ilustración o textura
se divide en 3 partes diferentes para darle aire al contenido y para (Rellena toda la pantalla)

separar contenidos según su clase.

Footer
 Distribución de espacios

Logo: Botones menu:

350 px ancho X 150 px alto 120 px ancho X 100 px alto
9 filas x 8 columnas de ancho con medianil de 20 px Modulos y retícula

Header:
960 px ancho X 175 px alto
Menú servicios:
960 px ancho X30 px alto

Publicidad Flash
960 px ancho X 250 px alto

Margen:
960 px ancho X 20 px alto

Imformación:
Menú catálogo: 680 px ancho X 600 px alto
250 px ancho X 600 px alto ( su altura depende del
contenido)

Footer: Margen:
960 px ancho X 20 px alto 960 px ancho X 20 px alto
Distribución de espacios

Este es un ejemplo de como serian los modulos cuando le demos a alguna opción del menú catálogo.
Se verían 6 imágenes u 8 como máximo por cada opción.
Al cliquear en la fotografía se
abriría un cuadro con la fotografía
más grande y en la cual aparecería
la información detallada del producto,
en la siguiente página podremos ver
el ejemplo.

producto producto producto

1 2 3
Gafas Precio Precio Precio

producto producto producto

4 5 6

Precio Precio Precio

 Distribución de espacios

Este sería el ejemplo de modulos cuando cliqueamos un producto:

En su parte izquierda pondremos
el nombre y la información del
producto y a su derecha la fotografía
en grande, debajo dos imágenes
más en la que cliquearemos y se
pondrá en grande y obtenemos la
opción de ``Mi cesta´´por si al cliente
les gusta el producto ir juntando los
productos que desea comprar para
luego seguidamente hacer el proceso
de compra.
La flecha naranja significa vuelta
Información atrás al catálogo donde estabamos,
del aunque el menú siempre estará
producto presente para cambiar de opción.
Gafas Producto

Botón mi fotografias 1 2
cesta
Distribución de espacios

Esta sería la estructura si le damos a artículo del mes en opción del menú de servicios:
La caja de la información se
dividirá en dos partes , la
izquierda con la información
según de la opción que le demos
Artículo del mes y la derecha siempre con publicidad
en flash de mi revista ``Palmitas´´
en la cual si cliqueamos se irá al Pdf
de nuestra revista lo mismo que si
le damos a la opción de Revista en
el menú superior del header.

Titular Publicidad
Flash de
Texto Fotografía nuestra
revista
Distribución de espacios

Esta sería la estructura si le damos a noticias de la opción del menú de servicios:

Sigue manteniendo la publicidad
en flash en el lateral derecho, cada
noticia vendra con una foto, texto
y titular y al final de las noticias
Noticias contendrán los enlaces de estas
noticias más extensas de distintas
webs sobre información de bebés.

Noticias
Publicidad
Flash de
Noticia 1 Fotografía
nuestra
revista

Enlaces de interés

Noticia 2 Fotografía

Enlaces de interés
Distribución de espacios

Esta sería la estructura si le damos a ofertas de la opción del menú de servicios:

En esta sección se encuentran
4 ofertas cada una con su fotografía
y una breve explicación en la
cual cliqueamos y encontramos
Ofertas la misma estructura que cuando
cliqueamos un producto en el
menú catálogo en la que puedes
ver la imágen más grande, su
información más detallada y la
opción de juntar ese producto
a tu cesta.
Ofertas Publicidad
Flash de
nuestra
Oferta 1 Fotografía
revista

Oferta 2 Fotografía

Oferta 3 Fotografía

Oferta 4 Fotografía
Distribución de espacios

Esta sería la estructura si le damos a Concurso de la opción del menú de servicios:

Vendrá un concurso en el que
si estás registrada a nuestra web
podrás con solo cliquear participar
en un sorteo de cualquier producto
Concurso gugutata gratis y te lo enviamos
a tu casa sin gastos de envio,
si no estas registrado pondría la
opción de registrarse para
obtener los datos a los cuales
enviaremos si es el ganador el
producto del sorteo.
Concurso
Publicidad
Flash de
texto nuestra
revista

Participa
Distribución de espacios

Esta sería la estructura si le damos a Agenda de embarazo de la opción del menú de servicios:
Contiene información por
cada semana que cliqueamos
y una fotografía, para elegir
la semana obtenemos un menú
Agenda embarazo desplegable de la primera semana
asta la 40 semana en la que vamos
informando de los sintomas para
guiar a la embarazada.

Agenda embarazo
Publicidad
1 semana
Flash de
texto nuestra
revista
Sistema de navegación
 Menú Catálogo

Esta tipografía es:

WhatDoWeDoallDay a 4 pt

Para hacer el menú catálogo lo he echo en spray Los cuadros tienen de ancho 9.2 em de anchura
vertical. y su color es:
He utilizado la tipografía: Color: # CCC
R: 204
Verdana, Geneva Sans-Serif
G: 204
B: 204
Color: # F09
R: 225
G: 0
Cuando ponemos encima el ratón la celda se pone :
B: 153
Color: # F90
Cuando ponemos encima el ratón la tipografía
R: 225
se pone :
G: 153
Color: # 309 B: 0
R: 51
G: 153
B: 0
Menú Superior

Este menú está en la parte superior

del header de la web solo con cliquear
mi cesta Revista nos lleva a las opciones que describe
cada botón.

Mi cesta Nuestra revista

R: 225 R: 102
G: 0 G: 204
B: 153 B: 255

Contácto Gugutata

Contacto Quienes somos:

Tipografía: R: 102
G: 51
R: 153
G: 204
Tahoma Bold B: 255 B: 51
Menú Servicios

Concurso Agenda de embarazo

Color: # F90 Color: # F09

R: 225 R: 225
G: 153 G: 0
B: 0 B: 153

Concurso Ofertas Artículo del mes

Color: # 99CC33 Color: # 66CCFF
Agenda de embarazo R: 153 R: 102
G: 204 G: 204

Ofertas B: 51 B: 255

Noticias
Artículo del mes
Color: # CC3333

R: 204
Noticias G: 51
B: 51

Menú de servicios echo en FLASH Color: # 309

cuando se pulsa sobre alguna R: 51
opción se pone el botón en el color G: 153
verde corporativo de mi empresa: B: 0
Tipografía:
Tahoma Bold
La estrategía que utilizaremos para que nuestros usuarios siempre sepan dónde se encuentran :
Siempre utilizaremos en cada opción el Título del mismo color que la opción que hemos
pulsado ejemplo:

Concurso
y siempre estará indicado en el cuadro de información
los pasos que hemos dado asta llegar a donde estamos
ejemplo:
Gugutata>Concurso>Suscripción revista
Uso del color

Fondo de la web:

Colores que utilizo en mi web:

Color: # F09 Color: # 66CCFF

R: 225 R: 102
G: 0 G: 204
B: 153 B: 255

Color: # 309 Color: # 663399

R: 51
R: 102
G: 153
G: 51
B: 0
B: 255

Color: # CC3333 Color: # 99CC33

R: 204 R: 153
G: 51 G: 204
B: 51 B: 51

Color: # F90 Color: # CCC

R: 225 R: 204
G: 153 G: 204
B: 0 B: 204
Usos tipográficos

Tipografía:

Color del texto base: Para opciones de submenús Color anuncios de flash:
y para texto base:
Color: # 333 Color: # 66CCFF
R: 102
R: 51 Verdana Geneva Sans- Serif G: 204
G: 51 B: 255
B: 51

Para titulos y subtítulos:

Color de subtítulos: verdana bold Color: # 99CC33

R: 153
Tahoma Geneva Sans- Serif G: 204
Color: # F09 B: 51
R: 225
G: 0
Para destacados:
Color: # FFFFFF
B: 153
verdana bold italic R: 255
verdana italic G: 255
B: 255
Color de footer:
Para detalles decorativos y
Color: # F90
R: 225
para anuncios en flash:
G: 153
B: 0 WhatDoWeDoallDay
Elementos web:

Redes sociales personalizadas para mi empresa: Ilustración home:

ar
tíc
ulo
s

no
Asceso como usuario: tic
ias
tas
ofe
r sos
USUARIO ENTRAR cur
con
CONTRASEÑA REGISTRARSE

catálogo

Tipo de botones:
agenga de embarazo
PARTICIPA ENVIAR
Anuncios Flash

Nuestra Revista
Palmitas
4

Madre del mes:

Cristina
Aguilera
Nos comenta su
experiencia como
madre
Como interpretar
Moda
Primavera SU IMAGINACIÓN
Nuevo catálogo en sus dibujos
primavera 2011

Este es el anuncio del lateral derecho de nuestra web

nunca cambia, da igual en la sección que estemos
y cada vez que se cliquea una portada sale en grande
como se ve en el ejemplo.
La revista Nº1 al cliquearla se puede ver en ISSU.
4

Madre del mes:

Cristina
Aguilera
Nos comenta su
experiencia como
madre
Como interpretar
Moda
Primavera SU IMAGINACIÓN
Nuevo catálogo en sus dibujos
primavera 2011

Ya puedes conseguirla
en tus quioscos por
solo 2 eurosª

Revista número 1 en
pdf
Anuncios Flash

NUESTROS CRECIMIENTO

10
La felicidad ayuda
a crecer a los niños

Valores CREATIVIDAD
La felicidad siempre inventa algo nuevo
CRECIMIENTO
SEGURIDAD ESPONTANIEDAD
La felicidad necesita seguir
La feliciddad es un
Este es el anuncio principal de flash en protegida
sentimiento natural

la web, no desaparece nunca en el tras-

curso de nuestra navegación, esta compuesto
de 11 imágenes cada una con un eslogan.
Las imagenes se van pasando lentamente
difuminandose. OPTIMISMO
La feliciddad
ESPONTANIEDAD
es contagiosa
El anuncio mide : 550 px de ancho por INDEPENDENCIA
La feliciddad es un
La feliciddad puede volar libre
242 px de alto sentimiento natural

EXPERIENCIA
La feliciddad
es algo
muy serio CERCANíA
La felicidad está a nuestro alrededor

SENCILLEZ La felicidad está echa

de pequeñas cosas MODERNIDAD
La felicidad siempre
llega a tiempo
Home/Artículo/ Concurso
 mi cesta Revista Contácto Gugutata

USUARIO ENTRAR
CONTRASEÑA REGISTRARSE

Concurso
Agenda de embarazo
Ofertas
Artículo del mes
CREATIVIDAD Noticias
La felicidad siempre inventa algo nuevo

Gugutata Nuestra Revista

El cuidado perfecto para tu bebé Palmitas

ar
tíc
ulo
s

no
tic
ias
r tas s
ofe cu rso
con 4

Madre del mes:

Cristina
Aguilera
Nos comenta su
experiencia como
madre
Como interpretar
Moda
Primavera SU IMAGINACIÓN
Nuevo catálogo en sus dibujos
primavera 2011

Ya puedes conseguirla
catálogo en tus quioscos por
solo 2 eurosª

Revista número 1 en
agenga de embarazo pdf

Contácto / Politica de privacidad / Encuentra nuestras tiendas

 mi cesta Revista Contácto Gugutata

USUARIO ENTRAR
CONTRASEÑA REGISTRARSE

Concurso
Agenda de embarazo
Ofertas
Artículo del mes
CREATIVIDAD Noticias
La felicidad siempre inventa algo nuevo

Gugutata>Artículo del mes>Quiero tener un hijo Nuestra Revista

Artículo del mes
QUIERO TENER UN HIJO
Palmitas
El 40% de los tratamientos de reproducción asistida
se deben a la infertilidad masculina

Es un hecho que los tratamientos en reproduc-

ción asistida van en aumento y una creencia
general que la mayoría se deden a la infertilidad
femenina, ya que la mujer decide ser madre con
más edad. Sin embargo, los datos apuntan que el
40% de los casos, se deben a la infertilidad
masculina.

El alcohol, el tabaco y los hábitos de vida poco

saludables de los hombres españoles explican la baja
calidad del semen español. Hasta este momento, la
infertilidad femenina ha sido siempre citada como
causa del aumento de los tratamientos de reproduc-
ción asistida, pero la balanza empieza a equilibrarse.
Actualmente, el 40% de los tratamientos de
reproducción asistida que se realizan en España se
deben a factores masculinos, en concreto, al deterioro
del semen. Ante esta nueva realidad, la Organización 4

Mundial de la Salud (OMS) ha decidido variar las cifras Madre del mes:

Cristina

recomendadas en los estudios seminales.

Aguilera
Nos comenta su
experiencia como
madre
Como interpretar
Moda
Primavera SU IMAGINACIÓN
Nuevo catálogo en sus dibujos
primavera 2011

No todas las consultas de reproducción asistida están

relacionadas con la infertilidad. De hecho,én los
últimos años, el 10% de estas están dirigidas a la Ya puedes conseguirla
criopreservación de ovocitos. Una opción que permite en tus quioscos por
retrasar la maternidad a mujeres fértiles, por la que
se decantan mujeres que superan los 37 años, con un solo 2 eurosª
nivel socio cultural y profesional alto.

Revista número 1 en
pdf

Contácto / Politica de privacidad / Encuentra nuestras tiendas

 mi cesta Revista Contácto Gugutata

USUARIO ENTRAR
CONTRASEÑA REGISTRARSE

Concurso
Agenda de embarazo
Ofertas
Artículo del mes
CREATIVIDAD Noticias
La felicidad siempre inventa algo nuevo

Gugutata>Concurso>Suscripción revista Nuestra Revista

Concurso
SUSCRIBETE A NUESTRA REVISTA
Palmitas

¿Estás embarazada o tienes un bebé?

-Toda la información que necesitas sobre el embarazo, el parto y los cuidados
del bebé.
-Los mejores expertos resuelven tus dudas.
-Recibe Mi bebé y yo cada mes en tu casa GRATIS.

Subscribete gratis 6 meses

Solicita la suscripción gratuita a la revista a
través del portal y durante 6 meses la recibirás
totalmente gratis a tu casa

PARTICIPA
Madre del mes:

Cristina
Aguilera
Nos comenta su
experiencia como
madre
Como interpretar
Moda
SU IMAGINACIÓN
Ma Primavera
en sus dibujos
dre Nuevo catálogo

Cris del me
primavera 2011

Agu tina s:
ile
No
exp s com ra
ma erie ent
dre nci a su
Mod a com
o
Prim a
Nu av Co
prim evo era
ave catálo mo

Ya puedes conseguirla
ra
201 go SU int
erpr
IM
1
eta
r
AG
IN
en C A
s di IÓN
su
bu
jos

en tus quioscos por

solo 2 eurosª

Revista número 1 en
pdf

Contácto / Politica de privacidad / Encuentra nuestras tiendas

 mi cesta Revista Contácto Gugutata

USUARIO ENTRAR
CONTRASEÑA REGISTRARSE

Concurso
Agenda de embarazo
Ofertas
Artículo del mes
CREATIVIDAD Noticias
La felicidad siempre inventa algo nuevo

Gugutata>Concurso>Suscripción revista Nuestra Revista

Concurso
SUSCRIBETE A NUESTRA REVISTA
Palmitas

Subscribete gratis 6 meses

Tus datos:

Nombre:

Apellidos:

Teléfono:

Email:

Dónde recibir tus revistas:

Calle y número:

Ciudad:

Localidad:
4

Madre del mes:

Cristina
Aguilera
Nos comenta su

C.P:
experiencia como
madre
Como interpretar
Moda
Primavera SU IMAGINACIÓN
Nuevo catálogo en sus dibujos
primavera 2011

Ya puedes conseguirla
en tus quioscos por
solo 2 eurosª
4

Ma
dre
Cris del me
ENVIAR
Agu tina s:

Revista número 1 en
ile
No
exp s com ra
ma erie ent
dre nci a
Mod a comsu
o
Pr a
im
Nu av Co
prim evo
ave cat
era mo
álo
ra
201 go SU int
erpr

pdf
IM
1
eta
r
AG
IN
en CA
s di IÓN
su
bu
jos

Contácto / Politica de privacidad / Encuentra nuestras tiendas

 mi cesta Revista Contácto Gugutata

USUARIO ENTRAR
CONTRASEÑA REGISTRARSE

Concurso
Agenda de embarazo
Ofertas
Artículo del mes
CREATIVIDAD Noticias
La felicidad siempre inventa algo nuevo

Gugutata>Concurso>Suscripción revista Nuestra Revista

Concurso
SUSCRIBETE A NUESTRA REVISTA
Palmitas

¡Enhorabuena! Tus datos ya han sido enviados de manera

correcta, acaba de entrar en el sorteo de recibir todos

Madre del mes:

Cristina
Aguilera
Nos comenta su
experiencia como
madre
Como interpretar
Moda
Primavera SU IMAGINACIÓN
Nuevo catálogo en sus dibujos
primavera 2011

Ya puedes conseguirla
en tus quioscos por
solo 2 eurosª

Revista número 1 en
pdf

Contácto / Politica de privacidad / Encuentra nuestras tiendas