Dossier informativo de Boceto para empresa Sunclear

B-MEDIA

2

Index

Pág.3………………………………………. Boceto 1

Pág.4……………………………………… Elementos utilizados para la creación del Boceto 1

Pág.5……………………………………… Detalle de la página y esquemas ( parte superior)

Pág.6……………………………………… Parte intermedia y parte superior Boceto 1

Pág.7……………………………………… Parte inferior Boceto 1

Pág.8……………………………………… Boceto 2

Pág.9……………………………………… Elementos utilizados para la creación del Boceto 2

Pág.10……………………………………. Detalle de la página y esquemas ( parte superior,parte central) Boceto 2

Pág.11……………………………………. Parte inferior Boceto 2

Pág.12……………………………………. Animación parte inferior Boceto 2

B-MEDIA

3

Boceto 1

Web Sunclear para moda Invierno

B-MEDIA

4

Elementos utilizados para la creación del boceto

Hemos querido utilizar un diseño elegante,moderno y simple para que el cliente tenga la sensación de estar ante una empresa con un claro interés en estar a la vanguardia en sus productos.

Para esto hemos seleccionado una imagen clara, sin muchos detalles pero que da a entender ese impacto inicial al usuario de modernidad i elegancia anteriormente mencionada.

Además hemos adaptado la imagen para crear el logo corporativo utilizando la paeta de colores de la imagen, para conseguir así homogeneidad y que se mimetize en el ambiente a la vez que en todo momento está visible. Aquí el logo:

B-MEDIA

5

Detalle de la página y esquemas

A continuación vamos a detallar la página final con sus elementos:

1. Parte superior:

Aquí se pueden observar 3 elementos significativos como son el logo en la parte superior izquierda, donde viene siendo habitual

en todas las páginas web estándares ya que resulta mucho más cómodo y accesible para el usuario, que está resaltado de una manera muy sutil y simple pero que a la vez le da ese resaltado en el que se ve claramente que está situado el logo corporativo.

Esto se ha conseguido por una línea a lo largo de la página con una opacidad baja para que se deje entrever el fondo y darle un

toque elegante y sutil y en el que se aprovecha para insertar en la parte superior derecha la barra de navegación utilizando otra vez más un color que resalte sin que se salga de la línea escogida para el diseño.

En este caso la barra está compuesta por:

• Logo corporativo: Nos da la opción de volver al inicio de la página

• Home: Nos permite de manera rápida e intuitiva volver al inicio desde la barra

• Red: Nos permite acceder a la red interna de la empresa ya sea proveedor o cliente para realizar compras o gestiones

on-line

• Tiendas: Nos permite acceder a la red de tiendas de la empresa para acceder a los datos de éstas como la dirección,

teléfono, horarios, etc… ( se podría programar un acceso a red )

• Vídeo: Nos permite acceder a contenido multimedia del site para ver las nuevas colecciones

• Contacto: Acceso a los datos de la empresa con el teléfono de atención al cliente, dirección de la sede central así como

la posibilidad de contactar vía email

• Ofertas: Nos permite acceder a las últimas ofertas de las tiendas disponibles

A su vez la barra tiene un comportamiento añadido dado que al pasar el ratón por encima de cualquier enlace de la misma, ya se Home, Red, etc…, se pierde el efecto de la barra translúcida pareciendo que se corta, aquí un ejemplo:

B-MEDIA

6

2. Parte intermedia:

En esta sección hemos aprovechado la forma de la imagen para introducir las principales secciones a la que va destinada la página:

Mujer: Acceso a la sección de moda de mujer

Hombre: Acceso a la sección de moda de hombre

Juvenil: Acceso a la sección de moda para jóvenes

Infantil: Acceso a la sección de moda para niños

A esta sección también le hemos dado el comportamiento animado de cambiar según se pasa el ratón por encima para dar la información visual al usuario de que puede acceder desde ahí:

Ejemplo

Off

On

B-MEDIA

7

3. Parte inferior:

Aquí podemos observar cómo se han introducido los elementos de redes sociales para volver a demostrar otra vez el afán de

