page layout and design basics

8/8/2019 Page Layout and Design Basics

1/58

how to get the right mix of text,

graphics, color, and impact


2/58

Objectives

1. To know the basic elements of page design

2. To understand what constitutes a good page

design3. 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 officedesktop publishing needs.


3/58

What is a

PageLayout?


4/58

Uses forPage Layout

Data Reports

Letterheads

Newsletters

Posters

PowerPoint Presentation Etc.


5/58

Page Design Elements


6/58


7/58

Typography

Typography plays a double role as both

verbaland visualcommunication.

Use typeface to create a personality for

work: Each typeface speaks in a different

tone of voice.

Typefaces: Two font familiesSerif

Sans serif


8/58

Sanserif Z Serif Z

Serifvs Sans Serif

busyclear


9/58

Sans Serifvs SerifTypefaces


10/58

SelectionofTypeface

Lorem ipsum frangali puttuto

rigali fortuitous confulence

magficati alorem. Lorem

ipsum frangali puttuto rigalifortuitous confulence

magficati alorem.

Lorem ipsum frangali

puttuto rigali fortuitous

confulence magficati

alorem. Lorem ipsumfrangali puttuto rigali

fortuitous confulence

magficati alorem.

Times New Roman 18 pt

32%

Arial 18 pt

68%


11/58

Typography

Dont use more than 2 typefaces on onepage without a good reason

Sans serif fonts usually work better onscreen

Use the right Typefaces for the rightpurpose

Create impact through simplicity

Dont use all capital letters


12/58

Read this:

Aoccdrnig to a rscheearch atCmabrigde Uinervtisy, it deosn'tmttaer in waht oredr the ltteers in aword are, the olny improetnt tihng is

taht the frist and lsat ltteer be at therghit pclae. The rset can be a totalmses and you can sitll raed it wouthitporbelm.

Tihs is bcuseae the huamn mnid deosnot raed ervey lteter by istlef, but thewrod as a wlohe.


13/58

And this:

CMABRIGDE UINERVTISY, IT DEOSN'TMTTAER IN WAHT OREDR THELTTEERSINA WORDARE, THEOLNY IMPROETNT

TIHNG IS TAHT THE FRIST ANDLSATLTTEER BEAT THE RGHIT PCLAE. THERSET CANBEA TOTALMSESANDYOUCANSITLL RAED IT WOUTHIT PORBELM.TIHS ISBCUSEAE THEHUAMNMNID

DEOSNOT RAEDERVEYLTETER BYISTLEF, BUT THE WRODASA WLOHE.


14/58

Serif fonts are difficult to read on screen

Sanserif fonts are clearer

Italics are difficult to read on screen

Normal orbold fonts are clearer

Underlines may signify hyperlinks

Instead, use colors to emphasise

Make It Clear(Fonts)


15/58


16/58

Graphics as a

Design Element

The choice of images and

their placement within adocument 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


17/58

ChoosingGraphic

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 arebitmap examples.


18/58

ChoosingGraphicsChristchurch 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 8,036,897 10,345,394 14,856,456

June 16,184,345 678,095 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

Toodetailed !


19/58

In106 Christchurch Dunedin Wellington

January 11 14 3

February 1 12 16

March 17 6 16

April 16 10 7May 8 10 14

June 16 0 4

July 8 15 18

August 8 18 17

September 4 18 9

October 2 9 5

November 5 0 6

December 12 9 3

MuchSimpler

ChoosingGraphics


20/58

0

5

10

15

20

25

3035

40

45

50

January February March April May June July August September October November December

Wellington

Dunedin

Christchurch

Toodetailed !

ChoosingGraphics


21/58

0

10

20

30

40

50

Januar ar ay July September ember

ellingt nDunedinChrist hur h

Much

Simpler

ChoosingGraphics


22/58

How to ModifyGraphics

Flip

Resize

Rotate


23/58

How to ModifyGraphics

Stretch,Skew,

Distort

ColorizeCrop


24/58

Size implies importance


25/58

Keep It

Simple (Picture)

Art work may distract your audience

Artistry does not substitute for content


26/58


27/58

Color in DesignPhysical and Cultural ColorReactions

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.


