Worst of the Web
Classes 1, 2, 3, 4
Final design due Monday, February 5, 2007

We've all seen them-- web pages that defy all logical design or structure. The design might be beautiful, but you can't find what you're looking for or don't understand what the site is about. The site can be a fine art work or a commercial site selling sneakers - that's not the point. What does matter is that the site is accessible and holds the viewer's attention.

What are some of the biggest web site design and architecture mistakes? By reviewing some really bad sites, we will outline what are the pitfalls of bad web design and how they can be addressed. Keep in mind that this first assignment will focus primarily on commercial web design, however, most of these same issues can be applied to a fine art web site. Your main goal as a networked media artist is to keep your viewer's attention. You don't want them to leave your site out of frustration.

Assignment
In class we will discuss what makes for bad web design. Your first assignment will be to pick a "really bad, poorly designed web site" (either fine art or commercial) and present it to class on Monday, January, 15th. Be ready to tell us what doesn't work in the web site you will be presenting. The following week, you be expected to present a redesigned homepage of the "really bad web site" you presented. Your redesign doesn't need to be fully functional -it can be a still Photoshop layout of the homepage - BUT it must address the issues you pointed out as not working in the original "bad" design presentation. You have complete freedom to TOTALLY redesign the look and feel of your chosen site (that includes all graphics, content, type, layout, and navigation.) This is not about a subtle "tweaking" of existing material - this is a COMPLETE redesign. You should also include a flowchart for your proposed navigation structute.

Reading
due January 29
Each student in the class will be assigned a section from the reading source below:

John Lenker
"Understanding What Motivates Online Behavior"
Train of Thoughts: Designing the Effective Web Experience
New Riders: Berkeley, CA, 2002.
PDF-1st part
PDF-2nd part

Optional further resources on Interface redesign:

Tom Brinck, Darren Gergle & Scott D. Wood
"Designing Web Sites that Work: Usability for the Web"
Academic Press: San Diego, 2002

Taschen (Icons) Web Design Series, 2005.
A good collection of visual documentation on "design focused" site.
Web Design: Studios
Web Design: E-Commerce
Web Design: Flash Sites
Web Design: Portfolios

Deadlines
January 22 - Present your "bad" web site example. Define its purpose.
January 29 - Lenker reading Assignments due. Be prepared to discuss in class. Also select one example of a good web site to present to class.
February 5 - Present your redesign of the "bad" web site homepage
Final presentation must include:
• Redesigned homepage navigation + content. Design can be done as non-interactive mock-up. All final project mock-ups must be uploaded as JPG images within an html page -- does not need to function. (If homepage is exclusively navigation, then you must also include a sample content page)
• Flowchart of site navigation (Use Inspiration or OmniGraffle for your flowchart.)
• Site Evaluation questionnaire completed by 2 people other than yourself.

Some Mistakes to Look for:

Purpose of Web site -- What is the web site about?
Navigation Failure
The Purpose of Text
Confusing Design (simplicity, balance + contrast)
Misusing Flash
Misunderstanding Graphics
Optimization


Resources for Worst of the Web:

Pages That Suck: The Daily Sucker
http://www.webpagesthatsuck.com/dailysucker

The Biggest Web Mistakes of 2004
http://www.webpagesthatsuck.com/biggest-web-design-mistakes-in-2004.html

World's Worst Web
http://www.angelfire.com/super/badwebs/main.htm

Interface Design
"practical tips for commercial sites"
see links on this site for other resources
http://www.edtech.vt.edu/edtech/id/interface/

MarketShare
Global Web Statistics by OS and browser type
http://marketshare.hitslink.com

W3Schools
General Web Stats (platform, browser, color, flash, javascript)
http://www.w3schools.com/browsers/browsers_stats.asp

Flash Usage Stats
Adobe (formerly Macromedia)
http://www.macromedia.com/software/player_census/flashplayer/version_penetration.html

Student Suggested Sites:

Suggested by Jessica Greco:
http://www.dontclick.it/
there's also this one, which is fairly weird but so fun:
http://www.metaphorical.net/mainindex.html

Suggested by Daniela Bronfenmajer:
http://www.linkdup.com

Suggested by Gyu Nam Kim:
http://www.iconsouthbeach.com/idle.htm
http://www.ilove2design.com/thnx.html
http://www.saltedherring.com/
http://www.yamsplayground.com
http://www.miroonamoo.net

Suggested by Elizabeth Lattanzio:
http://stardust.tv/ a Joshua Davis interface

Case Studies:
Time permitting, we will discuss the pros and cons of each site below:

Information Sites
• Promo/Marketing
Digital Kitchen - Flash site for a motion graphics firm
Camille Utterback - This is a simple (non-Flash) artist promo site
tenbyten.org -- an inventive interface for a news site (compare with BBC online and NYTimes online)
John Coltrane - Clean design in a Flash interface for a jazz musician.
Dunun - a design promo site within a flash animation interface
Sofake.com -- a design promo site with an inventive navigation -- does it work or is it confusing?
Feltron Annual Report -- about || site
• Research/Search
Yahoo - Cluttered?
Google - classic/clean search
Wikipedia - Research and community
iPhone - this is a wonderful interface (entertainment and information)

Community
Ecotonoha.com
Rhizome
mySpace.com

Shopping
amazon.com- A shopping standard
apple.com - shopping, info and community

Entertainment
• Fine Art
NFCTD- a fine art flash site with hidden (obscure) navigation. Does this approach work on this site? Is it fun/entertaining?
Typorganism - Flash art site by Gicheol Lee (SVA Alum)
American Penguin Project - Flash art site by Minki Park (SVA Alum)
Rhizome Artbase - Resource site for Net Art
• Entertainment for Political Purposes
MailorderChickens.org (a parody site about trade injustice created by Pressureworks, a British political organization.
• TV/Games
Cartoon Network