Diseño deInterfacesBases para el diseño de iconos.
Mtro. Omar Sosa Tzec.
http://www.tzek-design.com/blog@tzek
Introducción
http://upload.wikimedia.org/wikipedia/commons/2/21/Newspaper_rock.jpg
http://farm2.static.flickr.com/1028/554042494_01c855d8ee.jpg
http://www.artesdellibro.com/images/mafu021.jpg
Signo
representamen objeto
interpretante
Ícono
Índice
Símbolo
http://www.slideshare.net/Tzek/semi
http://infinitiguadagni.com/images/Mail-icon.png
http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Handicapped_Accessible_sign.svg/451px-Handicapped_Accessible_sign.svg.png
http://fc01.deviantart.net/fs70/f/2010/224/7/0/FingerPrint_jpg_Icon_by_DontStealMyInfo.jpg
Gestalt
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.
Proximidad.
Similaridad.
Ley de la Praegnanz.
Cierre.
Bertin
Fuente: http://www.infovis-wiki.net/index.php?title=Visual_Variables
Iconicidad
Representación gráficade ideas en el diseñode iconos
• El sujeto mismo.
• La acción a ser desempeñada.
• El rostro humano y expresión corporal.
The Icon Book.Horton, 1994.
mostrar el sujeto directamente
http://aux.iconpedia.net/uploads/1437041524.png
El sujeto mismo.
http://calgaryisawesome.com/wp-content/uploads/2009/10/pushbutton.png
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
La acción a ser desempeñada.
• Conexión causal.
• Analogía funcional.
• Resultados.
• Analogía estructural.
The Icon Book.Horton, 1994.
analogías lógicas en relación o asociación con el objeto
http://www.internet4classrooms.com/images/07_word_symbol.gif
Conexión causal.
http://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/apps/kruler.png
Analogía funcional.
http://www.homeandlearn.co.uk/excel2007/images/alignment2.gif
Resultados.
http://1.bp.blogspot.com/_ozQS_2m2GAM/S-unFSg-hJI/AAAAAAAAAMU/g4YInPOuTZo/s1600/m0324.jpg
Analogía estructural.
• Sinécdoque.
• Litote.
• Hipérbole.
The Icon Book.Horton, 1994.
figuras de la imagen
http://www.wired.com/images_blogs/gadgetlab/2010/09/iTunes10.png
Sinécdoque.
http://png.findicons.com/files/icons/719/crystal_clear_actions/128/agt_action_fail_256.png
Litote.
http://www.123rf.com/photo_472859_full-trash-can--3d-render.html
Hipérbole.
Ideación, bocetos ysu relación con el diseñode iconos
Recursos en línearelacionados con el diseño de iconos modernos
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/
Gracias.
* Presentación con fines didácticos sin lucro. Imágenes y textos son propiedad de sus autores.
Top Related