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 un eslogan en flash que desaparecerá en
segundos y despues se vea la home.
- La home de nuestra página web empieza por la cabecera en la que contendra el logotipo de
nuestra marca en medio del header, un botón de registrarse en nuestra web y otro para entrar,
enlaces a redes sociales y un menu superior y distingido al resto dandole la principal importancia
para que el usuario pueda conocernos 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

- Tienda: donde el usuario que compre online se vaya directamente a catálogo desde prestashop.
-Contacto: donde el usuario puede ver nuestra información para poder contactar con nosotros vía
email o telefónicamente y ver con un mapa de españa donde tenemos nuestras tiendas y su localización
correspondiente.
-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.

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

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.
Estructura de la web

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 o
Fotografia simplemente el logotipo animado
ocupando un espacio menor y en el
con Logotipo centro, utilizaré un eslogan y la anima-
ción desaparecerá con animación flash
y ya se ve la home.

Eslogan empresa
Estructura de la web

960px
630 px 630 px
Página web
Este sería un gran ejemplo de nuestra
Logotipo
Menu superior cabecera Registrarse redes sociales estructura web en modulos, se divide
en 3 partes diferentes para darle aire al
Menu superior de servicios
contenido y para separar contenidos
Publicidad en flash según su clase.
Menú INFORMACIÓN
Lateral
(CATÁLOGO)
1250 px
(aproximadamente)

Ilustración o textura Ilustración o textura

(Rellena toda la pantalla)

Footer
 Distribución de espacios

Logo: Botones menu:

350 px ancho X 150 px alto 110 px ancho X 66 px alto
9 filas de modulos por 8 de ancho con medianil de 20 px Modulos y retícula
110 px

126 px Header:
960 px ancho X 175 px alto

Publicidad Flash
580 px ancho X 242 px alto Publicidad Flash
343 px ancho X 242px 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 modu-

los cuando le demos la opción del menú
catálogo.
Se verían todos los productos que vendemos
y si cliqueamos en alguna opción se vería de
manera persuasiva 6 imágenes u 8 como
máximo por cada opción

Catálogo
producto producto producto
1 2 3

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 una opción de catálogo:

En su parte izquierda pondremos
el nombre y la información de la
gama de productos y a su derecha
la fotografía en grande, debajo las
imágenes de más productos de esa
opción en la cual con solo clicear
la podremos ver en un mayor tamaño.
Por cada opción de catálogo pondremos
el botón de tienda en la cual te lleva
Catálogo al catálogo más detallado con la opción
Información de poder comprar.
del La flecha naranja significa vuelta
producto atrás al catálogo donde estabamos,
Producto aunque el menú siempre estará
presente para cambiar de opción.

Botón fotografias 1 2
tienda
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 y la derecha
siempre con publicidad en flash de
mi revista ``Palmitas´´en la cual si
Artículo del mes
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
contendrán los enlaces de estas
noticias más extensas de distintas
webs sobre información de bebés.
Noticias

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 nos lleva al
catálogo de prestashop para
poder comprarlo directamente.

Ofertas

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
Concurso
Publicidad producto del sorteo.
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ú
desplegable de la primera semana
Agenda embarazo 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
Para hacer el menú catálogo lo he echo en spray
vertical. Esta tipografía es:
He utilizado la tipografía: WhatDoWeDoallDay a 4 pt

Verdana, Geneva Sans-Serif

Color: # F09
R: 225
G: 0
B: 153

Cuando ponemos encima el ratón la tipografía

se pone :

Color: # 309

Color: # FF6699
R: 255
G: 102
B: 153

Los cuadros tienen de ancho 9.2 em de anchura

y su color es:
Color: # CCC
R: 204
G: 204
B: 204
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

Concurso Color: # F90 Color: # F09

R: 225 R: 225
Agenda de embarazo G: 153
B: 0
G: 0
B: 153
Ofertas
Ofertas Artículo del mes
Artículo del mes Color: # 99CC33 Color: # 66CCFF

R: 153 R: 102
Noticias G: 204 G: 204
B: 255
B: 51

Noticias

Color: # 663399

R: 102
G: 51
B: 255

Menú de servicios echo en FLASH Tipografía:

cuando se pulsa sobre alguna
opción se pone el botón en el color Tahoma Bold
de fondo de cada botón y su tipografía
color blanco
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: # FF6699
Color: # 663399
R: 255
G: 102 R: 102
B: 153 G: 51
B: 255

Color: # 309
R: 51 Color: # 99CC33
G: 153 R: 153
B: 0 G: 204
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 mientras estemos en el menú servicios,
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 CRECIMIENTO
La felicidad ayuda
a crecer a los niños

CREATIVIDAD
NUESTROS La felicidad siempre inventa algo nuevo

10Valores
SEGURIDAD
La felicidad necesita seguir
ESPONTANIEDAD
CRECIMIENTO

protegida La feliciddad es un
sentimiento natural

Este es el anuncio principal de flash en

la web, no desaparece nunca en el tras- OPTIMISMO
curso de nuestra navegación, esta compuesto La feliciddad
ESPONTANIEDAD
es contagiosa
de 11 imágenes cada una con un eslogan. INDEPENDENCIA
La feliciddad es un
Las imagenes se van pasando lentamente La feliciddad puede volar libre
sentimiento natural
difuminandose.
EXPERIENCIA
El anuncio mide : 550 px de ancho por La feliciddad
es algo
242 px de alto 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
tas
ofe
r sos
cur
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
SU

Ya puedes conseguirla
ra
201 go
int
erpr
IM
1
eta
r
AG
IN
en CA
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
dr
Cris e 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 era
ave catálo mo
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