Chapter 3 – Web Design Basics
As a website visitor, you have probably found that certain websites 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 website design practices. The topics include site organization, site navigation, page design, text design, graphic design, and accessibility considerations. Resource websites and chapter links are listed below.
Design for Your Target Audience
Web Design Best Practices Checklist
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 criteria listed at the Web Design Best Practices Checklist 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 BrowserShots and BrowserLab to be helpful. Visit Net Market Share and StatCounter for updated browser and device 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 website, 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.
Wireframe examples: totheweb.com and gdoss.com
Resources & Chapter Links
Compelling, intriguing, draws you in... Visit Sedona
Busy, getting right down to business... BLS
Accessibility
- "The Internet is for Everyone"
- Web Accessibility Initiative
- WAI Quick Tips
- WCAG 2.0
- Section 508
- WebAIM Checklist
- a11yproject.com
- Color Perception Deficiency
Text Considerations
- Common "Web-safe" Fonts
- Easy-to-read Fonts
- Serif or Sans Serif?
- Serif VS. Sans: The Final Battle
- Readability: the Optimal Line Length
- WebAIM Color Contrast Checker
Choosing Colors
- http://paletton.com (formerly http://www.colorschemedesigner.com)
- http://colrd.com
- http://www.colorsontheweb.com/colorwizard.asp
- http://meyerweb.com/eric/tools/color-blend/
- http://0to255.com
- https://kuler.adobe.com
- CSSdrive Colors Pallete Generator
- Pictaculous.com
- Colorspire
- WebAIM Color Contrast Checker
Layout Examples
Free Image Editors
Surveys & Statistics & Tools
- Clickz Stats
- Net Market Share Browser Statistics
- PEW Internet & American Life Project
- Comscore Press Releases
- Netratings Press Releases
- Download Time Calculator
Responsive Web Design
Chapter Updates
- Page 105, #1, f
Should be: "Describe how the design principles of contrast, repetition, alignment, and proximity are applied. Be specific."
- Page 107, Step 4
This step should refer to Figures 3.34-3.37 instead of Figures 3.27-3.30.
Questions or Comments
The author would like to hear from you!
Feel free to complete the contact form with your questions or comments.
Review Games
Review activities are available for this chapter. Check your knowledge of chapter terms and concepts.
Web Design Tips
- Choosing colors for a website can be a difficult task. One method is to use the colors found on the corporate logo or main image of the website.
- 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.
- See Chapter 5 for resources to help you choose colors for your website
Design Inspiration
WebDesignFromScratch.com offers a Web 2.0 Design Guide. Check out DesignModo's overview of web design trends. Interesting reading!
Here's a collection of sites that showcase new, trendy, and/or inspiring design:
- CSS Remix
- The FWA
- CSS Dance
- CSS Heaven
- Design Snack
- CSS Nature
- Best of the Web Gallery
- Best Web Gallery
- CSS Gallery
- Cool Home Pages
- HostPattern
Writing for the Web
- How Web Users Read
- Writing Microcontent
- Be Succinct!
- Writing Well for the Web
- Web Typography Examples
- Serif or Sans-serif?
- Serif VS. Sans: The Final Battle
- Readability: the Optimal Line Length
- Text Font Readability
- Writing for Low-Literacy Users Jakob Nielsen's suggestions for adjusting your pages to be easier to read by low-literacy readers — a growing group of Web visitors.
Target Audience Examples
- U.S. Mint for Kids
- Sesame Street Games
- World of Warcraft
- NIN
- Threshold RPG
- National Park Service
- Visit Sedona
- Door County Visitor Bureau
- AARP
- NIH Senior Health
- The Seniors Coalition
Navigation Examples
Design & Usability
Resources