28/58

Color in Design

ColorRelationshipsIn addition to

understanding color

meanings, it helps with

mixing and matching

colors to know the

relationship of adjacent,complementary, and

clashing colors.


29/58

Color in DesignCool ColorMeanings

(calming): Blue, Green, Turquoise, Silver

Warm ColorMeanings (exciting):Red, Pink, Yellow, Gold, Orange

Mixed Cool/Warm ColorMeanings:

Purple, Lavender, Green, Turquoise

Neutral ColorMeanings (unifying):

Brown, Beige, Ivory, Gray, Black, White


30/58

Contrast Colors

This is darkon lightThis is light ondark


31/58

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


32/58


33/58

SpacingWhite space is the absence of text and

graphics. It breaks up text and graphics. It

provides visual breathing room for the eye.

Xxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxx








xxxxxxxxxxxxxxxxxxxxxxxxxXxxxxxxxxxxxxxxxxxxxxxxxx






Xxxxxxx



- Xxx xxxxxxxxxxxx

- Xx xxxxxxxxxxx

- Xxxxxxxx xxxxxxx

- Xxx xxxxxxxxxxxxxxx

Xxxxxxxxx

Xxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxx


34/58

Spacing

Margins can convey a

specific tone, make

the page easier orharder to hold or read,

and margins can affect

the cost of the printed

piece as well.


35/58

HowTo

AddSpacingIncrease 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.


36/58

Principles ofDesign


37/58

Principles of DesignGenerally, all the principles of design apply to anypiece 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


38/58

Balance

Visual balance comes fromarranging elements on the

page so that no one section isheavier than the other. Or, a

designer may intentionally

throw elements out of

balance to create tension ora certain mood.


39/58

The Principle ofBalance

Primarily there are three types of balance in

page design:

symmetrical

asymmetricalradial


40/58

The Rule ofThirds

Most designs can be made more interesting by visually

dividing the page into three parts and placing the most

important elements within those thirds.


41/58

Visual Center

andBalancePlacing important elements or the focal point

of the design within the visual center of a

piece is another design trick.


42/58

ProximityandUnity

How close together or far

apart elements are placed

suggests a relationship (or

lack of) between otherwise

disparate parts.


43/58

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


44/58

Alignment

Use alignment to:

create order

organize page elements

group items

create visual connections

Good alignment is invisible. Most readers won'tconsciously notice that everything is lined up neatly

but they will feel it when things are out of alignment.


45/58

Repeating design elementsand consistent use of type

and graphics styles within a

document shows a reader

where to go and helps themnavigate your designs and

layouts safely.

Use TwoorMore of the

Same Design Element


46/58

Contrast

In design, big and small

elements, black and

white text, squares andcircles, can all create

contrast in design.

Contrast helps different

design elements stand

out.


47/58

Emphasize Difference

Between Design ElementsContrast 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.


48/58

White Spaces

Designs that try to cram

too much text and

graphics onto the page

are uncomfortable andmay be impossible to

read. White space

gives your design

breathing room.

White space is any color.


49/58


50/58

Use FewerFonts

Tonedown the type.In most documents,

two orthreefaces

aremore than

enough.


51/58

AvoidTyping inALL CAPSOn-line TYPING INALL CAPS is considered

shouting and is frowned on in most cases. Its

hard to read. Just dont do it, PLEASE!


52/58

Overuse of Frames

andBoxes

A frame loses itsability to emphasize

blocks of text if every

other block on the

page is boxed.


53/58

Excessive Use

ofGraphicsUse clip art with moderation and with purpose. Use

clip art that supports your text or illustrates a point.


54/58


55/58


56/58

Amateurish Punctuation


57/58

OutlineWhat is a Page Layout

Uses for Page Layout

Principles of Page Design

Elements of Page Design

Creating a Page Layout

Composing Page ElementsElements of a Good Page Design

General Guidelines for Good Page Design

Composing Page Elements

Choosing Fonts

ChoosingArtwork

Working With TextWorking With Images

Best Layout practices

Design Disasters to avoid


58/58

Make It Big (How to Estimate)

Look at it from 7 feet away

7 ft

page layout and design basics

Documents