AI PAC03: Mapa web y wireframe

57 %
43 %
Information about AI PAC03: Mapa web y wireframe
Design

Published on March 9, 2014

Author: beikochan

Source: slideshare.net

PAC /03 Realización de mapa de la web y wireframe de página detalle de la web Practica Beatriz García Fernández Grado Multimedia Noviembre 2012

01. NUEVO ÁRBOL DE CONTENIDOS inicio Todos los productos Los productos se pueden mostar ordenados por: • habitación • función De la A a la Z Catálogo Online Dormitorio Salón Camas Espacio de trabajo Sofás y sillones Multimedia Iluminación Mesas Espejos Almacenamiento Iluminación Descarga de pdf Toda la casa Club Practica Ofertas Almacenamiento Dormitorio Eventos Salón Accesorios Ideas decoración Esp. trabajo Textil Mesas Cocina Sillas Almacenamiento Textil Cocina Organización Almacenamiento Foro Baño Comedor Iluminación Productos Practica Redes sociales Jardín Textil Niños Enlaces especiales de la página Pie de página Redes sociales Newsletter Información Recursivo Contacto Tarjeta socio Mis favoritos Nuestras tiendas Mi carro de la compra Servicio de financiación Búsqueda Política de devoluciones Servicio de transporte Guía de compra online Búsqueda avanzada Preguntas frecuentes Mapa de la web

02. WIREFRAME DE PÁGINA DETALLE (FICHA DE PRODUCTO) escribe tu búsqueda LOGO Búsqueda avanzada Mis favoritos Mi carro de la compra (3 productos) Todos los productos Dormitorio Salón Espacio de trabajo Cocina Toda la casa (300 € | 2 productos) Ofertas Club Practica > INICIO > DORMITORIO > ALMACENAMIENTO > CÓMODAS Basic Cómoda de tres cajones IMAGEN #2 IMAGEN #3 talian made high gloss Perouse 1 door/1 drawer bedside unit with dark putty interior. Door and drawer have push latch catches for a smooth, handle-free minimalistic look. Part of the sleek Perouse bedroom furniture range available in white and brown. IMAGEN #1 80 x 43 x 84 cm > MÁS INFORMACIÓN DEL PRODUCTO 120 € IMAGEN #4 ME GUSTA AÑADIR AL CARRO Comprobar disponibilidad EMAIL < COMPARTIR AÑADIR A FAVORITOS Puedes combinarlo con... < IMAGEN IMAGEN IMAGEN También te puede gustar... > < IMAGEN IMAGEN IMAGEN También vistos... > < IMAGEN IMAGEN IMAGEN Basic Basic Basic Vacari Pekin Basic Basic Basic Basic 120 € 120 € 120 € 69 € 110 € 80 € 120 € 120 € > 120 € Cómoda de tres cajones Cómoda de tres cajones Cómoda de tres cajones Si quieres recibir nuestras novedades inscríbete en nuestro newsletter: escribe tu email © 2012 Practica Cómoda de dos cajones Cómoda de tres cajones INFORMACIÓN Contacto Tarjeta socio Nuestsras tiendas Cómoda de dos cajones Servicio de financiación Servicio de transporte Política de devoluciones Cómoda de tres cajones Cómoda de tres cajones Cómoda de tres cajones Guía de compra online Preguntas frecuentes Mapa de la web Política de privacidad | Aviso legal El número de imágenes no es fijo: puede que sólo haya 1 o que hayan 20 (en el caso de que hayan más de 3 aparecerán los signos para pasar por las fotos del carrusel). *El subrayado que aparece en algunos textos indica que es un link a otra página. Iconos redes sociales

