Logos, Icons, and Descriptive Graphics
Where Information Architecture collides with ______
Information Architecture
October 15, 2009
Joan Winter
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
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
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)
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?
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
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
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
Favicons: a little bit icon, a little
bit logo
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
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
Types of Infographics
•
•
•
•
•
•
•
•
•
Maps
Timelines
Charts
Bar charts
Area charts
Histograms
Diagrams
Flow chart
Etc. etc.
Anatomy of an Infographic
• The raw data or information
• The visual presentation of data:
– Lines, boxes, arrows
– Symbols
– Colors
• Keys to meaning:
– labels, scales
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?
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
John Snow
Charles Joseph Minard
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, 1929-33
Otto Neurath
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:
Some Contemporary Examples
and the power of computing
– Infosthetics
– Visual Complexity
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?
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/guidewhatisgraphicdesign)
• 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