Chapter 11. Designing Print and Online Documents

*
Chapter 11. Designing Print and Online Documents
© 2015 by Bedford/St. Martin's
Chapter 11 Overview:
Designing Print and Online Documents
Goals of document designUnderstanding design
principlesPlanning the design of print and online
documentsDesigning print documentsDesigning print pages
Designing online documentsDesigning online pages
*
*
You have five goals when designing documents and websites:
to make a good impression on readersto help readers understand
the structure and hierarchy of the informationto help readers
find the information they needto help readers understand the
informationto help readers remember the information
*

*
Four principles of design help you make choices for your
documents and websites:
proximityalignmentrepetitioncontrast
*
*
Proximity organizes this image:
Source: U.S. Department of State, 2011
<http://future.state.gov>.
*
*
Alignment organizes this image:
Source: National Institutes of Health, 2013a:
http://grants.nih.gov/grants/ElectronicReceipt/faq_full
.htm#application.

*
*
Repetition organizes this image:
Source: Excerpt from A HISTORY OF WESTERN SOCIETY,
Eleventh Edition (Boston: Bedford/St. Martin’s, 2014). John P.
McKay; Clare Haru Crowston; Merry E. Wiesner-Hanks; Joe
Perry, p. 319.
*
*
Contrast clarifies this image:
Source: U.S. Department of State, 2013:
http://eca.state.gov/impact.
*
*

To plan a design, take these two steps:
Analyze your audience and purpose.Determine your resources.
*
*
For multicultural readers,
consider cultural variations in four areas:
paper sizetypeface preferencescolor preferencestext direction
*
*
Determine your resources:
Time. What is your schedule?Money. Can you afford
professional designers, print shops, and online-content
developers?Equipment. Do you have graphics and web software,
layout programs, and a color printer?
*

*
Consider these four elements
when designing print documents:
size (page size and page count)paperbindingsaccessing aids
*
*
Select one of four
common types of binding:
loose-leaf bindersring or spiral binderssaddle bindingperfect
binding
*
*
Consider using six typical accessing aids:
iconscolordividers and tabscross-reference tablesheaders and
footerspage numbering

*
*
Understand how learning
theory relates to page design:
chunkingqueuingfiltering
*
*
Use two elements
to create your page layout:
page gridswhite space
*
*
Margins have four purposes:

to limit the amount of information on the page, making the
document easier to read and useto provide space for binding and
allow readers to hold the page without covering up the textto
provide a neat frame around the typeto provide space for
marginal glosses
*
*
A document bound like a book
has these margins:
*
*
A multicolumn design
offers three advantages:
Text is easier to read because the lines are shorter.Columns
allow you to fit more information on the page.Columns enable
you to use the principle of repetition to create a visual pattern.
*

*
Typography includes seven topics:
typefacestype familiescasetype size
line lengthline spacingjustification
*
*
Different typefaces
make different impressions:
*
*
Two main categories of typefaces
are serif and sans serif:

N N
serif sans serif
serifs
*
*
A type family includes many variations:
*
*
Case affects readability:
*
*

Different functions
call for different type sizes:
footnotes 8- or 9-point type
body text 10-, 11-, or 12-point type
headings 14-point type
indexes 2 points smaller than body text
titles 18 or 24 points
slides 24- to 36-point type
*
*
Use line spacing carefully
when 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.

*
*
Use other design features
for clarity and emphasis:
rulesboxesscreensmarginal glossespull quotes
*
*
These seven principles will help you
design effective online documents:
Use design to emphasize important information.Create
informative headers and footers.Help readers navigate the
document.Include extra features readers might need.
*
*

These seven principles will help you
design effective online documents (cont.):
Help readers connect with others.Design for readers with
disabilities.Design for multicultural readers.
*
*
Follow these three guidelines for emphasizing important
information:
Decide what types of information are most essential for your
audience.Give all navigational features clear, informative
headings.Adhere to design principles rigorously.
*
*
Follow 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 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.

*
*
An example of a typical site map:
Courtesy Micron Technology, Inc.
*
*
An example of a typical table of contents:
Source: U.S. Department of Commerce, 2013:
www.stopfakes.gov/faqs.
*
*
Include extra features
your readers might need:

an FAQ pagea search page or engineresource linksa printable
version of your sitea text-only version of your document
*
—JMR
*
Help your readers connect with others:
Direct readers to your organization’s discussion boards and
blogs, if you have them.Direct readers to your organization’s
social-media sites, such as Facebook and Twitter.Direct readers
to interactive features of your organization’s website.
*
*
Consider these three types of disabilities:
vision impairmenthearing impairmentmobility impairment
*

*
Follow these three suggestions
when 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 four guidelines
for designing a simple site:
Use simple backgrounds.Use conservative color combinations to
increase text legibility.Avoid decorative graphics.Use thumbnail
graphics.
*
*

Follow these three suggestions for
making text easy to read:
Keep the text short.Chunk information.Make the text as simple
as possible.
*
*
Follow these three suggestions for creating
clear, informative links:
Structure your sentences as if there were no links in your
text.Indicate what information the linked page contains.Use
standard colors for text links.
*
*
An example of an “About Us” page:
Source: National Institutes of Health, 2014:
http://www.nih.gov/about/.
*

*
An example of an app designed for
a small screen:
Source: National Gallery of Art, 2013:
http://apps.usa.gov/yourart.shtml.
*

Chapter 11. Designing Print and Online Documents

Recommended

Recommended

More Related Content

Similar to Chapter 11. Designing Print and Online Documents

Similar to Chapter 11. Designing Print and Online Documents (20)

More from EstelaJeffery653

More from EstelaJeffery653 (20)

Recently uploaded

Recently uploaded (20)

Chapter 11. Designing Print and Online Documents