Logos, Icons andDescriptive Graphics

Walter Moczygemba

October 16, 2007

Overview

Historical Perspective Logos

Definition Usage Examples

Icons Definition Usage Examples

Descriptive Graphics Definition Usage Examples

http://commons.wikimedia.org/

Historical Perspective

Three Rivers PERQ, 1979 http://digibarn.com/

In The Beginning. . .

DOS for Apple, 1978 http://www.granneman.com/

Along came GUI

Xerox Star1981

Desktopmetaphor

Point andclick

http://www.guidebookgallery.org/

The Information Superhighway

Mosaic1993

First popularweb browser

Hypertext

http://www.nsf.gov/

State of the Art

Motorola Razr2 – Gondry’s Dream http://direct.motorola.com/

Logos

http://www.educa.fmf.uni-lj.si/Logo/

Logos: Definition

Logo /ləʊɡəʊ/ n.,

a symbol or emblem that acts as a trademark or a means of identification of an institution or other entity

–Wiktionary

http://commons.wikimedia.org/

Logos: Usage

Branding Prominent placement Consistent presence

Navigation Link to homepage Other uses . . .?

after http://www.sitepoint.com/

Logos: Examples

Homestar Runner http://www.homestarrunner.com/

Sears http://www.sears.com/

RE/MAX http://www.remax.com/

Usability Net http://www.usabilitynet.org/

Icons

http://commons.wikimedia.org/

Icons: Definition

Icon /aɪkɑːn/ n.,

A small picture which represents something (such as an icon on a computer screen which when clicked performs some function.)

–Wiktionary

http://www.edbqhs.org/

Icons: Usage

Navigation Aesthetic effect Some established symbols Others recognizable to returning visitors Labels are a good thing!

http://www.nickjr.com/

blacklightbottles.com

Icons: Usage

Adobe CS3 Icons http://blogs.adobe.com/Yahoo! Icons http://www.yahoo.com/

Branding Consistent style Favicons– a special case

Icons: Examples

Amazon http://www.amazon.com/

Favourite Favicons http://www.deltatangobravo.com/

Wikipedia Userboxes http://en.wikipedia.org/

Shulman Fleming & Partners http://www.sap8.com/

Descriptive Graphics

http://igs.indiana.edu/

Descriptive Graphics:Definition

Graphic /græfɪk/ n.,

An example of the graphic arts or of graphic design; also, a diagram, pattern, picture, etc., produced by means of a computer

—Oxford English Dictionary

Yi Syllabary http://www.unicode.org/

Descriptive Graphics: Usage

Navigation Thumbnails Visual metaphor Image map

Illustration Maps Diagrams & Charts Anything else!

http://hubblesite.org/

Descriptive Graphics:Examples

LibraryThing http://www.librarything.com/

Flags of the World http://www.flagspot.net/

Human Anatomy Online http://www.innerbody.com/

JODI Web Map http://map.jodi.org/

http://www.falloutcentral.com/

References Beaird, Jason. "The Principles of Beautiful Web Design." SitePoint. 2 Apr. 2007. 14 Oct. 2007

<http://www.sitepoint.com/print/principles-beautiful-web-design>. "Favicon." Wikipedia. 13 Oct. 2007. Wikimedia Foundation. 14 Oct. 2007

<http://en.wikipedia.org/wiki/Favicon>. Flanders, Vincent. "The 10 Worst Web Sites to Navigate in 2006." Web Pages That Suck. 8 Oct.

2007. 14 Oct. 2007 <http://www.webpagesthatsuck.com/10-worst-mystery-meat-navigation-sites-featured-on-web-pages-that-suck-in-2006.html>.

————. "The Worst Web Sites of 2007 (Part One)." Web Pages That Suck. 25 Sept. 2007. 14 Oct. 2007 <http://www.webpagesthatsuck.com/worst-web-sites-of-2007.html>.

"Graphic (noun)." Def. 3. Oxford English Dictionary. Ed. John Simpson. 3rd ed. Oxford: Oxford University Press, 2002. Oxford English Dictionary Online. 2007. Oxford UP. 14 Oct.

2007 <http://dictionary.oed.com.ezproxy.lib.utexas.edu/>. "Icon." Def. 1. Cambridge Advanced Learner's Dictionary. Ed. Elizabeth Walter. 2nd ed.

Cambridge: Cambridge University Press, 2005. Cambridge Dictionaries Online. 2007. 14 Oct. 2007 <http://dictionary.cambridge.org.ezproxy.lib.utexas.edu/>.

"Icon." Wiktionary. 5 Oct. 2007. Wikimedia Foundation. 14 Oct. 2007 <http://en.wiktionary.org/wiki/icon>.

Lineback, Nathan. "The Xerox Star." Nathan's Toasty Technology Page. 1 Oct. 2007. 14 Oct. 2007 <http://toastytech.com/guis/star.html>.

"Logo." Wiktionary. 1 Oct. 2007. Wikimedia Foundation. 14 Oct. 2007 <http://en.wiktionary.org/wiki/logo>.

Morville, Peter, and Louis Rosenfeld. Information Architecture for the World Wide Web. 1998. 3rd ed. Sebastopol, CA: O'Reilly, 2007.

"Mosaic Web Browser Celebrates 10th Birthday." National Science Foundation Newsroom 25 Apr. 2003. 14 Oct. 2007 <http://www.nsf.gov/od/lpa/news/03/pr0343.htm>.

Subramanian, Subha. "An Introduction to Information Architecture." SitePoint. 21 June 2004. 14 Oct. 2007 <http://www.sitepoint.com/article/information-architecture>.