Los patrones de diseño son la clave para crear interfaces de productos digitales que resulten intuitivas para los usuarios

1. ¡Ya comienza!
PATRONES DE DISEÑO

2. CICLO 2018

3. APRENDIENDO A DISEÑAR
PARA MEDIOS INTERACTIVOS

4. Colaboran con nosotros:
¡Gracias!

5. EUGENIA CASABONA
UX Manager en Almundo
@eugecas
in/eugenia-casabona

6. PATRONES DE DISEÑO
Diseñando interfaces “intuitivas”
Con el apoyo de
Este obra está bajo una licencia de
Creative Commons Reconocimiento 4.0 Internacional

7. REFESQUEMOS
NUESTRA MEMORIA

8. DISEÑO DE INTERACCIÓN
“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

9. ¿QUE NOS PIDEN LOS
STAKEHOLDERS A UX?

10. DISEÑAME UN “SITIO”
INTUITIVO

12. ¿INTUITIVO?

13. INTUICIÓN
Habilidad para conocer, comprender o percibir
algo de manera clara e inmediata, sin la
intervención de la razón.

14. RESPIRAR
REGULAR LA TEMPERATURA
SUCCIONAR
LLORAR

15. ¿ENTONCES DE DONDE
VIENE LA INTUICIÓN?

16. INTUICIÓN =
APRENDIZAJE

17. ¿COMO LOGRAMOS
QUE NUESTROS
USUARIOS
USEN NUESTRAS
INTERFACES SIN
RAZONAR?

18. ¡PATRONES DE DISEÑO!

19. PATRONES DE DISEÑO
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

20. PATRONES DE DISEÑO
“En un producto digital los patrones de diseño
permiten que ocurra la magia.”
Eugenia Casabona

21. ¿CÓMO IDENTIFICAMOS
UN PATRÓN?

22. PATRÓN
Para que una solución sea considerada un patrón debe
poseer ciertas características:
- Se debe haber comprobado su efectividad resolviendo
problemas similares en ocasiones anteriores.
- Debe ser reutilizable, lo que significa que es aplicable a
diferentes problemas de diseño en distintas
circunstancias.

23. EN SÍNTESIS…

24. Se trata de
NO
reinventar la
rueda

25. 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

26. ALGUNOS EJEMPLOS

28. WEB > CAROUSEL

29. WEB > SLIDESHOW

30. WEB > ONBOARDING

31. WEB > MODAL

32. WEB > TAGGING

33. WEB > Account Registration

34. IOS

35. ANDROID (MATERIAL DESIGN)

36. 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

37. ¿COMO NACE UN PATRÓN?

38. DEJAMOS QUE
LOS REFERENTES
PAGUEN LA FIESTA

39. LOS PATRONES DE DISEÑO
TAMBIÉN NOS AYUDAN A
CUMPLIR LAS HEURÍSTICAS DE
NIELSEN

40. HEURÍSTICA #4
CONSISNTENCIA Y
ESTANDARES

41. CREANDO DESIGN SYSTEM

42. ¡Recreo!
Ya volvemos con
NOMBRE DEl TALLER

43. ¿DONDE APLICAMOS LOS
PATRONES DE DISEÑO?

44. CREANDO PROTOTIPOS DE
BAJA Y ALTA DEFINICIÓN

45. ¡A TRABAJAR!

46. EJERCICIO 1 - INVESTIGACIÓN DE PATRONES - 40 minutos
1- En grupos X analizar las aplicaciones que tengas instaladas en sus
teléfonos con el objetivo de detectar los patrones de diseño utilizados.
2- Navegar las paginas web de las aplicaciones y analizar si utilizan los
mismo patrones de diseño.

47. EJERCICIO 2 - DISEÑANDO CON PATRONES 40 minutos
1- En grupos X crear un prototipo de bajar fidelidad visual con el flujo de
que permita realizar un pedido de comida a una empresa de delivery,
cada grupo trabajara con los patrones de diseño que le corresponda:
- IOS
- Android
- Web mobile

48. EJERCICIO 3 - COMPARTIR EXPERIENCIAS 30 minutos
Cada grupo a sus compañeros el flujo diseñando y nos contará sobre los
patrones utilizados.

49. ¿PREGUNTAS?

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

51. Esta presentación está publicada bajo licencia
Creative Commons Atribución-CompartirIgual 4.0 Internacional (CCBY-SA4.0)
Usted es libre de
* Compartir - copiar y redistribuir el material en cualquier medio y formato
* Adaptar - remezclar, transformar y crear a partir del material
Bajo las condiciones siguientes
Atribución: Usted debe darle crédito a esta obra de manera adecuada (dar nombre del creador y de las partes atribuidas,
un aviso de derecho de autor, una nota de licencia, un aviso legal, y un enlace al material), proporcionando un enlace a la
licencia, e indicando si se han realizado cambios. Puede hacerlo en cualquier forma razonable, pero no de forma tal que
siguiera que usted o su uso tiene elapoyo del licenciante. Compartir Igual: Si usted mezcla, transforma o crea un nuevo
material a partir de esta obra, usted podrá contribuir su distribución siempre que utilice la misma licencia que la obra
original, o no aparezca como compatible en
https://creativecommons.org/compatiblelicenses
No hay restricciones legales-Usted no puede aplicar términos legales ni medidas tecnológicas querestrinjan legalmente a
otros hacer cualquier uso permitido por la licencia.

52. AGENDATE! PRÓXIMO TALLER
PRUEBAS DE GUERRILLA
SÁB 6 de OCTUBRE de 09:45 a 13:00 hs.
Facultad de Arquitectura y Diseño (UCALP)
Calle 50 N° 818 e/11 y 12, La Plata