logos, icons, and descriptive graphics where information architecture collides with ______
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
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