Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Diseño de Iconos

1.726 Aufrufe

Veröffentlicht am

Bases a considerar para el diseño de iconos para interfaces gráficas de usuario.

Veröffentlicht in: Design, Technologie, Kunst & Fotos
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Diseño de Iconos

  1. 1. Diseño deInterfacesBases para el diseño de iconos.Mtro. Omar Sosa Tzec.http://www.tzek-design.com/blog@tzek
  2. 2. Introducción
  3. 3. http://upload.wikimedia.org/wikipedia/commons/2/21/Newspaper_rock.jpg
  4. 4. http://farm2.static.flickr.com/1028/554042494_01c855d8ee.jpg
  5. 5. http://www.artesdellibro.com/images/mafu021.jpg
  6. 6. Signo
  7. 7. interpretanterepresentamen objeto
  8. 8. ÍconoÍndiceSímbolo http://www.slideshare.net/Tzek/semi
  9. 9. http://upload.wikimedia.org/wikipedia/http://infinitiguadagni.com/images/Mail- http://fc01.deviantart.net/fs70/f/2010/224/7/0/ commons/thumb/e/eb/icon.png FingerPrint_jpg_Icon_by_DontStealMyInfo.jpg Handicapped_Accessible_sign.svg/451px- Handicapped_Accessible_sign.svg.png
  10. 10. Gestalt
  11. 11. La Gestalt es una teoría psicológica la cual indica,en términos de la percepción visual, que elentendimiento es alcanzado a través de reconocerel juego interno entre los elementos de diseño y laconcurrente lectura de la composición como untodo. Los puntos más importantes para el estudiodel diseño de información son• el principio de la proximidad,• el principio de la similaridad,• el principio de la «pregnancia», y• el principio de cierre. The Information Design Handbook. Visocky, 2008.
  12. 12. Proximidad.
  13. 13. Similaridad.
  14. 14. Ley de la Praegnanz.
  15. 15. Cierre.
  16. 16. Bertin
  17. 17. Fuente: http://www.infovis-wiki.net/index.php?title=Visual_Variables
  18. 18. Iconicidad
  19. 19. Representación gráficade ideas en el diseñode iconos
  20. 20. mostrar el sujeto directamente• El sujeto mismo.• La acción a ser desempeñada.• El rostro humano y expresión corporal. The Icon Book. Horton, 1994.
  21. 21. El sujeto mismo. http://aux.iconpedia.net/uploads/1437041524.png
  22. 22. La acción a ser desempeñada. http://calgaryisawesome.com/wp-content/uploads/2009/10/pushbutton.png
  23. 23. La acción a ser desempeñada. http://www.resourcesgraphics.com/vector-graphic/vector-icon-vector-graphic/business-person-of-the-icon-image-of-the-vector-material.html
  24. 24. analogías lógicas en relación o asociación con el objeto• Conexión causal.• Analogía funcional.• Resultados.• Analogía estructural. The Icon Book. Horton, 1994.
  25. 25. Conexión causal. http://www.internet4classrooms.com/images/07_word_symbol.gif
  26. 26. Analogía funcional. http://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/apps/kruler.png
  27. 27. Resultados. http://www.homeandlearn.co.uk/excel2007/images/alignment2.gif
  28. 28. Analogía estructural. http://1.bp.blogspot.com/_ozQS_2m2GAM/S-unFSg-hJI/AAAAAAAAAMU/g4YInPOuTZo/s1600/m0324.jpg
  29. 29. figuras de la imagen• Sinécdoque.• Litote.• Hipérbole. The Icon Book. Horton, 1994.
  30. 30. Sinécdoque.http://www.wired.com/images_blogs/gadgetlab/2010/09/iTunes10.png
  31. 31. Litote. http://png.findicons.com/files/icons/719/crystal_clear_actions/128/agt_action_fail_256.png
  32. 32. Hipérbole. http://www.123rf.com/photo_472859_full-trash-can--3d-render.html
  33. 33. Ideación, bocetos ysu relación con el diseñode iconos
  34. 34. Recursos en línearelacionados con eldiseño de iconos modernos
  35. 35. http://turbomilk.com/blog/cookbook/icon_design/10_mistakes_in_icon_design/http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGIcons/XHIGIcons.html#//apple_ref/doc/uid/20000967-TP6http://www.rw-designer.com/shadow-iconshttp://psd.tutsplus.com/articles/theory/know-your-icons-part-1-a-brief-history-of-computer-icons/http://psd.tutsplus.com/articles/theory/know-your-icons-part-2-modern-icon-design/http://www.noupe.com/tutorial/55-adobe-illustrator-icon-design-tutorials-2.htmlhttp://mustified.com/2011/05/08/rules-modern-icon-design/
  36. 36. Gracias.* Presentación con fines didácticos sin lucro. Imágenesy textos son propiedad de sus autores.

×