2. Prototipado
Jon Parro
Representación web
Definición y ubicación de los elemento
Características
Construcción rápida y ágil.
Evolución proceso iterativo.
Unión sugiere, propone, cuestiona.
Reducción distancia objetivo del negocio y necesidad del usuario.
¿Qué es?
3. Prototipado
Jon Parro
¿Por qué prototipar?
Reducción de incertidumbre
Generación de ideas
Abstracción del diseño
Comunicación más fluida equipo-cliente
Validación de requerimientos
Reducción de tiempo y costes
4. Prototipado
Jon Parro
Fases iniciales Detección problemas Mayor facilidad y menor coste
Proceso evolutivo Feedback Aumento de fidelidad
1. Papel
2. Wireframe de baja y alta fidelidad
3. Diseño gráfico
4. Maqueta navegable, enfocada a desarrollo
Ciclo de vida en un proyecto
5. Prototipado
Jon Parro
Definición estructura espacial
Poco parecido al resultado final
Validación conceptos generales
Apariencia
Información
Estructura espacial
Interacción
Wireframe de baja fidelidad
6. Prototipado
Jon Parro
Wireframe de alta fidelidad
Estructura espacial totalmente definida
Aumenta la fidelidad
Aumenta la interacción
Apariencia
Información
Estructura espacial
Interacción
8. Prototipado
Jon Parro
Maqueta
Maqueta navegable enfocada a desarrollo
Incorpora el xhtml + css + accesibilidad
Maqueta y el producto final idénticos
Apariencia
Información
Estructura espacial
Interacción
¿Qué es?Consiste en crear prototipos realizando bocetos donde se representa cómo se verá una web o de cualquier producto interactivo (dispositivo móvil, cajero automático, aplicación).
En estos bocetos se muestra de forma clara y sencilla donde estarán ubicados los elementos que componen una determinada página. Por ejemplo: cabecera, menú, imágenes, textos o formato de formularios.
Reducción de incertidumbre.
Generación de ideas.
Abstracción del diseño para centrarnos en el contenido.
Comunicación más fluida entre equipo y cliente.
Validación de requerimientos.
Reducción de tiempo y costes.
En fases iniciales del proyecto. Cuanto antes mejor, más fácil y menos coste tendrá solucionar los problemas.
Proceso evolutivo en el que se va recibiendo feedback y aumentando progresivamente la fidelidad:
En papel.
Wireframe de baja y alta fidelidad.
Diseño gráfico/visual.
Maqueta navegable y enfocada a desarrollo (xhtml + css + accesibilidad).
Se define la estructura espacial.
La fidelidad está muy lejos del producto final.
Permite validar conceptos muy generales.
La estructura espacial ya está totalmente definida.
La fidelidad va en aumento.
Aumenta la interacción. Pudiendo generar wireframes navegables no enfocados a desarrollo.
El foco se sitúa en el diseño gráfico.
La fidelidad visual es máxima.
Carece de interacción.
Se crea una maqueta navegable enfocada a desarrollo.
Incorpora el xhtml + css + accesibilidad, válido según estándares.
El aspecto de la maqueta y el producto final tiene que ser exactamente el mismo.
