Este documento habla sobre el uso de patrones de interfaz de usuario para diseñar sitios web y aplicaciones de manera más eficiente. Explica que un patrón es una solución recurrente a un problema común, y describe los elementos clave de un patrón como una solución con nombre, el problema que resuelve y el contexto en el que se debe usar. También proporciona ejemplos de patrones comunes y sitios web donde se pueden encontrar más patrones y obtener inspiración para el diseño.

1. Ahorra tiempo
y no diseñes desde cero
Ana Cirujano | WordCamp Granada 2019 | 30 de noviembre

2. @acirujano | #WCGranada

3. @acirujano | #WCGranada

4. @acirujano | #WCGranada

5. @acirujano | #WCGranada
Un patrón es una solución
recurrente a un problema
en un contexto.

6. @acirujano | #WCGranada

7. @acirujano | #WCGranada
Public Diagram Project

8. ¿Qué son los patrones
de diseño UI?

9. @acirujano | #WCGranada
Don’t repeat yourself
(DRY)

10. @acirujano | #WCGranada
Elementos de
un patrón UI
Una solución
(con un nombre que
describe lo que hace)
Un problema
(al que se enfrenta el usuario
y que lo hace necesario)
Un contexto
(cuándo usarlo)

11. @acirujano | #WCGranada
Ejemplo: miniaturas (thumbnails)

12. @acirujano | #WCGranada
Ejemplo: miniaturas (thumbnails)

13. @acirujano | #WCGranada
Ejemplo: miniaturas (thumbnails)

14. @acirujano | #WCGranada
Ejemplo: no necesita miniaturas (thumbnails)

15. @acirujano | #WCGranada

16. @acirujano | #WCGranada

17. @acirujano | #WCGranada
MARKETING
Píxel de
Facebook

18. @acirujano | #WCGranada
MARKETING DESARROLLO
Píxel de
Facebook
Script
de terceros

19. @acirujano | #WCGranada
MARKETING
Espacio
entre letras

20. @acirujano | #WCGranada
MARKETING DISEÑO
Espacio
entre letras
Tracking

21. @acirujano | #WCGranada
MARKETING DISEÑO FRONTEND
Espacio
entre letras
Letter-spacingTracking

22. ¿Qué patrón usar
y cuándo?

23. @acirujano | #WCGranada
ui-patterns.com/patterns

24. @acirujano | #WCGranada

25. @acirujano | #WCGranada
ui-patterns.com/patterns

26. @acirujano | #WCGranada
Resumen del problema
Ejemplo
Usos
Más ejemplos
Solución
Racional
ui-patterns.com/patterns

27. @acirujano | #WCGranada
pttrns.com

28. @acirujano | #WCGranada
inspirationui.com

29. @acirujano | #WCGranada
patterntap.com/patterntap

30. Antipatrones

31. @acirujano | #WCGranada
Menú hamburguesa

32. Patrones oscuros

33. @acirujano | #WCGranada
Manipulink/Confirmshaming

34. @acirujano | #WCGranada
Manipulink/Confirmshaming

35. @acirujano | #WCGranada
Manipulink/Confirmshaming

36. @acirujano | #WCGranada
Cebo y cambio

37. @acirujano | #WCGranada
Anuncios disfrazados

38. @acirujano | #WCGranada
Spam para amigos

39. @acirujano | #WCGranada
Desorientación

40. Aprender de
los mejores

41. @acirujano | #WCGranada
Ciencias sociales
Para comprender al usuario
Cine y dibujos animados
Para diseñar animaciones
Revistas impresas
Para diseñar blogs
La Bolsa
Para mostrar datos en tiempo real
Aprende de los mejores

42. @acirujano | #WCGranada
Las empresas más grandes del mundo
https://en.wikipedia.org/wiki/List_of_largest_Internet_companies

43. @acirujano | #WCGranada
Las empresas más grandes de tecnología
https://en.wikipedia.org/wiki/List_of_the_largest_information_technology_companies

44. @acirujano | #WCGranada
Las empresas con más tráfico
https://www.alexa.com/topsites

45. @acirujano | #WCGranada
Rankings
http://fortune.com/rankings

46. Buscar
inspiración

47. @acirujano | #WCGranada
siteinspire.com

48. @acirujano | #WCGranada
httpster.net

49. @acirujano | #WCGranada
awwwards.com

50. @acirujano | #WCGranada
collectui.com

51. @acirujano | #WCGranada
onepagelove.com

53. @acirujano | #WCGranada
ESTE SOY YO CUANDO HAGO UN TRABAJO DE CLASE
A BASE DE TEXTOS DE DISTINTAS PÁGINAS

54. @acirujano | #WCGranada

55. @acirujano | #WCGranada

56. @acirujano | #WCGranada
Elementos de
un patrón UI
Una solución
(con un nombre que
describe lo que hace)
Un problema
(al que se enfrenta el usuario
y que lo hace necesario)
Un contexto
(cuándo usarlo)

57. ¡Gracias!