how to get the right mix of text,

graphics, color, and impact

 Objectives
1. To know the basic elements of page design
2. To understand what constitutes a good page
design
3. To be familiar with various design techniques that
maximizes readability and visual impact.

4. To learn proper design applications for Power

Point, Reports, Info Posters, and various office
desktop publishing needs.
What is a
Page
Layout?
Uses for Page Layout
• Data Reports
• Letterheads
• Newsletters
• Posters
• PowerPoint Presentation
• Etc.
Page Design Elements
 Typography
Typography plays a double role as both
verbal and visual communication.

Use typeface to create a personality for

work: Each typeface speaks in a different
tone of voice.

Typefaces: Two font families

Serif
Sans serif
 Serif vs Sans Serif

Sanserif Z Serif Z
clear busy
Sans Serif vs Serif Typefaces
Selection of Typeface

Lorem ipsum frangali puttuto Lorem ipsum frangali

rigali fortuitous confulence puttuto rigali fortuitous
magficati alorem. Lorem confulence magficati
ipsum frangali puttuto rigali alorem. Lorem ipsum
fortuitous confulence frangali puttuto rigali
magficati alorem. fortuitous confulence
magficati alorem.

Times New Roman 18 pt Arial 18 pt

32% 68%
 Typography
• Don’t use more than 2 typefaces on one
page without a good reason
• Sans serif fonts usually work better on
screen
• Use the right Typefaces for the right
purpose
• Create impact through simplicity
• Don’t use all capital letters
 Read this:
Aoccdrnig to a rscheearch at
Cmabrigde Uinervtisy, it deosn't mttaer
in waht oredr the ltteers in a word are,
the olny improetnt tihng is taht the frist
and lsat ltteer be at the rghit pclae. The
rset can be a total mses and you can
sitll raed it wouthit porbelm.

Tihs is bcuseae the huamn mnid deos

not raed ervey lteter by istlef, but the
wrod as a wlohe.
 And this:
CMABRIGDE UINERVTISY, IT DEOSN'T
MTTAER IN WAHT OREDR THE LTTEERS
IN A WORD ARE, THE OLNY IMPROETNT
TIHNG IS TAHT THE FRIST AND LSAT
LTTEER BE AT THE RGHIT PCLAE. THE
RSET CAN BE A TOTAL MSES AND YOU
CAN SITLL RAED IT WOUTHIT PORBELM.
TIHS IS BCUSEAE THE HUAMN MNID
DEOS NOT RAED ERVEY LTETER BY
ISTLEF, BUT THE WROD AS A WLOHE.
Make It Clear (Fonts)
• Serif fonts are difficult to read on screen
• Sanserif fonts are clearer
• Italics are difficult to read on screen
• Normal or bold fonts are clearer
• Underlines may signify hyperlinks
• Instead, use colors to emphasise
 Graphics as a
Design Element
The choice of images and
their placement within a
document provide
information about the
document, its purpose, and
its organization.

Graphics, Images or Photos can provide

additional info to complement your text or supply
motion and emotion to your page layout
 Choosing Graphic
File Formats
There are two basic formats: bitmap or pixel-
based and vector.

Most graphics file formats are either bitmap

or vector. GIF, PCX, JPG, and TIFF are
bitmap examples.
Choosing Graphics
Christchurch Dunedin Wellington
January 11,532,234 14,123,654 3,034,564
February 1,078,456 12,345,567 16,128,234
March 17,234,778 6,567,123 16,034,786
April 16,098,897 10,870,954 7,940,096
May
June Too detailed !
8,036,897 10,345,394
16,184,345 678,095
14,856,456
4,123,656
July 8,890,345 15,347,934 18,885,786
August 8,674,234 18,107,110 17,230,095
September 4,032,045 18,923,239 9,950,498
October 2,608,096 9,945,890 5,596,096
November 5,864,034 478,023 6,678,125
December 12,234,123 9,532,111 3,045,654
Choosing Graphics
In 106 Christchurch Dunedin Wellington
January 11 14 3
February 1 12 16
March 17 6 16
April 16 10 7
May 8 10 14
June 16 0 4
July Much Simpler8 15 18
August 8 18 17
September 4 18 9
October 2 9 5
November 5 0 6
December 12 9 3
 Choosing Graphics
50
Wellington
45
Dunedin
40
Christchurch
35
30
25 Too
20
15 detailed !
10
5
0January February March April May June July August September October November December
 Choosing Graphics
50
Wellington
Dunedin
Christchurch
40

30
Much
20
Simpler
10

0
January March May July September November
How to Modify Graphics

Flip

Resize

Rotate
How to Modify Graphics

Stretch, Skew,
Distort

Crop Colorize
Size implies importance
 Keep It Simple (Picture)
• Art work may distract your audience
• Artistry does not substitute for content
 Color in Design
