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

1. Diseño de
Interfaces
Bases para el diseño de iconos.
Mtro. Omar Sosa Tzec.
http://www.tzek-design.com/blog
@tzek

2. Introducción

3. http://upload.wikimedia.org/wikipedia/commons/2/21/Newspaper_rock.jpg

4. http://farm2.static.flickr.com/1028/554042494_01c855d8ee.jpg

5. http://www.artesdellibro.com/images/mafu021.jpg

6. Signo

7. interpretante
representamen objeto

8. Ícono
Índice
Símbolo
http://www.slideshare.net/Tzek/semi

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

11. La Gestalt es una teoría psicológica la cual indica,
en términos de la percepción visual, que el
entendimiento es alcanzado a través de reconocer
el juego interno entre los elementos de diseño y la
concurrente lectura de la composición como un
todo. Los puntos más importantes para el estudio
del 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. Proximidad.

13. Similaridad.

14. Ley de la Praegnanz.

15. Cierre.

16. Bertin

17. Fuente: http://www.infovis-wiki.net/index.php?title=Visual_Variables

18. Iconicidad

20. Representación gráfica
de ideas en el diseño
de iconos

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

22. El sujeto mismo.
http://aux.iconpedia.net/uploads/1437041524.png

23. La acción a ser desempeñada.
http://calgaryisawesome.com/wp-content/uploads/2009/10/pushbutton.png

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

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

26. Conexión causal.
http://www.internet4classrooms.com/images/07_word_symbol.gif

27. Analogía funcional.
http://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/apps/kruler.png

28. Resultados.
http://www.homeandlearn.co.uk/excel2007/images/alignment2.gif

29. Analogía estructural.
http://1.bp.blogspot.com/_ozQS_2m2GAM/S-unFSg-hJI/AAAAAAAAAMU/g4YInPOuTZo/s1600/m0324.jpg

30. figuras de la imagen
• Sinécdoque.
• Litote.
• Hipérbole.
The Icon Book.
Horton, 1994.

31. Sinécdoque.
http://www.wired.com/images_blogs/gadgetlab/2010/09/iTunes10.png

32. Litote.
http://png.findicons.com/files/icons/719/crystal_clear_actions/128/agt_action_fail_256.png

33. Hipérbole.
http://www.123rf.com/photo_472859_full-trash-can--3d-render.html

34. Ideación, bocetos y
su relación con el diseño
de iconos

52. Recursos en línea
relacionados con el
diseño de iconos modernos

53. 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-TP6
http://www.rw-designer.com/shadow-icons
http://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.html
http://mustified.com/2011/05/08/rules-modern-icon-design/

54. Gracias.
* Presentación con fines didácticos sin lucro. Imágenes
y textos son propiedad de sus autores.