Rediseño de imagen página web Presentación + capítulos
página de inicio
Imagen actual
Un fondo blanco con elementos desordenados, alineados a la izquierda. Una cabecera que no coincide con la barra de botones. Un botón de página de inicio separada del resto de elementos. Una animación de presentación pequeña y desencajada. Una línea de link de “A todo máquina” en un lugar de un botón o algo llamativo que invite a cliquear.
buscador
página de inicio
presentación
promociones y campañas
productos destacados
menú capítulos
Imagen futura
Una página ordenada, estructurada. Un fondo neutro, con una cabecera abarcando el ancho de la pantalla. Un fondo blanco para la zona donde se desarrolla la página en sí. Una barra de botones superiores e inferiores. Un buscador presente en esa barra desde el principio. Un botón de inicio integrado con el resto. Una animación de presentación centrada en la página. A la izquierda, un menú de capítulos, diferenciados por un detalle de color y una foto representativa. A la derecha, una zona de banners verticales anunciando las promociones o campañas. Debajo de la presentación, en tres columnas, una selección de productos destacados. 1
Rediseño de imagen página web Capítulos y familias
diferentes capítulos
promociones y campañas
Imagen actual
Se repite la información de los diferentes capítulos. Aparecen listados en el menú de la izquierda y al mismo tiempo presentados en cuadrados con foto a la derecha. Estos cuadrados a veces tienen fondo de color y a veces no. Las promociones o campañas aparecen debajo del menú sin ninguna imagen publicitaria.
ruta de navegación
promociones y campañas
despliegue de familias con foto orientativa
familias Imagen futura
Al hacer click en un capítulo del menú, se despliega hacia abajo el listado de familias. Éstas aparecen a la derecha, presentada en tres columnas, con una foto representativa. De esta manera, le ahorramos un paso al usuario sin repetir información. Una línea de texto en la parte superior nos muestra en todo momento la ruta de navegación. Las promociones y campañas siguen a la derecha, con una imagen más publicitaria. 2
Rediseño de imagen página web Subfamilias
sub familias familias
Imagen actual
Las familias aparecen listadas a la derecha. Para acceder al menú de subfamilias hay que hacer click y abrir una nueva pantalla. Para ver el contenido de otra subfamilia hay que volver y elegir otra familia.
familias
despliegue de menú subfamilias
Imagen futura
Partiendo del la pantalla de menú de familias, al mover el ratón sobre una de ellas, de despliega un menú conteniendo las subfamilias. De esta manera, el usuario puede ver su contenido sin tener que cambiar de pantalla.
3
Rediseño de imagen página web Producto
listado de productos dentro de la subfamilia
Imagen actual
Los productos aparecen listados sobre un fondo de color del capítulo, haciendo que las fotos aparezcan con un fondo blanco bastante antiestético. Un botón “siguiente” indica que el listado sigue, sin poder visualizar el contenido completo de la subfamilia de una vez, en una misma pantalla.
ruta de navegación
listado de productos dentro de la subfamilia
Imagen futura
La totalidad de los productos de la subfamilia aparecen listados a la derecha, presentados en tres columnas con la información básica: nombre del producto, foto grande y referencia con fondo en el color del capítulo. Si el listado es extenso, sólo hay que navegar hacia abajo, pero sin cambiar de pantalla. La ruta de navegación siempre está presente, indicando en que capítulo, familia y subfamilia estamos, pudiendo volver haciendo click sobre ella. 4
Rediseño de imagen página web Presentación
banner campaña productos relacionados
información de producto
foto de producto Imagen actual
La información del producto aparece muy pequeña y desordenada. La foto del producto aparece con el fondo blanco. El banner de la campaña aparece en el medio de toda la información, creando confusión. Los productos relacionados aparecen a modo de información, cuando debería tener una imagen más llamativa, invitando a comprarlos.
banner campaña
zona de producto
productos relacionados
información de producto foto de producto Imagen futura
En la zona donde antes aparecía el listado a tres columnas, se utiliza la columna del extremo derecho para situar el banner de la campaña. En el espacio de la izquierda aparece el producto, con foto e información más grande y legible. Los iconos a la izquierda, la referencia y carro de compras a la derecha. Los productos relacionados aparecen en tres columnas, con nombre y foto, haciéndolos mas atractivos. 5