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

Chapter 11. Designing Documents and Web Sites © 2010 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


Understand four principles of design:

• proximity• alignment• repetition• contrast


Proximity organizes this image:


Alignment organizes this image:


Repetition organizes this image:


Contrast clarifies this image:


To plan a design, take these two steps:

• analyze your audience and purpose• determine your resources


For multicultural readers, consider four cultural preferences:

• paper sizes• typeface preferences• color preferences• text direction


Determine your resources

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

and print shops?• Equipment. Complex designs require graphics

software and desktop-publishing programs.


Consider these four elements in designing documents:

• size (page size and page count)• paper• binding• accessing tools


Select one of four common types of bindings:

• loose-leaf binders• ring or spiral binders• saddle binding• perfect binding


Consider using six typical accessing aids:

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


Understand how learning theory relates to page design:

• chunking• queuing• filtering


Margins have four purposes:

• to limit the amount of information on the page, making it easier to read and use

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

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


A document bound like a book has these proportions:


A multicolumn design can have 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 topics:

• typefaces• families• case• sizes• line spacing• line length• justification


Different typefaces make different impressions:


Two main categories of typefaces are 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 functions call for different type sizes:

footnotes 8- or 9-point type

body text 10-, 11-, or 12-point

headings 2 to 4 points larger than body text

indexes 2 points smaller than body text

titles 18 or 24 points

slides 24- to 36-point type


Use line spacing carefully in 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 features for clarity and emphasis:

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


Use these five principles in designing effective Web sites and pages:

• Create informative headers and footers.• Help visitors navigate the site.• Create extra features readers might need.• Design for readers with disabilities.• Design for a multicultural audience.


Use these five guidelines for making your site easy to navigate:

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

pages.• Help visitors 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:


This is a typical table of contents:


Consider these three types of disabilities:

• vision impairment• hearing impairment• mobility impairment


Follow these three suggestions when writing for multicultural audiences:

• Use short sentences and paragraphs.• Avoid idioms, both verbal and visual, that

might be confusing.• If a large percentage of your visitors speak a

language other than English, consider creating a version of your site in that language.


Use these four guidelines to design a simple site:

• Use simple backgrounds.• Use conservative color combinations to

increase text legibility.• Avoid decorative graphics.• Use thumbnail graphics.


Follow these three guidelines to make the text easy to read:

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


Follow these three guidelines for writing clear, informative links:

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

• Indicate what information the linked page contains.

• Don’t change the colors of the text links.


This is an effective page design:


This is an effective page design: