Los prototipos conectan la estructura y arquitectura con la superficie de un sitio web o aplicación móvil. Son representaciones visuales de una interfase que se utilizan para comunicar los detalles y lograr que todos los miembros de un proyecto tengan un entendimiento mutuo en lo que se está trabajando.

1. PROTOTIPAR
PARA EMPRENDEDORES, DISEÑADORES, PROJECT MANAGERS,
INGENIEROS Y TODA PERSONA QUE PARTICIPE EN UN PROYECTO.
TU PROYECTO
CÓMO
EXITOSAMENTE

2. IxDA es una asociación creada para difundir la disciplina del Diseño de
Interacción, que conforma (junto a usabilidad, arquitectura de la
información y accesibilidad, entre otras) el ecosistema del Diseño de
Experiencias del Usuario.

3. Queremos mejorar la educación y divulgación de UX en español.
Queremos llegar a un nuevo estándar profesional.
Y queremos construirlo colaborativamente.

4. ¿Qué es lo primero que hacemos
para resolver el problema?
PREGUNTA ABIERTA

5. LO QUE PENSÓ EL DISEÑADOR
CUANDO LO VIÓ...

7. LO QUE PENSÓ EL DEVELOPER
CUANDO LO VIÓ...

9. LO QUE PENSÓ EL CLIENTE
CUANDO LO VIÓ...

10. ME ENCANTA!
¡Con esta idea conquistamos el mundo!

11. LO QUE PENSÓ EL USUARIO REAL
CUANDO LO VIÓ...

13. ¿Y AHORA?

14. Necesidad de que todos estemos
“en la misma página”
“Me alegra que todos estemos de acuerdo”
Foto: http://www.agileproductdesign.com/ (Jeff Patton)

15. EL PROTOTIPO TAMBIÉN NOS PERMITE...
- Ahorrar tiempos de desarrollo.
- Evitar malentendidos dentro del mismo equipo.
- Validar nuestras ideas (iteraciones):
técnicamente y también en relación a los
usuarios.

16. Conocer más a nuestros usuarios
(tests con usuarios)
Foto: https://www.interaction-design.org/ux-daily/484/problem-users-in-user-testing-shy-people

18. - ¿Quién interactuará con el prototipo?
- ¿Qué es lo que esperás aprender?
- ¿Cuánto tiempo tenés para crearlo?
¿CÓMO EMPEZAR A PROTOTIPAR?
Contestando las siguientes preguntas:

19. ELEMENTOS DEL
UX
Diseño visual es la última de las etapas.
Jesse James Garrett - Diseñador de experiencia de usuario, autor de
“Los elementos de la experiencia de usuario”

20. PROCESO UX
Jeff Gothelf - Lean UX Evangelist, autor de “Lean UX”
Concepto Prototipo
Validar
internamente
Testear
externamente
Aprender de
la conducta
del usuario
Iterar
Tests de
usabilidad
Jefe
Clientes

21. ¿Quién usa los prototipos?
PREGUNTA ABIERTA

22. Todos los que trabajan en un
producto o proyecto,
sin importar el rol que cumplen
Se trata de trabajar en equipo.

23. Diseñadores UX, de
interacción y arquitectos de
información
Usan los prototipos para mostrar los flujos del
usuario entre las distintas vistas o páginas.

24. Definir las historias de usuario
Foto: http://blog.twinenginelabs.com/2013/09/tools-for-lean-ux-teams.html#.VVvrhJNVikq

25. Foto de: Andrew Brennan

26. - Utilizan los wireframes para tener una idea de cómo se
va a comportar el sistema.
- Le da al desarrollador una imagen clara de los
elementos que deberá considerar al trabajar en el
código y modelo de datos.
- Identificar riesgos y posibles problemas.
- Explorar la creatividad.
UI Developer & Desarrollador

27. Analistas de negocios &
dueños del proyecto
- Usan los prototipos para mostrar visualmente las reglas
del negocio y los requerimientos de interacción de una
pantalla.
- Deciden a qué darle más importancia: estructura,
contenido, herencia de la información, funcionalidad o
conducta.
- Se aseguran si el proyecto cumple con los
requerimientos y objetivos.

28. ESTILO DEL WIREFRAME
NIVELES DE FIDELIDAD

29. DIAGRAMA DE BLOQUE
Provee la información más básica y esencial: tipos de
contenido, funcionalidad
Foto: Winie Lim - The guide to wireframing

