Creating good web design is more than just makining it look good. The true nature of design demands that the designer understand the complexity of the structure, audience and form in which she is working. The word "design" is both a noun and a verb:

Noun
- visual elements, principles of organization
Verb - methods of creating form and function; communication

BEFORE YOU START:

Form follows function
(forma - shape, structure, idea)

1. (idea) - subject; client/audience; problem
2. (structure) - organization; content, architecture, navigation
3. (shape) - visual properties: color, layout, type, imagery

UNDERSTAND THE JOB:

- Who is your audience? (local? savvy? broadband? culture? protocols?....)

- What is the objective? (All of your design choices should support this goal first and formost.)

- What is the content? (amount? structured? updated? reading? looking? yours? copyrighted? )


START WITH 3:

- Statement of Intent/Design (purpose): To make sure we all get it.

- Site Structure (navigation): Spend lots of time on this; this is your map to sanity.

- Visual Layout (aesthetics): Spend lots and lots of time on this. Use Photoshop, or pen & paper.

If you continue to work with web design, you will save TONS of time on this, which means you have more money for less time. Never start a project without full approval (client) or understanding (collaboration) on all three of these.


JESS'S SUPER TIPS:

Navigation:
* Be Consistant!-- clarity wins over cleverness here.
* Let the content speak for itself.
* Give the user the information straight up.
* Avoid endless "welcome!" pages, and directions for what to click on.

Color:
* Less is More -- use 4 colors or less.
* Expand your color palatte with shades of colors.
* Unless you are making another Star Trek fan site, avoid the RGB colors and this scary purple.
* Consider legibility

Type:
* Choose your fonts carefully - stay within the same 'family'
* Break up paragraphs into small blocks of text - offer PDF links for lengthy text.
* Use <table> for combinations with images, use spacing for margins.
* Type <images> are gifs! - no jpgs for text! ever ever ever!

vs.

Images:
* shoot or scan new images - keep it simple, focus on your subject.
* don't re-compress or re-size images - they will degrade.
* JPG for most photos; GIF for most flat-color graphics, and all text.


DESIGN GUIDES:

Yale Style Guide
(good basic info, nothing too sexy here)
http://info.med.yale.edu/caim/manual/sites/site_design.html

Typographic
(beautiful site with glossary, history, examples)
http://typographic.rsub.com

Color:
(overview of color issues for screen works)
http://www.worqx.com/color/index.htm


DESIGN EXAMPLES:

Cooper-Hewitt Design for Life - navigation & color; typography

Roxx - simplicity; limited color palette

Durfee Foundation - image quality; clarity

Created & maintained by Jess Irish.
Last updated: October 31, 2004
Good advice never expires.