Logos, Icons, and Descriptive GraphicsWhere 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
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
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
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