02. WIREFRAME DE PÁGINA DETALLE (FICHA DE PRODUCTO) (continuación) escribe tu búsqueda Búsqueda avanzada Mis favoritos Mi carro de la compra (3 productos) Espacio de trabajo Cocina Toda la casa (300 € | 2 productos) Ofertas Club Practica TO > CÓMODAS Basic Cómoda de tres cajones talian made high gloss Perouse 1 door/1 drawer bedside unit with dark putty interior. Door and drawer have push latch catches for a smooth, handle-free minimalistic look. Part of the sleek Perouse bedroom furniture range available in white and brown. IMAGEN #1 80 x 43 x 84 cm > MÁS INFORMACIÓN DEL PRODUCTO 120 € COMPARTIR ME GUSTA X Características AÑADIR A FAVORITOS AÑADIR AL CARRO Comprobar disponibilidad EMAIL - Los cajones, fáciles de abrir y cerrar, llevan topes. - Cajones muy amplios. Más espacio para guardar tus cosas. - También puede usarse de mesilla de noche. Mantenimiento Limpiar con un paño humedecido con una suave solución jabonosa. Secar con un paño seco. Información adicional Te recomendamos fijar el mueble a la pared con el herraje de seguridad que se incluye. Así evitarás que vuelque si un niño se encarama o cuelga del mismo. También te puede gustar... < IMAGEN IMAGEN IMAGEN Diferentes tipos de pared requieren diferentes herrajes. Utiliza los herrajes más adecuados para tus paredes (no se incluyen). También vistos... > < IMAGEN IMAGEN IMAGEN Vacari Pekin Basic Basic Basic Basic 69 € 110 € 80 € 120 € 120 € > 120 € Cómoda de dos cajones Cómoda de tres cajones Cómoda de dos cajones Cómoda de tres cajones Cómoda de tres cajones Cómoda de tres cajones Puede completarse con otro mobiliario de la serie BIRKELAND. Combina con otros elementos de la serie BIRKELAND. Medidas y peso del embalaje Bultos: 1 Referencia artículo: 201.902.21 Ancho: 57 cm. Fondo: 13 cm. Alto: 73 cm. Peso: 27.4 kg. Cantidad: 1 Montaje del producto INFORMACIÓN Contacto Tarjeta socio Nuestsras tiendas Descarga las instrucciones Servicio de financiación Servicio de transporte Política de devoluciones Guía de compra online Preguntas frecuentes Mapa de la web Política de privacidad | Aviso legal Ventana flotante

03. OBJETIVOS MAPA DE CONTENIDO DE LA WEB Después del análisis realizado de la web Practica era necesaria una reestructuración de la organización de la misma. Ésta era demasiado plana y desequilibrada, y por eso se ha intentado añadir nuevas etiquetas y reorganizar las antiguas. Antiguo Home productos tienda entregas club contacto inicio Todos los productos Los productos se pueden mostar ordenados por: • habitación • función De la A a la Z Catálogo Online Dormitorio Salón Camas Espacio de trabajo Sofás y sillones Multimedia Iluminación Mesas Textil Espejos Almacenamiento Iluminación Descarga de pdf Cocina Toda la casa Club Practica Ofertas Almacenamiento Dormitorio Eventos Salón Accesorios Mesas Ideas decoración Esp. trabajo Sillas Almacenamiento Organización Textil Cocina Almacenamiento Foro Baño Comedor Iluminación Productos Practica Redes sociales Jardín Textil Niños Enlaces especiales de la página Pie de página Redes sociales Newsletter Información Recursivo Mis favoritos Contacto Tarjeta socio Nuestsras tiendas Mi carro de la compra Servicio de financiación Búsqueda mi cuenta · Productos · Tienda · Entregas · Club > Contacto · Mi cuenta Propuesto · Todos los productos · Dormitorio · Salón · Espacio de trabajo · Cocina · Toda la casa · Ofertas Productos · Club Práctica · Redes sociales Contacto empresacliente · Newsletter · Información Empresa Acciones · Mis favoritos · Mi carro de la compra de búsqueda y compra · Búsqueda Política de devoluciones Servicio de transporte Guía de compra online Búsqueda avanzada Preguntas frecuentes Mapa de la web Se ha intentado mejorar las etiquetas antiguas que se caracterizaban por ser inexactas y no seguir una línea común. Dentro de los productos, se mezclaban etiquetas como “Iluminación” con “Salón” y “Otras cosas”. En el nuevo mapa los productos se han dividido por estancias. Esta nueva forma de organización de los productos hace que el usuario no tenga que recorrer un largo camino hasta llegar a un producto determinado. De esta forma, al estar los productos clasificados claramente por estancias de la casa, son más fáciles de distinguir. En el caso de no aparecer en el menú principal la estancia donde se encuentra el producto, se ha añadido la etiqueta “Toda la casa” en el que un desplegable muestra todas las secciones posibles de una casa. También el nuevo menú ofrece la posibilidad de acceder también a cualquier producto gracias a la etiqueta “Todos los productos” donde se podrá escoger la forma de visualización de estos productos, e incluso poder descargar el catálogo en pdf. También se ha añadido la etiqueta “Ofertas”, una sección que antes no aparecía en ningún sitio y era difícil de acceder. Ahora la etiqueta “Club Práctica” ocupa un espacio destacado en el menú, para así darle la importancia que debe tener este canal de comunicación entre empresa y clientes, y entre los mismos clientes. De “Club Práctica” creamos 4 subapartados que deben animar más al cliente a utilizar esta sección de la web, ya que las etiquetas son más amigables: “Eventos”, “Ideas de decoración”, “Productos Practica”, “Foro” y “Redes sociales”. En el pie de la página se ha creado la etiqueta “Información” en la que se engloban todos los servicios que puede ofrecer tanto la empresa como la web y que es posible que el usuario busque, como “Información de financiación”, “Guía de compra online” o “Contacto”. De esta manera se han eliminado etiquetas confusas del menú de navegación principal como eran “Tienda” o “Entregas”. Justo encima del menú de navegación se ha agrupado una serie de etiquetas que son más significativas para el usuario que las que antes aparecían. Se ha añadido “Mis favoritos” y se mantienen “Mi carro de la compra” y “Búsqueda”, eliminando de esta forma etiquetas como “Mi cuenta” o “Entrar” que creaban confusión.

