Fundamentos de UI para programadores

1. Juanda
Fundamentos de UI
para programadores

2. YO
@juanzuluaga
juanzuluaga.net
github.com/juandazapata

3. UI
Imagen: Trinity (vía flickr)

4. experiencias personales
argumentos de discusión
Imagen: Dawn Manser (vía flickr)

5. UI
presentaciones
emails
cartas
software

6. el software no es acerca
de requerimientos…
Imagen: gadl (vía flickr)

7. …es acerca de la gente*
Imagen: limaoscarjuliet (vía flickr)

8. UI es una capa del software
UI
UI no es
independiente

9. consulta de procesos rama judicial

10. modelos
mentales
Imagen: Trinity (vía flickr)

11. modelos mentales
email@example.com
***************

12. el ribbon
Imagen: google images

13. snagit, mindmanager, etc
Imágenes: google images

14. usar la tracción de los grandes
Imágenes: twitter.com / facebook.com

15. uso
consciente
del
contraste
Imagen: Trinity (vía flickr)

16. least effective difference
1 2 3
4 5 6
7 8 9

17. least effective difference
1 2 3
4 5 6
7 8 9

18. strong
normal
weak

19. Bibendum
lorem ipsum dolor amet

20. Bibendum
lorem ipsum dolor

21. Bibendum
lorem ipsum dolor
Bibendum
lorem ipsum dolor

22. Fitts’ law
“the larger an item is, and the closer it is to your cursor,
the easier it is to click on”
Imagen: CodingHorror

23. editar un post en wordpress

24. contacto en highrise

25. flujos
Imagen: Trinity (vía flickr)

26. cómo llego
cómo hago
que pasa después

27. diseñar flujos es pensar
en acciones en vez de
pensar en pantallas
 buscar un número telefónico
 escribir un mensaje
 publicar una noticia

28. romper cada acción en 3
pasos
llegar hacer después
desde donde quisiera agregar contacto ¿que veo cuando el
agregar un contacto contacto se guarda?

29. llegar

30. hacer

31. después

32. sicología del
color
Imagen: Trinity (vía flickr)

33. excitación
energía
diversión
alegría
sube el ritmo cardíaco
incrementa el apetito

34. budweiser
Imagen: budweiser.com

35. calmante
quita la agresividad

36. preferido por los hombres
calma y serenidad
tristeza
disminuye el apetito
baja el ritmo cardíaco
incrementa la productividad

37. alegría
es el que mas cansa el ojo
es un color muy llamativo
taxis y señales de advertencia
los bebés lloran mas en cuartos amarillos
incómodo y estresante en largos períodos

38. yellow pages
Imagen: yellowpages.com

39. tranquiliza
incrementa la sensación de buena salud
fertilidad y riqueza
alivia el stress

40. fuerza
credibilidad
seguridad
riqueza
puede crear sentimientos de tristeza

41. gucci
Imagen: gucci.com

42. pureza
inocencia
crea sensación de espacio
estéril
hospitales

43. mc donald’s
Imagen: mcdonalds.com

44. sofisticación
elegancia
poder

45. ferrari
Imagen: ferrari.com

46. herramientas
Imagen: Trinity (vía flickr)

47. twitter bootstrap
* formularios
* estilos generales
* grid system
* popovers
* tooltips
* ventanas modales
twitter.github.com/bootstrap
Imagen: twitter.com

48. twitter bootstrap sample

49. adobe kuler
kuler.adobe.com
Imagen: Adobe

50. tips
Imagen: Trinity (vía flickr)

52. flickr
caras humanas
bebés
fuentes serifadas
Imagen: Gary Robson (vía flickr)

53. recursos
Imagen: Trinity (vía flickr)

54. iOs human Interface
Guidelines
http://developer.apple.com/library/safari/documentation
/UserExperience/Conceptual/MobileHIG/

55. Mac OS X human
Interface Guidelines
http://developer.apple.com/library/mac/documentation/
UserExperience/Conceptual/AppleHIGuidelines/

56. Don’t make me
think
http://www.amazon.com/Dont-Make-Me-Think-
Usability/dp/0321344758

57. Domain-driven
design
http://www.amazon.com/Domain-Driven-Design-
Tackling-Complexity-Software/dp/0321125215

58. Recursos de diseño
http://goldenratiocalculator.com/
http://365psd.com/
http://www.premiumpixels.com/

59. Imagen: stevendepolo (vía flickr)

60. Imagen: alexanderdrachmann(vía flickr)