Physical and Cultural Color Reactions
Sometimes colors create a physical reaction
(red has been shown to raise blood pressure)
and at other times it is a cultural reaction (in
the U.S. white is for weddings.
 Color in Design
Color Relationships
In addition to
understanding color
meanings, it helps with
mixing and matching
colors to know the
relationship of adjacent,
complementary, and
clashing colors.
 Color in Design
Cool Color Meanings
(calming): Blue, Green, Turquoise, Silver

Warm Color Meanings (exciting):

Red, Pink, Yellow, Gold, Orange

Mixed Cool/Warm Color Meanings:

Purple, Lavender, Green, Turquoise

Neutral Color Meanings (unifying):

Brown, Beige, Ivory, Gray, Black, White
 Contrast Colors

This is dark on light

This is light on dark
 Complement Colors
• Use contrasting colors
• Light on dark vs dark on light
• Use complementary colors
These colours do not complement

• Use contrasting colors

• Light on dark vs dark on light
• Use complementary colors
These colours complement
 Spacing
White space is the absence of text and
graphics. It breaks up text and graphics. It
provides visual breathing room for the eye.
Xxxxxxxxxxxxxxxxxxxxxxxxx Xxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx
Xxxxxxxxxxxxxxxxxxxxxxxxx Xxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx Xxxxxxxxxxxxxxxxxxxxxxxxx
Xxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx
Xxxxxxxxxxxxxxxxxxxxxxxxx - Xxx xxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx - Xx xxxxxxxxxxx
Xxxxxxxxxxxxxxxxxxxxxxxxx - Xxxxxxxx xxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx - Xxx xxxxxxxxxxxxxxx
Xxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx
Xxxxxxxxxxxxxxxxxxxxxxxxx Xxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx Xxxxxxxxxxxxxxxxxxxx
Xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx
Spacing
Margins can convey a
specific tone, make
the page easier or
harder to hold or read,
and margins can affect
the cost of the printed
piece as well.
 How To
Add Spacing
•Increase paragraph spacing.
•Increase space between columns of text.
•Put space at the end of lines of text.
•Put more space around outer edges of page.
•Leave more room around graphics.
•Increase space around headlines.
•Increase space between lines of type and
individual characters.
Principles of
Design
 Principles of Design
Generally, all the principles of design apply to any
piece you may create. How you apply those principles
determines how effective your design is in conveying
the desired message and how attractive it appears.

•Balance
•Proximity
•Alignment
•Repetition
•Contrast
•White Spaces
Balance

Visual balance comes from

arranging elements on the
page so that no one section is
heavier than the other. Or, a
designer may intentionally
throw elements out of
balance to create tension or
a certain mood.
The Principle of Balance
Primarily there are three types of balance in
page design:
•symmetrical
•asymmetrical
•radial
 The Rule of Thirds
Most designs can be made more interesting by visually
dividing the page into three parts and placing the most
important elements within those thirds.
 Visual Center
and Balance
Placing important elements or the focal point
of the design within the visual center of a
piece is another design trick.
Proximity and Unity

How close together or far

apart elements are placed
suggests a relationship (or
lack of) between otherwise
disparate parts.
Alignment

Alignment is the placement

of text and graphics so
they line up on the page.
It's one of the principles of
design that help us create
attractive, readable pages.
 Alignment
Use alignment to:
•create order
•organize page elements
•group items
•create visual connections

Good alignment is invisible. Most readers won't

consciously notice that everything is lined up neatly
but they will feel it when things are out of alignment.
 Use Two or More of the
Same Design Element

Repeating design elements

and consistent use of type
and graphics styles within a
document shows a reader
where to go and helps them
navigate your designs and
layouts safely.
Contrast

In design, big and small

elements, black and
white text, squares and
circles, can all create
contrast in design.
Contrast helps different
design elements stand
out.
 Emphasize Difference
Between Design Elements
Contrast occurs when two
elements are different.
The key to working with
contrast is to make sure
the differences are obvious.
Four common methods of creating contrast are by
using differences in size, value, color, and type.
White Spaces
Designs that try to cram
too much text and
graphics onto the page
are uncomfortable and
may be impossible to
read. White space
gives your design
breathing room.

White space is any color.

Use Fewer Fonts
Tone down the type.
In most documents,
two or three faces
are more than
enough.
Avoid Typing in ALL CAPS
On-line TYPING IN ALL CAPS is considered
shouting and is frowned on in most cases. It’s
hard to read. Just don’t do it, PLEASE!
 Overuse of Frames
and Boxes

A frame loses its

ability to emphasize
blocks of text if every
other block on the
page is boxed.
 Excessive Use
of Graphics
Use clip art with moderation and with purpose. Use
clip art that supports your text or illustrates a point.
Amateurish Punctuation
 Outline
What is a Page Layout
Uses for Page Layout
Principles of Page Design

Elements of Page Design

Creating a Page Layout
Composing Page Elements
Elements of a Good Page Design
General Guidelines for Good Page Design
Composing Page Elements
Choosing Fonts
Choosing Artwork
Working With Text
Working With Images

Best Layout practices

Design Disasters to avoid
Make It Big (How to Estimate)
Look at it from 7 feet away
7 ft