logos, icons, and descriptive graphics where information architecture collides with ______...
TRANSCRIPT
![Page 1: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/1.jpg)
Logos, Icons, and Descriptive Graphics
Where Information Architecture collides with ______
Information Architecture
October 15, 2009
Joan Winter
![Page 2: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/2.jpg)
Logos
• Graphic elements that help users and consumers immediately recognize a brand or organization
• A way organizations shape corporate identity and communicate with their audience
• Where information architecture collides with marketing and graphic design
![Page 3: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/3.jpg)
According to the American Institute of Graphic Arts . . .
• Symbols and logos are special, highly condensed information forms or identifiers. Symbols are abstract representation of a particular idea or identity. The CBS “eye” is a symbolic forms which we learn to recognize as representing a particular concept or company. Logotypes are corporate identifications based on a special typographical word treatment. Some identifiers are hybrid, or combinations of symbol and logotype. In order to create these identifiers, the designer must have a clear vision of the corporation or idea to be represented and of the audience to which the message is directed. (http://www.aiga.org/content.cfm/guide-whatisgraphicdesign)
Logo
Logotype
![Page 4: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/4.jpg)
Paul Rand
• Father of Corporate Identity • The man behind IBM, UPS,
ABC, Westinghouse• A logo “cannot survive unless
it is designed with the utmost simplicity and restraint.”(Rand, Paul. Thoughts on Design. New York: Wittenborn: 1947)
![Page 5: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/5.jpg)
Logos in the 21st Century
• Dynamic Logos– MTV, Google
• Web 2.0 Logos– Soft, round, sans serif
fonts– Cheery colors– They always take you
“home”– Or are they icons?
![Page 6: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/6.jpg)
Icons
• Graphic symbol that represents a program or function on a computer
• The Graphical User Interface (GUI) compared to the traditional text-based interface
• Pictograms can replace text to help novices grasp computer functions
• Where Information Architecture and Interaction Design Collide
![Page 7: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/7.jpg)
Susan Kare
• The woman behind the icon
• Pioneer of Pixel Art
• Created the card deck for Window’s solitaire, notepad, and control panel and many familiar images from Apple OS like Clarus the dog-cow
![Page 8: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/8.jpg)
Icons and Vector Graphics
• Vector graphics (as opposed to raster graphics) are equation-based images.
• Whether it’s viewed at 4% or 4000%, no pixels and no loss of visual information
• Icons should be scalable without lost of visual information
![Page 9: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/9.jpg)
Favicons: a little bit icon, a little bit logo
![Page 10: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/10.jpg)
Icons in Information Architecture
• Morville and Rosenfeld’s critique of icons in navigation systems (pg. 129)– Issue of comprehensibility without textual labels– User needs to learn the visual language of your site – Icons present a more limited language than text– Useful for children– Icons do, however, add aesthetic quality to a site
![Page 11: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/11.jpg)
Descriptive Graphics . . . Information Graphics . . .
Infographic . . .
• Infographics: Royksopp “Remind Me”
• The visual representation of data or a concept• Visual shorthand for a complex topic• Where IA collides with cognitive psychology,
modeling, statistics, illustration and graphic design
![Page 12: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/12.jpg)
Types of Infographics
• Maps• Timelines• Charts• Bar charts• Area charts• Histograms• Diagrams• Flow chart• Etc. etc.
![Page 13: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/13.jpg)
Anatomy of an Infographic
• The raw data or information
• The visual presentation of data: – Lines, boxes, arrows– Symbols– Colors
• Keys to meaning: – labels, scales
![Page 14: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/14.jpg)
Are they Decipherable?
• Infographics demand visual literacy and graphicacy– Know the subject– Know the system
• Many strive for a common visual language. Is it possible?
![Page 15: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/15.jpg)
A condensed history
• What can be an infographic?– Cholera infections– Napoleon’s invasion of Russia– Your role in the socialist state– A global networks of tweets
![Page 16: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/16.jpg)
John Snow
![Page 17: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/17.jpg)
Charles Joseph Minard
![Page 18: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/18.jpg)
Isotype or Picture Language
Isotype 'Picture dictionary'leaf from binder, Gerd Arntz, 1929-33
•Represents social facts pictorially•Brings information to life with a visually engaging presentation
•Gerd Antz Web Archive
![Page 19: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/19.jpg)
Otto Neurath
![Page 20: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/20.jpg)
Edward Tufte
• Came up with the term “chartjunk” (unnecessary or distracting visual elements)
• Believes ink is there to convey information, not be decorative (ornament is a crime!)
• Invented the sparkline:
![Page 21: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/21.jpg)
Some Contemporary Examples and the power of computing
– Infosthetics– Visual Complexity
![Page 22: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/22.jpg)
Descriptive Graphics for Information Architecture
• IA employs many of the same techniques as descriptive graphics: – Site maps and wire frames are all visual ways
of organizing and presenting information.
• Information graphics as a navigation system?
![Page 23: Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ Information Architecture October 15, 2009 Joan Winter](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dde5503460f94ad7aff/html5/thumbnails/23.jpg)
Resources
RESOURCES
• Morville, Peter and Louis Rosenfield. Information Architecture. New York: O'Reilly Media: 2006.
• Poggenpohl, Sharon Helmer, ed. "What is Graphic Design?" Graphic Design: A Career Guide and Education Directory. The American Institute of Graphic Arts: 1993 (http://www.aiga.org/content.cfm/guide-whatisgraphicdesign)
• Rand, Paul. Thoughts on Design. New York: Wittenborn: 1947
• Tufte, Edward. Envisioning Information. New York: Graphics Press: 1990.
• Tufte, Edward. The Visual Display of Quantitative Information, 2nd Edition. New York: Graphics Press. 2001.
WEB RESOURCES
• The Gerd Antz Web Archive
• Infostehtics
• Visual Complexity