Chapter 7. Designing Documents and Web Sites © 2013 by Bedford/St. Martin's1 Document and Web design has five goals: to make a good impression on readers

Chapter 7. Designing Documents and Web Sites © 2013 by Bedford/St. Martin's 1

Document and Web design has five goals:

• to make a good impression on readers• to help readers understand the structure and

hierarchy of the information• to help readers find the information they need• to help readers understand the information• to help readers remember the information


To plan a design, take these two steps:

• Analyze your audience and purpose.• Determine your resources.


For multicultural readers,consider four cultural preferences:

• paper size• text direction• typeface preferences• color preferences


Determine your resources:

• Time. What is your schedule?• Money. Can you afford professional

designers, print shops, and Web developers?• Equipment. Do you have graphics software,

desktop-publishing programs, and a printer?


There are four principles of design:

• proximity• alignment• repetition• contrast


Proximity organizes this image:

Source: U.S. Department of State, 2011 <http://future.state.gov>.


Alignment organizes this image:

Source: Carnegie Science Center, n.d.


Repetition organizes this image:

Source: Myers, 2007, p. 362.


Contrast clarifies this image:

Source: Lambert Coffin, 2010 <www.lambertcoffin.com/index.php?sid=2>.


Understand how learningtheory relates to page design:

• chunking• queuing• filtering


Consider using six typical accessing aids:

• icons• color• dividers and tabs• cross-reference tables• headers and footers• page numbering


Use two elementsto create your page layout:

• page grids• white space


Margins have four purposes:

• They limit the amount of information on the page, making the document easier to read.

• They provide space for binding and allow readers to hold the page without covering up the text.

• They provide a neat frame around the type.• They provide space for marginal glosses.


A document bound like a bookhas these margins:


A multicolumn designoffers three advantages:

• Text is easier to read because the lines are shorter.

• Columns allow you to fit more information on the page.

• Columns let you use the principle of repetition to create a visual pattern.


Typography includes seven elements:

• typefaces• type families• case• type size• line length• line spacing• justification


Different typefacesmake different impressions:

This paragraph is typed in Monotype Corsiva typeface. You are unlikely to see this style of font in a technical document because it is too ornate and too hard to read.

This paragraph is Times Roman, an effective typeface for text in the body of technical documents.

This paragraph is Tahoma, which has a modern, high-tech look. It is best suited for headings and titles in technical documents.


Two main categories of typefacesare serif and sans serif:

N Nserif sans serif


A type family includes many variations:

Some of the members of the Helvetica family:

Helvetica

Helvetica Bold

Helvetica Bold Italic

Helvetica NarrowHelvetica Narrow Bold

Helvetica Narrow Bold Italic


Case affects readability:

Lowercase letters are easier to read:

Individual variations are greater in lowercase words

THAN THEY ARE IN UPPERCASE WORDS.


Different functionscall for different type sizes:

• footnotes: 8- or 9-point type• indexes: 2 points smaller than body text• slides or transparencies: 24- to 36-point type


Use line spacing carefullywhen designing headings:

Summary

In this example, the writer has skipped a line between the heading and the text that follows it.

SummaryIn this example, the writer has not skipped a line. The heading stands out, but not as emphatically.

Summary. This run-in style makes the heading stand out the least.


Use other design featuresfor clarity and emphasis:

• rules• boxes• screens• marginal glosses• pull quotes


These seven principles will help youdesign effective Web sites and pages:

• Create informative headers and footers.• Help readers navigate the site.• Include extra features readers might need.• Help readers connect with others.• Design for readers with disabilities.• Design for multicultural readers.• Design simple, clear Web pages.


Follow these five guidelines formaking your site easy to navigate:

• Include a site map or index.• Use a table of contents at the top of long

pages.• Help readers get back to the top of long

pages.• Include a link to the home page on every

page.• Include textual navigational links at the bottom

of the page.


This is a typical site map:

Source: National Institutes of Health, 2010 <www.genome.gov/sitemap.cfm>.


This is a typical table of contents:

Source: U.S. Copyright Office, 2010 <www.copyright.gov/help/faq>.


Consider these three types of disabilities:

• vision impairment• hearing impairment• mobility impairment


Follow these three suggestionswhen designing for multicultural audiences:

• Use common words and short sentences and paragraphs.

• Avoid idioms, both verbal and visual, that might be confusing.

• If a large percentage of your readers speak a language other than English, consider creating a version of your site in that language.


Follow these three guidelinesfor designing a simple site:

• Use conservative color combinations to increase text legibility.

• Avoid decorative graphics.• Use thumbnail graphics.


Follow these three suggestionsto make text easy to read:

• Keep the text short.• Chunk information.• Make the text as simple as possible.


Follow these two suggestionsto write clear, informative links:

• Structure your sentences as if there were no links in your text.

• Indicate what information a linked page contains.