logos icons and descriptive graphics where information architecture collides with n.
Skip this Video
Loading SlideShow in 5 Seconds..
Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______ PowerPoint Presentation
Download Presentation
Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______

Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______

163 Views Download Presentation
Download Presentation

Logos, Icons, and Descriptive Graphics Where Information Architecture collides with ______

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Logos, Icons, and Descriptive GraphicsWhere 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 • MTV, Google • Web 2.0 Logos • 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, 1929-33

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