WEBTEC-1205 Diseño Visual Digital 2 Profesor: Mauro Laurent Obando
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”
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
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
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
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
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.
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
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
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”
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
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
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
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
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.