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

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

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