
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 legibilityType:
* 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.htmlTypographic
(beautiful site with glossary, history, examples)
http://typographic.rsub.comColor:
(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.