30. BLOQUES EN ESCALA DE GRISES
Hace uso de la escala de grises para enfatizar ciertos elementos
del layout sin necesidad de definir colores específicos aún.
Foto: Winie Lim, Paul Armstrong, Eu Diaz - The guide to wireframing

31. TEXTO DE “ALTA
FIDELIDAD”
El wireframe se empieza a ver más
parecido a la realidad sin
necesidad aún de implementar
estilos de diseño concretos.
Foto: https://www.behance.net/gallery/Park-Bond/2181403

32. COLOR DE “ALTA FIDELIDAD”
Otra forma de ir acercándonos cada vez más al modelo real
sin necesidad de entrar en detalles específicos.
Foto: UX Porn by UXPin - The guide to wireframing

33. INTERACCIONES DE “ALTA FIDELIDAD”
Permite visualizar comportamientos e interacciones
concretas. Permite evaluar flujos de navegación.
Foto: https://proto.io/en/demos/

34. EL CASO DE SALESFORCE
http://sfdc-styleguide.herokuapp.com/assets/S1AppGuidelines.pdf

35. ¿CUÁNDO INVOLUCRAMOS AL
USUARIO REAL?
ITERACIONES - TEST EXTERNO

36. La idea es presentarle un producto/prototipo pulido
que se aproxime en la mayor medida posible al
producto final.
Queremos ver reacciones.
TESTEAR NAVEGABILIDAD - USABILIDAD - REACCIONES

37. LLEGÓ LA HORA DEL BREAK!

38. HERRAMIENTAS
¿CÓMO ARMO EL WIREFRAME/PROTOTIPO?

39. SKETCHING Y PROTOTIPO PAPEL

40. ● Se puede crear en una hora o menos.
● Se puede reubicar el contenido fácilmente.
● Es barato.
● Es divertido.
SKETCHING Y PROTOTIPO PAPEL

41. Foto: Taller de Prototipado Rápido - IxDA Mendoza

42. - Libre.
- Prototipos funcionales en el navegador.
- Prototipos funcionales en iPad.
- Prototipos funcionales en dispositivos móviles.

43. SOFTWARE DE DISEÑO

44. Adobe Illustrator - Sketch - Adobe Photoshop
Siempre basándonos en la grilla del framework que estemos
utilizando a nivel de Front-End
Foto: Marc Decerle - The guide to wireframing

45. INTERACTIVO & “CLICKEABLE”
Prototipo Interactivo

46. AXURE - Servicio pago
- Desde el boceto al prototipo detallado.

47. - 1 proyecto gratis
- Sincronización con Sketch y Dropbox

48. - Prueba gratis (15 días)
- Animaciones / elementos UI
- Feedback

49. Actualmente existe una gran variedad de
productos/herramientas que nos facilitan el
proceso de prototipado:

50. Gráfico: Enterprise UX - http://enterpriseux.net/schedule/friday-may-15/workshop-4/
HERRAMIENTAS
DE PROTOTIPADO
AnimaciónControles de UI
incorporados
Reconocimiento
ADV de gestos
Importa bocetos Con gifs Web móvil
Web móvilAlgunosAlgunos
Importa bocetos
Importa bocetos Web móvil
Web móvil

51. ENTONCES...
¿CÓMO ARMAMOS UN PROTOTIPO EXITOSO?

52. SE TRATA DE
TRABAJO EN EQUIPO :P

53. Foto: https://www.flickr.com/photos/yamagatacamille/4799648425

54. NO VAS A APRENDER
UX SENTADO EN TU
ESCRITORIO LEYENDO...
¡ES HORA DE EMPEZAR A
IMPLEMENTARLO!

55. Algunos recursos útiles y
para inspirarte...
uxporn.uxpin.com
mockupstogo.net
flickr.com/groups/ilovewireframes
wireframeshowcase.com
webwithoutwords.com
patterntap.com
uxarchive.com
pinterest.com/search/pins/?q=wireframes
android-app-patterns.com
mobile-patterns.com
Si conocés otros recursos compartilos en nuestra comunidad! facebook.com/ixdamza
gv.com/sprint proceso completo de diseño
y desarrollo(Inglés)
uxawards
http://awards.ixda.org/

56. Silvana Corvalán
silvanaeleonora@gmail.com
@sileleo
Analía Basualdo
analiabasualdo@gmail.com
@anagraphics
www.ixdamza.com.ar
¡GRACIAS!