Qué son y para que sirven los prototipos en UX. Tipos de prototipado, técnicas y herramientas.

1. Prototipos
2014
1
gemafuentesanchez@gmail.com

2. Prototipos
2014gemafuentesanchez@gmail.com
2

3. Prototipos
2014gemafuentesanchez@gmail.com
3
Representación esquemática que muestra
el contenido y comportamiento de un sitio web.
Herramienta de comunicación, discusión y test.
Focalizada en la AI
Permite testar e introducir mejoras en fases tempranas.

4. C O M U N I C A C I Ó N
D I S E Ñ O
T E S T
gemafuentesanchez@gmail.com 2014
4
Objetivos

5. Comunicación
2014gemafuentesanchez@gmail.com
5

6. Comunicación
2014gemafuentesanchez@gmail.com
6
Entre todo el equipo
Con los clientes
Ideas abstractas sean concretas, visibles y testables.
Fomentan la iteratividad.
Mejoran la calidad, claridad y la completitud de las
especificaciones funcionales del sistema.

7. Diseño / desarrollo
2014gemafuentesanchez@gmail.com
7

8. Diseño y desarrollo
2014gemafuentesanchez@gmail.com
8
Definir funcionalidad, estructura y contenidos antes de
empezar a programar y de crear el diseño visual.
Dan soporte a los diseñadores a la hora de escoger entre
varias alternativas.
Permiten a los diseñadores explorar diversos conceptos
del diseño antes de establecer los definitivos

9. Diseño y desarrollo
2014gemafuentesanchez@gmail.com
9
Dispositivos

10. Test
2014gemafuentesanchez@gmail.com
10

11. Test
2014gemafuentesanchez@gmail.com
11
Integrar activamente a los usuarios en el desarrollo.
Evaluar el sistema desde las primeras fases del
desarrollo (+ barato).

12. S K E T C H I N G
W I R E F R A M E S
M O K U P S
S T O R Y B O A R D
P R O T O T I P O F U N C I O N A L
gemafuentesanchez@gmail.com 2014
12
Métodos de trabajo

13. Sketching
2014gemafuentesanchez@gmail.com
13

14. Sketching
2014gemafuentesanchez@gmail.com
14

15. Sketching
2014gemafuentesanchez@gmail.com
15
Boceto rápido e informal
que se realiza en papel
para transmitir una idea o concepto
con rapidez y claridad.

16. Wireframe
2014gemafuentesanchez@gmail.com
16

17. Wireframe
2014gemafuentesanchez@gmail.com
17

18. Wireframe
2014gemafuentesanchez@gmail.com
18
Esquema visual de una página web,
definiendo al detalle el contenido y estructura.

19. ¿Qué información debe contener un Wireframe?
2014gemafuentesanchez@gmail.com
19
• Inventario de contenido.
• Elementos de la página.
• Etiquetado.
• Layout.
• Comportamiento.

20. Consejos
2014gemafuentesanchez@gmail.com
20
• No utilizar color (excepto links)
• Textos (especificar caracteres max/min, que sea
legible)
• Poner el foco en la estabilidad y jerarquía
• RIA
• Explicarlos en persona

21. StoryBoard
2014gemafuentesanchez@gmail.com
21

22. StoryBoard
2014gemafuentesanchez@gmail.com
22
Secuencia de wireframes
que muestran cómo se realiza una tarea.

23. MockUp
2014gemafuentesanchez@gmail.com
23

24. MockUp
2014gemafuentesanchez@gmail.com
24

25. MockUp
2014gemafuentesanchez@gmail.com
25
Prototipo de Alta Fidelidad destinado a
comunicar/testar un aspecto concreto de la
aplicación (diseño / funcionalidad)

26. Prototipo funcional
2014gemafuentesanchez@gmail.com
26

27. Prototipo funcional
2014gemafuentesanchez@gmail.com
27
Puede ser de alta o baja fidelidad
pero su objetivo es mostrar /testar
la funcionalidad del sistema

28. Alta fidelidad
2014gemafuentesanchez@gmail.com
28

29. S O F T W A R E
P L A N T I L L A S
gemafuentesanchez@gmail.com 2014
29
Herramientas

30. Software
2014gemafuentesanchez@gmail.com
30
Los profesionales
• www.axure.com
• www.omnigroup.com/omniGraffle/
Los apañaos (con versión gratis)
• balsamiq.com/
• https://moqups.com/
• http://www.gliffy.com/
• http://www.mockflow.com/
• https://app.uxpin.com/
Específicos
• https://popapp.in/ (móvil)
• http://stripgenerator.com/strip/create (storyboards)

31. Plantillas
2014gemafuentesanchez@gmail.com
31
• http://konigi.com/tools/graph-paper
• http://speckyboy.com/2013/04/29/30-wireframe-
templates-and-toolkits/
• http://www.hachemuda.com/2012/01/5-cuadernos-de-
papel-perfectos-para-prototipado-diseno-web-y-de-
interfaces-de-usuario/
• http://developer.yahoo.com/ypatterns/about/stencils/

32. gemafuentesanchez@gmail.com 2014
32
Bibliografía
W W W

33. www
2014gemafuentesanchez@gmail.com
33
Artículos
• http://www.sidar.org/recur/desdi/traduc/es/visitable/maner/Prototipado.htm
• http://olgacarreras.blogspot.com.es/2007/02/wireframes.html
• http://designshack.net/articles/inspiration/close-photoshop-and-grab-a-pencil-the-lost-art-
of-thumbnail-sketches/
• http://www.slideshare.net/rots/taller-de-wireframes-5540204
Recursos
• http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/
• http://wireframes.tumblr.com/
• http://wireframes.linowski.ca/
Ejemplos
• http://www.jeff.io/posts/sketches-wireframes-css
Un Juego
• http://dedesigntheweb.com/