1. Information Architecture October 15, 2009 Joan Winter
Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______
Information Architecture
October 15, 2009
Joan Winter

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

3. 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. (
Logo
Logotype

4. 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)

5. Logos in the 21st Century Dynamic Logos Web 2.0 Logos MTV, Google
Soft, round, sans serif fonts
Cheery colors
They always take you “home”
Or are they icons?

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

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

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

9. Favicons: a little bit icon, a little bit logo

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

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

12. Types of Infographics Maps Timelines Charts Bar charts Area charts
Histograms
Diagrams
Flow chart
Etc. etc.

13. Anatomy of an Infographic
The raw data or information
The visual presentation of data:
Lines, boxes, arrows
Symbols
Colors
Keys to meaning:
labels, scales

14. 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?

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

16. John Snow

17. Charles Joseph Minard

18. Isotype or Picture Language
Represents social facts pictorially
Brings information to life with a visually engaging presentation
Gerd Antz Web Archive
Isotype 'Picture dictionary'
leaf from binder, Gerd Arntz,

19. Otto Neurath

20. 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:

21. Some Contemporary Examples and the power of computing
Infosthetics
Visual Complexity

22. 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?

23. 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 (
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
WEB RESOURCES
The Gerd Antz Web Archive
Infostehtics
Visual Complexity