Web Development & Design Foundations with HTML5

Skip to Content 9th Edition

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 Above/Below the Fold, BrowserShots, and BrowserLab to be helpful.

Design for Your Target Audience

Resources & Chapter Examples

Compelling, intriguing, draws you in... NASA

Busy, getting right down to business... BLS

Target Audience Examples

Design & Usability

Writing for the Web

Typography

Choosing Colors

Color Palette Generators


Accessibility Resources

Accessibility Testing

Color Contrast Testing

 


Surveys & Statistics

Responsive Web Design


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.

Web designers often use "Lorem Ipsum" text as a placeholder for actual text on wireframes. Try out the popular lorem ipsum text generators at http://www.lipsum.com and http://beeripsum.com.

Examples: totheweb.com and gdoss.com

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
Multi-Device Layout Patterns

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:

Flat Web Design Trend

Flat web design is a minimalistic design style that avoids the use of 3D effects such as drop shadows and gradients and, instead, features blocks of color and distinctive typography. Visit the resources listed below to explore this design trend:

Web Design Best Practices

As you begin to design your own web pages and more criticaly review the web sites built by others, check out this checklist of Web Design Best Practices.

Review Activities

Review game activities are available for this chapter.
Check your knowledge of chapter terms and concepts.

Chapter Updates

  • Page 209, Last Paragraph
    In 2017, an update to Section 508 Standards became official which requires meeting the requirements of WCAG 2.0 Level A & AA Success Criteria.

Questions or Comments?

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