| Design Class Site Examples | developed by: Harold Goldstein -- -- http://goldray.com/
http://goldray.com/webdesign/design-examples.htm |
World Best's 100 point excellence checklist
Use of Tables
Direct Search and Virtual Acquisition Shelf are incredible resources and note the table useWebDeveloper.com, an online web development journal, focuses on basic table usage; note its opening page using a table structure, navigation box on the left. Then the table use that does this is presented with many good examples:
Frames
What not to do!Jerhong uses frames for navigation.
Traveldocs makes specific use of frames (try news or weather).
ACY's use is complex, inefficient ... Losing It is also complex but works.
Using CSS for layout
Hospitality ExchangeBushmeat Crisis
A List Apart - a discussion of using CSS for layout also at Glish and at O'Reilly.
And here is a discussion on rebuilding an old site to use CSS.
Image Issues
Freeway Project uses 'lowsrc', non-intuitive imagemap, splash page, poor color, good use of thumbnails, frames.The JHSM uses a constant graphic header w/addon for each section.
Cornell Corporate is very nice but turn off graphics and what next?
In this Gallery, I use small images to show the work and link to detailed images.
Gif Animation Site - great site, lets talk navigation and readability??
Look how images are spliced at Amberlady (load w/images off)
Miscellaneous Examples
Web page design for designers (resources); nice layout;January Magazine has simple, effective use of columns.
Zeldman; use of tables, navigation;
Hotwired Webmonkey; alot of content; overwhelming? (see features weekly); table approach.
Edmunds is seen as the premier car site; look at table structure, navigation.
Nikon is evolving; try products, cameras, - different interfaces; look for a manual;
Cool Homepages; many examples in different categories; ie see very clean and navbars.
Magazine approaches: Popular Mechanics vs. Science Magazine
How to Create Relly Cool Websites - NOT!!!
Another example of the worst of everything. That was a parody but this one is real.
Accessibility
see separate handout on website accessibility issues and resources.Navigation, site maps, etc
total confusion!!Adobe, Harvard - has excellent navigation, w/navbar, search
CNET is a valuable resource, but look at confusing navigation; table usage.
On my Goldray i also use several schemes.
Two webreference articles about navigation graphics; the first and the second; with examples.
See Last Acts and WGBH in Boston have fine sitemaps, hivforum uses a subway route metaphor.
Look at Inxight's approach (try Best Buys, Interwoven, Netro City). Other site maps are: Moneycentral, ESI (subway metaphor).
Novell uses a site index; Apple uses a table of contents.
On Bushmeat we use a free externally hosted solution (filefind) that provides search and site maps.
Mapping Web Sites is a presentation on mapping theory with examples. (see 2 level/3 level graphic)
The Cyberspace Atlas presents site map examples many created w/commercial products.
Webreview articles; icons and navigation; their navigation and usability guide.
Developing your own unique style - evaluating your interface
Murdoch University, and the Financial Management Service of the U.S. Treasury have guides to their styles for their developers.Webreview discusses developing such a guide; issues, decisions to be made, etc.
Edit-Work tells how to develop your own style guide and editorialprocedures ...
Apply the Website Design Audit to see how you fare on various style/useability issues.
