No es solo hacer bocetos, wireframes o prototipos, es importante saber para que sirven y cual es el proceso.

1. Wireframes & Prototipos
¿Solo una cuestión de organización?
20 de noviembre de 2015
Medellín Colombia

2. Herlency Muñoz García
@herlency
• Analista Desarrolladora
• Diseñadora Gráfica
• Consultora en Experiencia de Usuario
• Líder del área de Diseño Gráfico de Ceiba Software

3. ¿Quién usa tus aplicaciones?
El inicio

4. “Experiencias de usuario
plenas y satisfactorias”
Objetivo
Experiencia de Usuario, Principios y Métodos (Yusef Hassan Montero)

5. Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación
Investigación
Diseño
Prototipado
Evaluación Implementación Monitorización

6. Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación
Investigación
Diseño
Prototipo
Evaluación Implementación Monitorización
Necesidades, motivaciones, características, hábitos, modelo mental, actividades…Personas
objetivo.
Análisis competitivo, productos similares con audiencias similares.

7. Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación
Investigación
Diseño
Prototipado
Evaluación Implementación Monitorización
Decisiones de diseño a partir de lo general arquitectura de información y diseño de
interacción. Dimensiones más específicas. Diseño gráfico en detalle y micro-interacciones
Decisiones documentadas con objetivos de evaluación.

8. Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación
Investigación
Diseño
Prototipado Evaluación Implementación Monitorización
Las decisiones se ponen a prueba. Métodos cualitativos y/o cuantitativos

9. Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación
Investigación
Diseño
Prototipado
Evaluación Implementación Monitorización
Puesta en producción. Producto con calidad

10. Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación
Investigación
Diseño
Prototipado
Evaluación Implementación Monitorización
Se estudia el uso que hacen los usuarios del producto, con el fin de identificar
oportunidades.

11. Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación
Investigación
Diseño
Prototipado
Evaluación Implementación Monitorización

12. Wireframes y Prototipos
Wireframes
Prototipos

13. Wireframes y Prototipos
Arquitecto de información
• Identifica los objetivos del
proyecto
• Identifica las necesidades de los
usuarios
• Especifica las funcionalidades y
requerimientos de la aplicación
web
• Define y diseña los sistemas de
navegación, organización,
etiquetado y búsqueda
• Prototipa
Jesse James Garrett

14. Por dónde empezar

15. ¿Protipar?
1. Equipo centrado en contenido y diseño de interacción.
2. Complemento valioso para aterrizar ideas, hablar el mismo
idioma.
3. Es mejor que tener un documento.
4. Modificación rápida, menos costosa.
5. Permite validación temprana, pruebas con usuarios.
Wireframes y Prototipos
http://www.sidar.org/recur/desdi/traduc/es/visitable/maner/Prototipado.htm

16. Planos / Diagramas
Los planos, son diagramas de organización y funcionamiento,
que se suelen denominar blueprint, diagramas de contenido o
flujo, o mapa web.
“A la hora de realizar la diagramación de una
aplicación web lo más importante es que sea
comprensible y refleje con claridad la estructura, el
flujo de navegación y la relación entre los
elementos.”
Olga Carreras
http://olgacarreras.blogspot.com.co/
Wireframes y Prototipos

17. Wireframes y Prototipos
Planos / Diagramas
Definir Vocabulario visual
http://www.jjg.net/ia/visvocab/spanish.html
horizontal gluedot
is attached to the end of this arrow
vertical gluedot
is attached to the end of this arrow
Jesse James Garrett

18. Wireframes y Prototipos
Planos / Diagramas
Definir Vocabulario visual
http://www.nosolousabilidad.com/articulos/diagramacion.htm
Ronda León

19. Maquetas / Diagramas de presentación (Baja Fidelidad)
Wireframes y Prototipos
Prototipos de baja fidelidad
Olga Carreras
Wireframe

20. Wireframes y Prototipos
https://paulvb69.wordpress.com/2009/10/20/hotelclub-%E2%80%93-working-with-wire-frames/
Wireframes

21. Maquetas / Diagramas de presentación
Wireframes y Prototipos
• StoryBoard
• StoryBoard Navegacional
• Wireflows
• Thumbnail Sketches
Olga Carreras

22. Maquetas / Diagramas de presentación (Alta Fidelidad)
Wireframes y Prototipos
Prototipo de Alta Fidelidad (también llamados maqueta,
mockUp o prototipo funcional), con los que se representan
aspectos más precisos. Sirven, por ejemplo, para detallar
el proceso interactivo global de una o varias tareas
concretas. Son prototipos o maquetas dinámicas,
normalmente en (X)HTML, que simulan o tienen
implementadas partes del sistema final a desarrollar.
Olga Carreras

23. Prototipos
Locomote—next level paper prototyping.
https://vimeo.com/44564507
TeamArasunu_Healty Check
https://vimeo.com/145164911

24. Herlency Muñoz García
Consultora en Experiencia de Usuario
Wireframes y Prototipos
@herlency