Review Games

Review Games

Flash Cards
Pick a Letter
Fill in the Blank
Matching
Crossword Puzzle
iPod Activities

Resources

W3C
HTML Validator
HTML Reference

CSS Validator
CSS Property Review
CSS Reference

Color Chart
Design Checklist
Fireworks Tutorial
Flash Tutorial
Photoshop Tutorial

A List Apart
SitePoint
Good Experience
Digital Web
Smashing Mag
Web Designer Mag
WPDFD

Dreamweaver
Expression Web

More Resources

Web Design Tip

Choosing colors for a web site can be a difficult task. One method is to use the colors found on the corporate logo or main image of the web site.

Choosing colors used in a central image usually results in color combinations that are pleasing. By repeating the colors found in the central image on other places in the page, a sense of unity is created.


RSS News Feed

 

 

Chapter 5 Web Design

As a web site visitor, you have probably found that certain web sites are appealing and easy to use while others seem awkward or just plain annoying.

What separates the good from the bad?

This chapter discusses recommended web site design practices. The topics include site organization, site navigation, page design, text design, graphic design, and accessibility considerations.

Whatever your personal preferences, your web site should be designed to appeal to your target audience — the people who will use your web site. They may be teens, shoppers, college students, young couples, the list goes on and on. All of the recommended web site design practices should be followed with an eye on your target audience.

Beginning web developers often tend to design web sites that look great on their own computers but may not display well on those of their target audience. While there is no substitution for testing on multiple devices with different screen resolutions, you may find BrowserSize, BrowserShots, and BrowserLab to be helpful.

Resources & Chapter Examples

Compelling, intriguing, draws you in... NASA

Busy, getting right down to business... BLS

Target Audience Examples

Site Organization

Navigation Examples

Page Layout Examples

Site Search Features

Surveys & Statistics

Wireframes

A wireframe is a sketch or blue-print of a Web page that depicts the structure (but not the detailed design) of basic page elements such as the logo, navigation, content, and footer.

Depending on the purpose of a particular Web site, the wireframe may incorporate additional components including pull quotes, news items, and interactive features such as a login or search function.

Wireframes are used as part of the design process to experiment with various page layouts, develop the structure and navigation of the site, and provide a basis for communication between the project members.

Examples: totheweb.com and gdoss.com

Design & Usability

Web Site Design Patterns

A design pattern is a a standard solution to common problems in software design. You may find the following sites helpful as you explore the area of web design.

Web Design Patterns
Designing Interfaces
WebPatterns.org

Accessibility

Writing for the Web

Random Organization Example

Although this Flash-based site has one main entry point, the remaining navigation has a random nature -- with visitors using a big pencil as a cursor. Text navigation links are provided in the lower-right corner for "linear thinkers".

Is this site usable? Is this site accessible? Does it meet the needs of its target audience? What do you think?

Design Inspiration

Webdesignfromscratch.com offers a survey of current web design styles and a useful overview of Web 2.0 design considerations. Interesting reading!

Here's a collection of sites that showcase new, trendy, and/or inspiring design:

Chapter Updates

No errors have been reported for Chapter 5.

Questions or Comments?

The author would like to hear from you!
Send an e-mail to webdevfoundations@gmail.com

Copyright © 2009 Terry Felke-Morris
Last Updated on 12/22/2009