220 likes | 380 Views
Logos, Icons and Descriptive 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.
E N D
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 Star • 1981 • Desktopmetaphor • Point andclick http://www.guidebookgallery.org/
The Information Superhighway Mosaic • 1993 • 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/
Homestar Runner http://www.homestarrunner.com/ Sears http://www.sears.com/ RE/MAX http://www.remax.com/ Usability Net http://www.usabilitynet.org/ Logos: Examples
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! blacklightbottles.com http://www.nickjr.com/
Icons: Usage • Branding • Consistent style • Favicons– a special case Yahoo! Icons http://www.yahoo.com/ Adobe CS3 Icons http://blogs.adobe.com/
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/
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>.