Este documento habla sobre el diseño de interacción y patrones de diseño. Explica que el diseño de interacción facilita las interacciones entre personas mediante productos y servicios. Define los patrones de diseño como soluciones comunes a problemas recurrentes. Presenta ejemplos de patrones como pestañas, autocompletar y modales. Finalmente, destaca la importancia de crear prototipos para probar ideas antes de desarrollar productos.

2. APRENDIENDO A DISEÑAR PARA MEDIOS INTERACTIVOS

3. Eugenia Casabona
@eugecas
Líder de UX en almundo.com
---
ecasabona@gmail.com

4. Con el apoyo de
Este obra está bajo una licencia de
Creative Commons Reconocimiento 4.0 Internacional
DISEÑO DE
INTERACCIÓN

5. Con el apoyo de
Este obra está bajo una licencia de
Creative Commons Reconocimiento 4.0 Internacional
El diseño de interacción es el arte de
facilitar las interacciones entre las
personas mediante productos y servicios.
Dan Saffer - Designing for Interaction

6. Con el apoyo de
Este obra está bajo una licencia de
Creative Commons Reconocimiento 4.0 Internacional
PATRONES
DE DISEÑO

7. DEFINICIÓN
Son la base para la búsqueda de soluciones a problemas
comunes en el desarrollo de software y otros ámbitos referentes
al diseño de interacción o interfaces.
Fuente: https://es.wikipedia.org/wiki/Patr%C3%B3n_de_dise%C3%B1o

8. CÓMO IDENTIFICAMOS
UN PATRÓN

9. PATRONES
Para que una solución sea considerada un patrón debe poseer
ciertas características. Una de ellas es que debe haber
comprobado su efectividad resolviendo problemas similares en
ocasiones anteriores. Otra es que debe ser reutilizable, lo que
significa que es aplicable a diferentes problemas de diseño en
distintas circunstancias.

10. EN SÍNTESIS….

11. Se trata de
NO
reinventar la
rueda

12. Los usuarios pasan la mayor parte de
su tiempo en otros sitios. Esto significa
que ellos prefieren que tu sitio
funcione igual que los sitios que ya
conocen.
Jacob Nielsen - NNgroup

13. ALGUNOS EJEMPLOS

14. TABS

15. AUTOCOMPLETE

16. MODAL

17. PESTAÑAS
Fuente: Diseñando Apps para Móviles - Javier Cuello y José Vittone

18. LISTAS
Fuente: Diseñando Apps para Móviles - Javier Cuello y José Vittone

19. LISTAS DE EDICION
Fuente: Diseñando Apps para Móviles - Javier Cuello y José Vittone

20. MENÚ DE CAJÓN
Fuente: Diseñando Apps para Móviles - Javier Cuello y José Vittone

21. ACCIONES
Fuente: Diseñando Apps para Móviles - Javier Cuello y José Vittone

22. MATERIAL DESIGN

23. IOS

24. RECURSOS
http://ui-patterns.com/patterns
http://patternry.com/patterns/
http://zurb.com/patterntap
http://www.welie.com/patterns/index.php
https://developer.yahoo.com/ypatterns/
http://www.web-patterns.net/
http://www.smileycat.com/category/elements-of-design/
https://www.flickr.com/photos/factoryjoe/collections/72157600001823120/
http://unitid.nl/androidpatterns/
https://developer.android.com/design/patterns/new.html

25. CÓMO DISEÑAMOS
INTERACCIONES

26. CREANDO PROTOTIPOS

27. Es una versión
preliminar de un diseño.
PROTOTIPO

28. Permiten explorar
nuestras ideas antes de
invertir tiempo y dinero
en el desarrollo.

29. PARA PODER FALLAR BARATO

30. Ya que no hay nada más barato que fallar rápido
y aprender del proceso

31. SKETCH
Estadíos / Evolución de un prototipo
WIREFRAME MOCK-UP DEVELOP

32. SKETCH - Es la primer bajada visual de la idea.

33. WIREFRAME - Muestra la AI y el IXD.

34. MOCK UP - Es el diseño final

35. PROTOTIPAMOS PARA
- Mostrar una idea al equipo
- Definir la arquitectura de la
información
- Definir niveles de jerarquía
- Crear el diseño de interacción
- Hacer pruebas con usuarios
- Crear el diseño visual

36. FIDELIDAD DE UN PROTOTIPO
¿ALTA O BAJA?

38. TÉCNICAS Y
HERRAMIENTAS

39. LÁPIZ Y
PAPEL

41. BALSAMIQ

42. AXURE

43. INVISION
MARVEL

44. HERRAMIENTAS
http://www.cooper.com/prototyping-tools
http://www.campusmvp.es/recursos/post/Herramientas-de-proto
tipado-de-aplicaciones-Web.aspx

45. RECURSOS PARA STORYBOARD

51. ¿PREGUNTAS?

52. Seguinos en nuestra comunidad local :)
Se entregarán certificados de asistencia a aquellos que realicen todos los talleres
GRACIAS!
facebook.com/ixdalaplata
@ixdalaplata
ixdalaplata

53. 9ª edição
09, 10 e 11
DE NOVEMBRO DE 2017
Centro de Eventos Governador
Luiz Henrique da Silveira
O maior e mais importante
evento de design de interação
e experiência do usuário da
América Latina.
isa.ixda.org