Transcript Ch. 11

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
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
1
Understand four principles of design:
•
•
•
•
proximity
alignment
repetition
contrast
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
2
Proximity organizes this image:
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
3
Alignment organizes this image:
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
4
Repetition organizes this image:
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
5
Contrast clarifies this image:
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
6
To plan a design, take these two steps:
• analyze your audience and purpose
• determine your resources
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
7
For multicultural readers, consider four
cultural preferences:
•
•
•
•
paper sizes
typeface preferences
color preferences
text direction
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
8
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.
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
9
Consider these four elements in
designing documents:
•
•
•
•
size (page size and page count)
paper
binding
accessing tools
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
10
Select one of four common types of
bindings:
•
•
•
•
loose-leaf binders
ring or spiral binders
saddle binding
perfect binding
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
11
Consider using six typical accessing aids:
•
•
•
•
•
•
icons
color
dividers and tabs
cross-reference tables
headers and footers
page numbering
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
12
Understand how learning theory relates to
page design:
• chunking
• queuing
• filtering
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
13
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.
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
14
A document bound like a book has these
proportions:
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
15
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.
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
16
Typography includes seven topics:
•
•
•
•
•
•
•
typefaces
families
case
sizes
line spacing
line length
justification
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
17
Different typefaces make different
impressions:
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
18
Two main categories of typefaces are serif
and sans-serif
N
N
serif
sans-serif
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
19
A type family includes many variations
Some of the members of the Helvetica family:
Helvetica
Helvetica Bold
Helvetica Bold Italic
Helvetica Narrow
Helvetica Narrow Bold
Helvetica Narrow Bold Italic
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
20
Case affects readability
Lowercase letters are easier to read:
Individual variations are greater in lowercase words
THAN THEY ARE IN UPPERCASE WORDS.
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
21
Different functions call for different type
sizes:
footnotes
body text
headings
indexes
titles
slides
8- or 9-point type
10-, 11-, or 12-point
2 to 4 points larger than body text
2 points smaller than body text
18 or 24 points
24- to 36-point type
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
22
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.
Summary
In 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.
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
23
Use other design features for clarity and
emphasis:
•
•
•
•
•
rules
boxes
screens
marginal glosses
pull quotes
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
24
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.
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
25
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.
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
26
This is a typical site map:
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
27
This is a typical table of contents:
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
28
Consider these three types of disabilities:
• vision impairment
• hearing impairment
• mobility impairment
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
29
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.
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
30
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.
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
31
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.
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
32
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.
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
33
This is an effective page design:
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
34
This is an effective page design:
Chapter 11. Designing Documents and Web Sites
© 2010 by Bedford/St. Martin's
35