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.