Juanda         Fundamentos de UI           para programadores
YO     @juanzuluaga     juanzuluaga.net     github.com/juandazapata
UIImagen: Trinity (vía flickr)
experiencias personales                                   argumentos de discusiónImagen: Dawn Manser (vía flickr)
UI     presentaciones     emails     cartas     software
el software no es acerca de requerimientos…Imagen: gadl (vía flickr)
…es acerca de la gente*Imagen: limaoscarjuliet (vía flickr)
UI es una capa del software                              UI  UI no es  independiente
consulta de procesos rama judicial
modelos                               mentalesImagen: Trinity (vía flickr)
modelos mentales             email@example.com             ***************
el ribbonImagen: google images
snagit, mindmanager, etcImágenes: google images
usar la tracción de los grandesImágenes: twitter.com / facebook.com
uso                               consciente                                   del                                contrast...
least effective difference               1             2   3               4             5   6               7            ...
least effective difference               1             2   3               4             5   6               7            ...
strongnormal weak
Bibendum lorem     ipsum   dolor   amet
Bibendum lorem   ipsum   dolor
Bibendum lorem     ipsum   dolorBibendum lorem     ipsum   dolor
Fitts’ law           “the larger an item is, and the closer it is to your cursor,                          the easier it i...
editar un post en wordpress
contacto en highrise
flujosImagen: Trinity (vía flickr)
cómo llegocómo hagoque pasa después
diseñar flujos es pensaren acciones en vez depensar en pantallas buscar un número telefónico escribir un mensaje public...
romper cada acción en 3 pasos    llegar               hacer            despuésdesde donde quisiera   agregar contacto   ¿q...
llegar
hacer
después
sicología del                                   colorImagen: Trinity (vía flickr)
excitaciónenergíadiversiónalegríasube el ritmo cardíacoincrementa el apetito
budweiserImagen: budweiser.com
calmantequita la agresividad
preferido por los hombrescalma y serenidadtristezadisminuye el apetitobaja el ritmo cardíacoincrementa la productividad
alegríaes el que mas cansa el ojoes un color muy llamativotaxis y señales de advertencialos bebés lloran mas en cuartos am...
yellow pagesImagen: yellowpages.com
tranquilizaincrementa la sensación de buena saludfertilidad y riquezaalivia el stress
fuerzacredibilidadseguridadriquezapuede crear sentimientos de tristeza
gucciImagen: gucci.com
purezainocenciacrea sensación de espacioestérilhospitales
mc donald’sImagen: mcdonalds.com
sofisticacióneleganciapoder
ferrariImagen: ferrari.com
herramientasImagen: Trinity (vía flickr)
twitter bootstrap       * formularios       * estilos generales       * grid system       * popovers       * tooltips     ...
twitter bootstrap sample
adobe kuler                kuler.adobe.comImagen: Adobe
tipsImagen: Trinity (vía flickr)
flickr                                     caras humanas                                              bebés               ...
recursosImagen: Trinity (vía flickr)
iOs human Interface                             Guidelineshttp://developer.apple.com/library/safari/documentation/UserExpe...
Mac OS X human                     Interface Guidelineshttp://developer.apple.com/library/mac/documentation/UserExperience...
Don’t make me                                   thinkhttp://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758
Domain-driven                                 designhttp://www.amazon.com/Domain-Driven-Design-Tackling-Complexity-Softwar...
Recursos de diseñohttp://goldenratiocalculator.com/http://365psd.com/http://www.premiumpixels.com/
Imagen: stevendepolo (vía flickr)
Imagen: alexanderdrachmann(vía flickr)
Fundamentos de UI para programadores
Próxima SlideShare
Cargando en…5
×

Fundamentos de UI para programadores

551 visualizaciones

Publicado el

