Page Design

Overall design issues

Know audience expectations Know client expectations Maintain a consistent look and feel Consider how each page will look before

starting the work.– Each page must be part of a whole– Prevents having the 1 page that looks awkward

Design points

Audience needs come first– What are audience goals and information needs

Obvious organization -- lead the reader– Informative headings– Enough white space to show structure

Design to draw reader in How does it look at 10 feet? A well designed document

will look good at a distance, even though you can’t read the text. A poorly designed document will become a gray blob.

Which of these two pages would you want to read?

Align with tabs, not spaces

Lists

Why use lists

Lists help the reader find information easier and also improves later recall of the information on the list.

The white space that surrounds the list also helps give the page a less dense appearance.

Types of list

Bullet lists– unordered items

Numbered lists– when order matters

Simple lists– short lists

Items for a bullet list

advice or examples conclusions and recommendations criteria for evaluation errors to avoid materials and equipment for a procedure parts of a mechanism

Numbered List

1.materials and equipment for a procedure

2.parts of a mechanism

3.steps or events in a sequence

Simple List

materials and equipment for a procedure

parts of a mechanism

steps or events in a sequence

Combining list types

List questions

What determines if you should use a bullet list or a numbered list?

What list would you use for the following:– To program your VCR for recording:– Tools required to change the fuel pump:– We believe more parking spaces are needed:– To prepare the the sauce for the cake:– For a longer life, eat these fruits:

Format lists properly

Adjust the tabs. Word defaults are poor. Use bullets. Never a dash or asterisk.

Poor hotel information

all corporate approved hotels in Charleston and Columbia

– Charleston: Best Western555-0961 53

– Charleston: Days Inn555-1393 48

– Charleston: Holiday Inn555-2395 63

– Columbia: Best Western555-9400 59

– Columbia: Carolina Inn555-8282 77

Better hotel information

all corporate approved hotels in Charleston and Columbia

– City Hotel Phone Rates

– Charleston Best Western 555-0961 53

– Charleston Days Inn 555-1393 48

– Charleston Holiday Inn 555-2395 63

– Columbia Best Western 555-9400 59

– Columbia Carolina Inn 555-8282 77

End

Fonts

Serif and sans serif fonts

Serifs are the tails on the letters Serif leads the eye from letter to letter At large font sizes, the serifs get too big

Sans serif fonts

Note varying line weights on Optima

Serif fonts

Display fonts

Font tone

Each font carries a visual tone that affects how the reader reacts to the text

Can be

Letter sizes of various fonts

Actual letter size varies between fonts This can make a font more or less readable

All 72 point fonts

Length of 1 alphabet

Proportional fonts

Each letters gets the space proportional to the amount it needs

I gets less space than M

Non-proportional fonts

Each letters gets the same space I gets exactly as much space as M

Which is which

iiiiiiiiiiiiiiiMMMMMMMMMMMMMMM

iiiiiiiiiiiiiiiMMMMMMMMMMMMMMM

All four lines have 15 letters.

Which is which - answer

iiiiiiiiiiiiiii non-proportionalMMMMMMMMMMMMMMM

iiiiiiiiiiiiiii proportionalMMMMMMMMMMMMMMM

All four lines have 15 letters.

Type anatomy

Points x height

Body size Baseline

Paragraph formatting

Technical paragraph style

No first line indent Single spaced Blank line between paragraphs

Technical paragraph formatting

Line spacing

Also called Leading Double or 1.5 is usually too much Can be set in small increments Some fonts look better with slightly more

leading Small changes can have large effect on

document length

Line spacing examples

12 pt

15 pt

18 pt

Line spacing

12 pt

10 pt

8 pt

Blank line between paragraphs

Use your tools, not extra returns

Text justification

Four options– Justified left, ragged right– Full justified– Ragged left, justified right– Centered

Left justified, ragged right Easiest to read Broken right edge

helps eye remain oriented

Gives overall page a distinct shape for later recall

Full justified

Both left and right hand sides are justified

Not as easy to read Page lacks distinct shape Most publishers use this Word processors are bad

at good justification

Ragged left, justified right

Hard for eye to find new line

Only use for special effects

Never use for large text blocks

Centered

Hard to read Eye can’t find new line Use for special effect Each line should stand

alone

Line length

Best line is about 2 alphabets long– Actual length varies depending on the font

Too short, the eye is always doing a “fly back”

Too long, the eye gets lost on the “fly back” Longer lines require more line spacing

Line length and paragraph width

If the material will be scanned for specific information, indent the text from the headings.

Longer page count = $$

Line length and paragraph width

If the text will be read in long blocks, align the text with the headings.

Saves page count

Hanging indents

First line flush and rest are indented Useful for definition lists

Tips for the word processor– Set tab properly– Define hanging indent.– Never try to use hard returns and spaces.

Setting the hanging indent

Setting line spacing

Widows and orphans

Widows and orphans

Heading at bottom of pageOne line of paragraph at top of a page

Don’t let them happen During final pass, add hard page breaks or

adjust leading/kerning

Widows and orphans

Margins

Margins

Size of margin affects– Readability (line length)

– Page appearance (how dense) Margin widths– Top can be smaller than bottom (2 lines)

– Allow proper space for binding margin

Margins

Even and odd pages can vary

Margins in Word

Margins are a section setting

Each setting can have different margins

File-Page Setup

Scholars margin

Wide blank margin on the page Allows notes either from the author or from

the reader Helps keep line length optimal Very hard to do in Word

Scholars margin

Examples for analysis

End