Prototipos y wireframes en el diseño de interacción
•
32 recomendaciones•19,964 vistas
Procesos de prototipado para explorar soluciones de diseño y cómo comunicarlas efectivamente. http://www.ixda.com.ar/eventos/prototipos-wireframes-diseno-de-interaccion/ * ¿Qué es un prototipo? * ¿Por qué prototipar? * Ideación vs. evaluación. Iteración. Pensar en papel. * Insumos y competencias. ¿Qué necesito? * Tipos de prototipo, aplicaciones y ejemplos. * Bocetos, wireframes, pruebas de concepto, pilotos, simulaciones. * ¿Qué muestro, y cómo? Elección del tipo de prototipo adecuado. * Cómo encarar la hoja en blanco * Consejos. Errores comunes.
Denunciar
Compartir
Presentaciones relacionadas
Más contenido relacionado
Destacado
Destacado (19)
Último
Último (16)
Prototipos y wireframes en el diseño de interacción
- 1. PROTOTIPOS Y WIREFRAMES EN EL DISEÑO DE INTERACCIÓN Manuel Razzari, José Allona 2014 – Primera Jornada Abierta de UXD, Escuela Superior Técnica 2009 – Seminario de IxDA Buenos Aires, Microsoft Argentina
- 2. SUMARIO ¿Qué es un prototipo? ¿Por qué prototipar? Competencias. ¿Qué necesito? Tipos de prototipo, aplicaciones, y ejemplos Elección del prototipo adecuado Cómo encarar la hoja en blanco Consejos y errores comunes.
- 3. ¿QUÉ ES UN PROTOTIPO?
- 12. El prototipo es una herramienta que le permite a los diseñadores explorar, comunicar y evaluar sus ideas.
- 13. IDEACIÓN (EXPLORACIÓN) El prototipado es un proceso iterativo que externaliza las ideas del diseñador y le permite explorar y reflexionar sobre ellas.
- 14. El prototipo es un medio para que el diseñador dialogue sobre sus ideas. COMUNICACIÓN
- 15. El prototipo es la representación de una idea que puede ser puesta a prueba en un contexto. EVALUACIÓN
- 16. IDEACIÓN VS EVALUACIÓN El prototipo no para probar una solución sino para descubrir problemas, o para explorar nuevas direcciones.
- 17. IDEACIÓN “Externalizar las ideas para que el mundo pueda contestarnos” Bill Buxton, Sketching the user experience http://amzn.com/0123740371
- 19. ITERACIÓN Bill Buxton, Sketching the user experience http://amzn.com/0123740371
- 20. ITERACIÓN Bill Buxton, Sketching the user experience http://amzn.com/0123740371
- 21. ¿DE QUÉ ESTÁ HECHO UN PROTOTIPO?
- 22. Youn-Kyung Lim Creative Interaction Design Lab Youn-Kyng Lim, Anatomy of prototypes, ACM TOCHI, http://goo.gl/igcGEj
- 23. “Prototipar es una actividad para crear una manifestación que, en su forma más simple, filtre los atributos en que los diseñadores están interesados, sin distorsionar el entendimiento del todo.”
- 25. MATERIAL
- 26. ALCANCE
- 27. FIDELIDAD
- 28. PROTOTIPO COMO FILTRO Apariencia Información Interacción Estructura espacial Funcionalidad
- 29. APARIENCIA
- 30. INFORMACIÓN
- 31. INTERACCIÓN
- 33. FUNCIONALIDAD
- 34. PRINCIPIO DE ECONOMÍA “El mejor prototipo es el que de forma más sencilla y eficiente hace visibles y medibles las posibilidades de una idea.”
- 35. TIPOS DE PROTOTIPO En papel Wireframe (baja y alta fidelidad) Diseño visual Prueba de concepto Pilotos Simulaciones
- 36. PROTOTIPO EN PAPEL Muestro la estructura espacial, la funcionalidad, la interactividad. La fidelidad está muy lejos del producto final, y esto lo hace muy atractivo para opinar, para coolaborar, para probar rápidamente conceptos generales. MATERIAL: PAPEL ALCANCE: APARIENCIA INFORMACION ESTRUCTURA ESPACIAL INTERACCION FUNCIONALIDAD
- 37. WIREFRAME DE BAJA FIDELIDAD Qué muestro: estructura espacial, a grandes rasgos cuál es el contenido Cómo lo muestro: en este caso una sola pantalla, con poco detalle, para empezar a ver de qué estamos hablando. MATERIAL: VISIO ALCANCE: APARIENCIA INFORMACION ESTRUCTURA ESPACIAL INTERACCION FUNCIONALIDAD
- 38. WIREFRAME DE ALTA FIDELIDAD Muestro información, estructura, funcionalidad, y un poco de interactividad. Todo esto me cambia el cómo lo muestro: es una pantalla con alto nivel de detalle. MATERIAL: VISIO ALCANCE: APARIENCIA INFORMACION ESTRUCTURA ESPACIAL INTERACCION FUNCIONALIDAD
- 39. ESCENARIO MATERIAL: PHOTOSHOP ALCANCE: APARIENCIA INFORMACION ESTRUCTURA ESPACIAL INTERACCION FUNCIONALIDAD
- 40. REFERENCIA DE ESTILO El lado B del wireframe. Foco total en el diseño visual. El resto puede ser simulado. Mediante colores, tipografías y elementos de interfaz, define la dirección de la identidad visual. MATERIAL: PHOTOSHOP ALCANCE: APARIENCIA INFORMACION ESTRUCTURA ESPACIAL INTERACCION FUNCIONALIDAD http://styletil.es/
- 41. DISEÑO VISUAL Ya tenemos altísima fidelidad en la apariencia, se refinan temas que ya se vieron antes en el proceso, de estrucutra espacial, feedback visual de la interacción. Pero el foco es en lo visual. MATERIAL: PHOTOSHOP ALCANCE: APARIENCIA INFORMACION ESTRUCTURA ESPACIAL INTERACCION FUNCIONALIDAD
- 42. COMPETENCIAS Conocer las reglas y convenciones del medio para el que trabajo. La capacidad de implementar los atributos que nos interesa explorar.
- 43. CONSEJOS
- 44. EMPEZAR EN PAPEL Se puede cambiar rápidamente. Se puede criticar, porque no parece final. Se presta a jugar, a explorar. Sugiere, propone, cuestiona. Menos distancia entre la idea y la representación.
- 45. EMPEZAR EN PAPELITOS Trabajar en servilletas, en pequeños blocs, nos crea restricciones que nos ayudan a focalizarnos en la idea global y a generar soluciones simples.
- 46. COLGAR EN LA PARED
- 47. COLGAR EN LA PARED
- 49. APARIENCIA Que no se te vaya la mano
- 50. MANTENIBILIDAD Usar plantillas, header y footer. Mantener un historial de revisiones o “log”.
- 51. EL PROTOTIPO NO ES FINAL!
- 52. FOCO No pedirle demasiado al prototipo… · Que levante y valide requerimientos · Que genere ideas · Que comunique al equipo · Que se testee con usuarios Opción: focalizar las reuniones
Notas del editor
- .