para promover actualidad y darse a conocer a todo el público en general y, de esa manera, poder llevar el nombre de la empresa a todo el mundo.

También se ha querido introducir una animación ( banner de Flash ( publicidad)) que por ahora no es más que una llamada visual

indicando que hay nueva temporada de invierno, pero que en un futuro se puede reservar para añadir publicidad de otras compañías si así lo requiere la empresa.

Aquí va una imagen de la animación:

B-MEDIA

8

Boceto 2

Web Sunclear para moda Verano

B-MEDIA

9

Elementos utilizados para la creación del boceto

En este caso tenemos la imagen principal que nos ha mandado el cliente habiendo en este caso, claras referencias a la estación a

la que va dirigido el producto en cuestión, situando al usuario con una sola imagen en el ámbito que queremos. Como es una

imagen más pequeña de lo que desearíamos, hemos preferido mantener esta imagen “limpia” y situar los contenidos alrededor

de ésta para así, de esta manera, completar la pantalla al usuario para una plena navegación sin distorsionar el contenido. De igual forma se ha aprovechado los colores de la imagen para realizar el logo corporativo afín a la imagen. Aquí el logo:

B-MEDIA

10

Detalle de la página y esquemas

A continuación vamos a detallar la página final con sus elementos:

1. Parte superior:

Podemos observar como se ha rellenado la parte superior cogiendo los colores adecuados a la imagen anterior y al logo

corporativo y, además, se han introducido iconos de las principales redes sociales para que el usuario enseguida vea que la

empresa está plenamente solicitada en estos medios y consiguiendo así la posibilidad de publicidad en estos medios de usuario a usuario.

Se han optado por colores simple por el hecho de tener que rellenar la imagen para la optimización, de otro modo podría

restar importancia a la parte central y legibilidad y no sería “ agradable” para el usuario

2. Parte central:

Aquí podemos ver la imagen anteriormente citada con la barra de navegación en ella para que el usuario pueda acceder a

los diferentes estados de la página. En este caso vemos que la barra tiene los mismos enlaces que pudimos ver en el boceto numero 1, pero que volvemos a detallar.

B-MEDIA

11

En este caso la barra está compuesta por:

• Home: Nos permite de manera rápida e intuitiva volver al inicio desde la barra

• Red: Nos permite acceder a la red interna de la empresa ya sea proveedor o cliente para realizar compras o gestiones

on-line

• Tiendas: Nos permite acceder a la red de tiendas de la empresa para acceder a los datos de éstas como la dirección,

teléfono, horarios, etc… ( se podría programar un acceso a red )

• Vídeo: Nos permite acceder a contenido multimedia del site para ver las nuevas colecciones

• Contacto: Acceso a los datos de la empresa con el teléfono de atención al cliente, dirección de la sede central así como

la posibilidad de contactar vía email

• Ofertas: Nos permite acceder a las últimas ofertas de las tiendas disponibles

Hemos querido darle a la barra también un comportamiento para que el usuario, en cuanto sitúe el curso encima de la barra, ésta cambie de una manera sutil pero vistosa.

Éste sería el comportamiento:

Ejemplo

On Off

3. Parte inferior

Para este boceto hemos decidido incorporar las sección en la parte inferior para no sobrecargar la parte central. Así hemos

podido dotar de animación ( GIF ) a los diferentes botones para llamar más la atención del usuario y estar seguros de que al ver

la página sepa que hay más secciones de las que se pueden ver en la barra y que se introduzca en las mismas. A continuación detallamos la animación:

B-MEDIA

12

Animación:

Por otro lado se ha decidido incrustar, como en el boceto 1, un banner de flash para darle más énfasis en las secciones de moday

para aprovechar e incrustar el logo corporativo. Así de esta manera creemos que se da más importancia al logo y tampoco sobrecargamos la parte superior que es donde estaba ubicado en el primer boceto.

Una imagen del banner en el último estado que es donde se pueden apreciar todos los elementos:

A partir de aquí nos queda enviarles los archivos para que puedan observar el site tal y como lo haría un usuario para que lo puedan visualizar mejor.

Atentamente el equipo de diseño de B-MEDIA