03. OBJETIVOS WIREFRAME DE PÁGINA DETALLE (FICHA DE PRODUCTO) En este wireframe podemos observar las mejoras realizadas tanto en el menú de navegación principal  como en el pie de la página  y la sección relativa a búsquedas y compra . El problema principal de estas páginas era que su apariencia era pobre e inacabada. Se ha reestructurado la colocación del material que disponemos de cada producto, además de añadir sugerencias de navegación por otros productos con  “Puedes combinarlo con...”, “También te puede gustar...” y “También vistos...” (que marca al usuario los productos ya visitados ofreciéndole la opción de volver a visitar). Tenemos que destacar que estas etiquetas tienen un lenguaje más informal y sencillo ya que pretende ayudar al usuario tal y como haría un asesor en su compra. escribe tu búsqueda LOGO Búsqueda avanzada Mis favoritos Mi carro de la compra (3 productos) Todos los productos Dormitorio Salón Espacio de trabajo Cocina Toda la casa (300 € | 2 productos) Ofertas Club Practica > INICIO > DORMITORIO > ALMACENAMIENTO > CÓMODAS Basic Cómoda de tres cajones IMAGEN #2 IMAGEN #3 talian made high gloss Perouse 1 door/1 drawer bedside unit with dark putty interior. Door and drawer have push latch catches for a smooth, handle-free minimalistic look. Part of the sleek Perouse bedroom furniture range available in white and brown. IMAGEN #1 80 x 43 x 84 cm > MÁS INFORMACIÓN DEL PRODUCTO 120 € IMAGEN #4 ME GUSTA AÑADIR AL CARRO Comprobar disponibilidad EMAIL < COMPARTIR AÑADIR A FAVORITOS Estructurado a base de una retícula de 9 columnas se han colocado los elementos de una forma que se marquen jerarquías entre ellos. Por ejemplo, la imagen principal tiene un ancho de 4 columnas, mientras que otras imágenes secundarias pueden ser de 1 o 2 columnas. Con tal de que el contenido de la ficha sea lo más compacto posible se han utilizado carruseles de imágenes , marcando así el máximo de espacio que deben ocupar los elementos. También para ahorrar espacio con información secudaria se ha creado un botón en la descripción del producto que nos da acceso a una ventana flotante  en la que aparece más información relativa al producto. X Características - Los cajones, fáciles de abrir y cerrar, llevan topes. - Cajones muy amplios. Más espacio para guardar tus cosas. - También puede usarse de mesilla de noche. Mantenimiento Puedes combinarlo con... < IMAGEN IMAGEN IMAGEN También te puede gustar... > < IMAGEN IMAGEN IMAGEN Limpiar con un paño humedecido con una suave solución jabonosa. Secar con un paño seco. También vistos... > < IMAGEN IMAGEN Información adicional IMAGEN Basic Basic Basic Vacari Pekin Basic Basic Basic Basic 120 € 120 € 120 € 69 € 110 € 80 € 120 € 120 € > 120 € Cómoda de tres cajones Cómoda de tres cajones Cómoda de tres cajones Cómoda de dos cajones Cómoda de tres cajones Cómoda de dos cajones Cómoda de tres cajones Cómoda de tres cajones Cómoda de tres cajones Te recomendamos fijar el mueble a la pared con el herraje de seguridad que se incluye. Así evitarás que vuelque si un niño se encarama o cuelga del mismo. Diferentes tipos de pared requieren diferentes herrajes. Utiliza los herrajes más adecuados para tus paredes (no se incluyen). Puede completarse con otro mobiliario de la serie BIRKELAND. Combina con otros elementos de la serie BIRKELAND. Medidas y peso del embalaje Si quieres recibir nuestras novedades inscríbete en nuestro newsletter: escribe tu email INFORMACIÓN Contacto Tarjeta socio Nuestsras tiendas Servicio de financiación Servicio de transporte Política de devoluciones © 2012 Practica Política de privacidad | Aviso legal Mis favoritos (3 productos) Mi carro de la compra (300 € | 2 productos) 120 € COMPARTIR Guía de compra online Preguntas frecuentes Mapa de la web ME GUSTA AÑADIR A FAVORITOS AÑADIR AL CARRO Comprobar disponibilidad EMAIL Bultos: 1 Referencia artículo: 201.902.21 Ancho: 57 cm. Fondo: 13 cm. Alto: 73 cm. Peso: 27.4 kg. Cantidad: 1 Montaje del producto Descarga las instrucciones Otros nuevos elementos destacados en esta reestructuración es la utilización de “Mis favoritos”, otra forma de hacer que el usuario se implique más y se sienta más cómodo al navegar por la web. En “Mi carro de la compra” se indicará el total de productos añadidos y el total del importe. Se deberán crear iconos identificativos para estas dos acciones. Al haberse eliminado las antiguas etiquetas de “Mi cuenta” y “Entrar” en el menú de navegación principal, al hacer clic en cualquiera de los botones de “Añadir a favoritos” o “Añadir al carro” automáticamente se le pedirá al usuario que se registre o que inicie sesión en el caso que la página detecte que no lo ha hecho previamente. Respecto al pie, destacar que se ha cambiado la antigua etiqueta “Newsletter” que podría ser incomprensible para algún tipo de público por una frase más descriptiva y “amigable”: “Si quieres recibir nuestras novedades inscríbete en nuestro newsletter:”. La web se termina con una franja en la que se indica en qué año se ha actualizado la web. © 2012 Practica Política de privacidad | Aviso legal

