Chapter 8
Document Design 2
Page Layout
1
Creating Visually Effective
Documents
Technical communication is
based on informed choices.
Technical Communication
Ch 8: Page Layout
Document Design 2
2
Creating Visually Effective
Documents
A technical communicator
makes decisions about
aspects of design based on
the audience and purpose.
Technical Communication
Ch 8: Page Layout
Document Design 2
3
Creating Visually Effective
Documents
Readers
- view a page as a whole unit
- scan the page to get a sense of
layout and structure
- determine the page’s “road map”
by looking at title, headings
and subheadings
Technical Communication
Ch 8: Page Layout
Document Design 2
4
Creating Visually Effective
Documents
Visual hierarchy
- shows main items or most important
topics in primary headings
- shows secondary items in second
level of headings or subheadings
Technical Communication
Ch 8: Page Layout
Document Design 2
5
Creating Visually Effective
Documents
Headings and subheadings
- use same (parallel) grammatical
structure
- show the structure (outline) of
the document
Technical Communication
Ch 8: Page Layout
Document Design 2
6
Creating Visually Effective
Documents
Electronic pages
- web pages (often cluttered)
- computer screens (shaped differently)
- electronic text (fuzzier than print)
Technical Communication
Ch 8: Page Layout
Document Design 2
7
Formatting a Page Effectively
Grids
- vertical
- horizontal
- combined
see Fig. 8.3 on p. 135
Technical Communication
Ch 8: Page Layout
Document Design 2
8
Formatting a Page Effectively
White Space
- isolates and emphasizes important
elements and areas
- keeps related elements together
- breaks up regular visual pattern
- provides breathing room between
blocks of information
see Fig. 8.4 on p. 136
Technical Communication
Ch 8: Page Layout
Document Design 2
9
Formatting a Page Effectively
Adjust the gutter
- white space between columns
Use ample margins
- white space around edges of
a page
Technical Communication
Ch 8: Page Layout
Document Design 2
10
Formatting a Page Effectively
Avoid orphans
- a paragraph’s opening line left
at the bottom of the page
Avoid widows
- a paragraph’s closing line left
at the top of the next page
Technical Communication
Ch 8: Page Layout
Document Design 2
11
Formatting a Page Effectively
Lists
- bulleted
- numbered (for series or steps)
Technical Communication
Ch 8: Page Layout
Document Design 2
12
Formatting a Page Effectively
Tips for Lists
Don’t overuse bullets.
Avoid using fancy icons.
Use punctuations only when required.
Use parallel grammatical structure.
Technical Communication
Ch 8: Page Layout
Document Design 2
13
Formatting a Page Effectively
Headings
-
size headings by level
choose appropriate heading size
make headings visually consistent
make headings grammatically parallel
Technical Communication
Ch 8: Page Layout
Document Design 2
14
Formatting a Page Effectively
Tips for Headings
- use no more than 4 levels of heading
- divide the text logically
- do not write the first sentence as a
continuation of the heading
- do not leave a heading floating at
the bottom of a page
Technical Communication
Ch 8: Page Layout
Document Design 2
15
Typography
Fonts
- use fonts from only one typeface
- be consistent if you mix typefaces
- use italics, boldface and all caps
sparingly
- avoid going below 12-point type
- make headings at least 2 points
larger than the text
Technical Communication
Ch 8: Page Layout
Document Design 2
16
Search Options
•
•
•
•
•
Table of contents
Index
Running heads
Running feet
Electronic searching or
“find” feature
Technical Communication
Ch 8: Page Layout
Document Design 2
17
Electronic Documents
•
•
•
•
Web pages
Online help
Adobe Acrobat and PDF files
CDs and other media
Technical Communication
Ch 8: Page Layout
Document Design 2
18
Style Sheets and Tools
• Organizational style guides
• Word-processing and
page layout software
• CSS and HTML web pages
Technical Communication
Ch 8: Page Layout
Document Design 2
19
Web Style Guide
http://webstyleguide.com/wsg3/index.html
Ch 8: Page Layout
Document Design 2
20
Chapter 8
Page Layout
Document Design 2