WEBTEC-1205 Diseño Visual Digital 2 Profesor: Mauro Laurent Obando

Presentación del tema: "WEBTEC-1205 Diseño Visual Digital 2 Profesor: Mauro Laurent Obando"— Transcripción de la presentación:

1 WEBTEC-1205 Diseño Visual Digital 2 Profesor: Mauro Laurent Obando

2 De la maqueta al diseño Más allá de colocar texto dentro de una página, el web moderno se ha preocupado en generar soluciones que prueben aumentar la experiencia de usuario A estas soluciones le llamaremos “Patrones de diseño”

3 Patrones de diseño Los patrones de diseño se refiere a una solución reusable y aplicable a problemas del mundo real En el taller de hoy, buscaremos patrones de diseño que nos ayuden a resolver problemas específicos

4 Patrones de diseño Podemos categorizar los patrones de la siguiente manera: Retroalimentación (formularios) Navegación Presentación Manejando datos Imágenes Tabulares Gráficos Otros tipos

5 Generando un patrón de diseño
Tener un problema a resolver. Siempre hay una forma de mejorar lo que ya hay. Hay que tener en cuenta que los diferentes usuarios se comportan distinto al mismo control Investigación. Hay que sondear el como otras personas resolvieron el problema. Si es algo nuevo, es importante tomarle la opinión al usuario del como quiere ver las cosas

6 Generando un patrón de diseño
Planear la solución. Crear algo sin antes planearlo esta condenado a fallar a la primera. Conscientemente hay que planear en base en lo investigado Construcción. Después de aprobado el diseño más eficiente, es hora de construirlo a nivel gráfico. Cualquier interacción o estado de los controles deben ser explícitamente anotados

7 Lanzamiento o puesta en marcha.
Generando un patrón de diseño Probar. Es más que convencerse de que la construcción del patrón es a prueba de balas. Es preguntarle a los demás que piensan y prever cualquier uso inadecuado Lanzamiento o puesta en marcha.

8 Caso de estudio de un patrón
Problema El usuario necesita saber los detalles de un producto de una tienda en línea para poder llegar a una decisión entre comprar el producto o pedir asistencia de ventas Uso - Tiene que desplegarse la información de un producto de la tienda en línea - Tiene que desplegarse en pantalla un producto que existe físicamente y esta listo para ser adquirido

9 Caso de estudio de un patrón
Problema El usuario necesita saber los detalles de un producto de una tienda en línea para poder llegar a una decisión entre comprar el producto o pedir asistencia de ventas Uso - Tiene que desplegarse la información de un producto de la tienda en línea - Tiene que desplegarse en pantalla un producto que existe físicamente y esta listo para ser adquirido

10 Caso de estudio de un patrón
El plan En una investigación sobre tiendas en línea, se llego a la conclusión que los siguientes elementos siempre estuvieron presentes: - Título del producto - Un gráfico principal representando al producto - Precio - Los botones: “Añadir a carrito”, “Hacer pedido” y “Comprar”

11 Caso de estudio de un patrón
Además se incluyeron estos elementos : Disponibilidad Formulario para especificar cantidad Descripción del producto Especificaciones / detalles Etiqueta (“best seller, ganga, etc”) Precio de oferta Imágenes de los detalles Variantes del producto (tamaño, color, etc) Fotos de esas variantes

12 Caso de estudio de un patrón
El raciocinio de la solución Convertir a usuarios interesados en los productos en clientes debe ser el mayor interés de la solución. Se diseñó la página de producto con el propósito de persuadir a los usuarios en tomar una decisión de compra de uno o mas productos que la página ofrece

13 Caso de estudio de un patrón
El raciocinio de la solución Convertir a usuarios interesados en los productos en clientes debe ser el mayor interés de la solución. Se diseñó la página de producto con el propósito de persuadir a los usuarios en tomar una decisión de compra de uno o mas productos que la página ofrece

14 Caso de estudio de un patrón
El raciocinio de la solución Convertir a usuarios interesados en los productos en clientes debe ser el mayor interés de la solución. Se diseñó la página de producto con el propósito de persuadir a los usuarios en tomar una decisión de compra de uno o mas productos que la página ofrece

15 Práctica de patrones de diseño
Problema En un formulario de reservación, el usuario necesita tener disponibles las vista de las habitaciones disponibles y poder generar un rango de fechas para la reservación. Además, el usuario puede seleccionar entre varios servicios disponibles en el hotel, como tours y comidas adicionales. También se pueden visualizar las ofertas disponibles.