Fundamentos de UI para programadores

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
551
En SlideShare
0
De insertados
0
Número de insertados
2
Acciones
Compartido
0
Descargas
13
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Fundamentos de UI para programadores

  1. 1. Juanda Fundamentos de UI para programadores
  2. 2. YO @juanzuluaga juanzuluaga.net github.com/juandazapata
  3. 3. UIImagen: Trinity (vía flickr)
  4. 4. experiencias personales argumentos de discusiónImagen: Dawn Manser (vía flickr)
  5. 5. UI presentaciones emails cartas software
  6. 6. el software no es acerca de requerimientos…Imagen: gadl (vía flickr)
  7. 7. …es acerca de la gente*Imagen: limaoscarjuliet (vía flickr)
  8. 8. UI es una capa del software UI UI no es independiente
  9. 9. consulta de procesos rama judicial
  10. 10. modelos mentalesImagen: Trinity (vía flickr)
  11. 11. modelos mentales email@example.com ***************
  12. 12. el ribbonImagen: google images
  13. 13. snagit, mindmanager, etcImágenes: google images
  14. 14. usar la tracción de los grandesImágenes: twitter.com / facebook.com
  15. 15. uso consciente del contrasteImagen: Trinity (vía flickr)
  16. 16. least effective difference 1 2 3 4 5 6 7 8 9
  17. 17. least effective difference 1 2 3 4 5 6 7 8 9
  18. 18. strongnormal weak
  19. 19. Bibendum lorem ipsum dolor amet
  20. 20. Bibendum lorem ipsum dolor
  21. 21. Bibendum lorem ipsum dolorBibendum lorem ipsum dolor
  22. 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. 23. editar un post en wordpress
  24. 24. contacto en highrise
  25. 25. flujosImagen: Trinity (vía flickr)
  26. 26. cómo llegocómo hagoque pasa después
  27. 27. diseñar flujos es pensaren acciones en vez depensar en pantallas buscar un número telefónico escribir un mensaje publicar una noticia
  28. 28. romper cada acción en 3 pasos llegar hacer despuésdesde donde quisiera agregar contacto ¿que veo cuando elagregar un contacto contacto se guarda?
  29. 29. llegar
  30. 30. hacer
  31. 31. después
  32. 32. sicología del colorImagen: Trinity (vía flickr)
  33. 33. excitaciónenergíadiversiónalegríasube el ritmo cardíacoincrementa el apetito
  34. 34. budweiserImagen: budweiser.com
  35. 35. calmantequita la agresividad
  36. 36. preferido por los hombrescalma y serenidadtristezadisminuye el apetitobaja el ritmo cardíacoincrementa la productividad
  37. 37. alegríaes el que mas cansa el ojoes un color muy llamativotaxis y señales de advertencialos bebés lloran mas en cuartos amarillosincómodo y estresante en largos períodos
  38. 38. yellow pagesImagen: yellowpages.com
  39. 39. tranquilizaincrementa la sensación de buena saludfertilidad y riquezaalivia el stress
  40. 40. fuerzacredibilidadseguridadriquezapuede crear sentimientos de tristeza
  41. 41. gucciImagen: gucci.com
  42. 42. purezainocenciacrea sensación de espacioestérilhospitales
  43. 43. mc donald’sImagen: mcdonalds.com
  44. 44. sofisticacióneleganciapoder
  45. 45. ferrariImagen: ferrari.com
  46. 46. herramientasImagen: Trinity (vía flickr)
  47. 47. twitter bootstrap * formularios * estilos generales * grid system * popovers * tooltips * ventanas modales twitter.github.com/bootstrapImagen: twitter.com
  48. 48. twitter bootstrap sample
  49. 49. adobe kuler kuler.adobe.comImagen: Adobe
  50. 50. tipsImagen: Trinity (vía flickr)
  51. 51. flickr caras humanas bebés fuentes serifadasImagen: Gary Robson (vía flickr)
  52. 52. recursosImagen: Trinity (vía flickr)
  53. 53. iOs human Interface Guidelineshttp://developer.apple.com/library/safari/documentation/UserExperience/Conceptual/MobileHIG/
  54. 54. Mac OS X human Interface Guidelineshttp://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines/
  55. 55. Don’t make me thinkhttp://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758
  56. 56. Domain-driven designhttp://www.amazon.com/Domain-Driven-Design-Tackling-Complexity-Software/dp/0321125215
  57. 57. Recursos de diseñohttp://goldenratiocalculator.com/http://365psd.com/http://www.premiumpixels.com/
  58. 58. Imagen: stevendepolo (vía flickr)
  59. 59. Imagen: alexanderdrachmann(vía flickr)

×