Add a comment

Related presentations

Related pages

A Beginner’s Guide to Wireframing - Web Design Tutorials ...

A Beginner’s Guide to Wireframing ... a wireframe is also very useful in determining how the user ... plus there is a web version if you prefer to work ...
Read more

WEB.DE - E-Mail-Adresse kostenlos, FreeMail, De-Mail ...

Maps-Suche; Prospekte; Bildersuche; Staumelder; ... WEB.DE wurde mit dem „Preis Marke des Jahrhunderts“ geehrt und bietet allen Kunden einen hohen ...
Read more

Wire-frame model - Wikipedia, the free encyclopedia

A wire-frame model is a visual presentation of ... A wireframe model represents the shape of a solid object with its ... Y Z; 1: 1: 1: 1: 2: 1-1: 1: 3-1-1 ...
Read more

Website wireframe - Wikipedia, the free encyclopedia

Website wireframe A wireframe document ... layout of the proposed web page. The website wireframe connects the ... work—like flowcharts or site maps ...
Read more

Wireframe (Diseño web) - Wikipedia, la enciclopedia libre

Un wireframe para un sitio web, ... la esquematización comienza entre “diagramas de flujo de estructuras de trabajo de alto nivel o mapas de sitio y ...
Read more

Wireframe.cc - minimal wireframing tool

Wireframe.cc can help you keep your wireframes simple by offering a very limited palette of options. That applies to color palette and the ... 21 Y: 557 ...
Read more

50 Free UI and Web Design Wireframing Kits, Resources and ...

A wireframe typically has the basic elements of a Web page: header, footer, ... you’ll get a basic grid for drafting site maps or anything else that ...
Read more

Adobe Illustrator Toolbox for Web and Mobile App Designers

In this illustrator toolbox we have an extensive selection of web and mobile app UI templates, all in AI and EPS format. ... Wireframe Symbols .ai.
Read more