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
 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

Mi cesta Nuestra revista

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

Contacto Quienes somos:

Tipografía: R: 102
G: 51
R: 153
G: 204
WhatDoWeDoallDay B: 255 B: 51
Sistema de navegación
Uso del color

Colores que utilizo en mi web: Fondo de la web:

Color: # F09
R: 225 R: 102
G: 0 G: 204
B: 153 B: 255

Color: # 309
R: 102
R: 51 G: 51
G: 153 B: 255
B: 0

Color: # CCC
R: 204 R: 153
G: 204 G: 204
B: 204 B: 51

Color: # F90
R: 225 R: 255
G: 153 G: 255
B: 0 B: 255
Usos tipográficos

Color del texto: Tipografía:

Color: # 333
Para titulos:
R: 51
G: 51 verdana bold
B: 51 Tahoma Geneva Sans- Serif
Color: # F09 Para opciones de submenús y para texto base:
R: 225
G: 0 Verdana Geneva Sans- Serif
B: 153
Para destacados:
Color: # 309
verdana bold italic
R: 51
G: 153 verdana italic
B: 0
Para detalles decorativos y para anuncios en flash:
Color: # F90
R: 225 WhatDoWeDoallDay
G: 153
B: 0