Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical...

31
Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology

Transcript of Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical...

Page 1: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Design & Delivery

How will your project be read?

4 Principles of Graphic DesignTypographical Suggestions

Color Psychology

Page 2: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Suzanne WebbMichigan State University

WRA 150: Consider Literacy

January 31, 2006

Page 3: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

4 Principles of Graphic Design CRAP

Contrast Repetition Alignment Proximity

According to The Non-Designer’s Web BookBy: Robin Williams and John Tollett

Page 4: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

CONTRAST

Use Opposite Colors Black type on a white background White type on a black background

Who’s your audience? Aging eyes?

Big Type Little Type

Vary the Weight Bold / Regular / Italics / Bold Italic

Page 5: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

REPETITION

Repeating Elements Colors Art (logos, pictures) Font Layout Navigation

Page 6: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

ALIGNMENT

Flush Left Flush Right Centered Justified Pick one alignment and stick with it!

Page 7: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

PROXIMITY

Grouping Elements Headlines close to their body copy Captions close to their pictures 3-5 Groupings per page

Give it The Squint Test

Page 8: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

CRAP

Contrast Repetition Alignment Proximity

Page 9: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Typography

Page 10: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Typography

6 Categories of Type Promotes a “feeling” / Sets the

“tone” Type Size (10-14 point) Upper Case / Lower Case

A brief history…

Page 11: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

6 Kinds of Fonts

Oldstyle Modern Slab Serif San Serif Script Decorative

Page 12: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Font Choices Convey Meaning

Marilyn MonroeMarilyn MonroeMarilyn MonroeMarilyn MonroeMarilyn Monroe

Page 13: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Oldstyle

Goudy Oldstyle Goudy Oldstyle Bold

Diagonal Stress Old-Timey Slanted Serifs Classy

Page 14: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Modern

Modern No. 20 Modern No. 20 Bold

Dramatic Thick/Thin Transitions Horizontal Serifs Invented for Advertising Never Good for Lots of Text

Page 15: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Sans Serif

Tahoma Tahoma Bold Sans = French for “without” Good for Extended Bodies of Text Easy to Read

Page 16: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Slab Serif

Clarendon Black Clarendon Black Bold Thick, Flat Serifs Headlines, Special Applications Not for Extended Text

Maybe Children’s Books(?)

Page 17: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Scripts

French Script Blackaddar Brush Script Use for formal invitations and

not much else. Ever. Never set in all caps.

Please: Use sparingly.

Page 18: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Decorative

Bees Knees

Papyrus

GigiHarlow

AndyJokerman

MatisseBalloon

Page 19: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Decorative

Sets a tone Fun! Difficult to Read Use Sparingly Does the user’s machine even have this

weird font loaded? Set as a graphic

Page 20: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Serif (plain-old serif)

Times Roman Times New Roman Bold Serifs guide the eyes

Excellent for extended bodies of text

Widely Accepted / Boring(?) Use for Resumes / Scanable

On all Machines Works “Cross-platform”

Page 21: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Type Sizes

Varying Sizes Adds Contrast Establishes a Hierarchy Consistency is Key For Print: 10-12 point On Screen: ? (who’s your audience)

Page 22: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Type Sizes

BIG TYPE--LITTLE TYPE--

Great for adding contrast!

Page 23: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Color Psychology

http://www.sheriftariq.org/design/images/color/color_wheel.gif

Page 24: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Color Psychology

Do colors mean something? WARNING! JEALOUSY TRUST What about in other cultures?

Page 25: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Color Psychology

Yellow In Egypt and Burma, yellow signifies mourning. In Spain, executioners once wore yellow. In India, yellow is the symbol for a merchant or

farmer. In tenth-century France, the doors of traitors and

criminals were painted yellow. Hindus in India wear yellow to celebrate the

festival of spring. If someone is said to have a “yellow streak,” that

person is considered a coward.

Page 26: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Color Psychology

In Japan during the War of Dynasty in 1357, each warrior wore a yellow chrysanthemum as a pledge of courage.

A yellow ribbon is a sign of support for soldiers at the front.

Yellow is a symbol of jealousy and deceit. In the Middle Ages, actors portraying the dead in a play

wore yellow. To holistic healers, yellow is the color of peace. Yellow has good visibility and is often used as a color of

warning. It is also a symbol for quarantine, an area marked off because of danger.

“Yellow journalism” refers to irresponsible and alarmist reporting.

Page 27: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Color Psychology

Think about baby nurseries… Primary Colors? Pastels? Black and White and Red?

Trends change and people tend to decorate nurseries with colors that supposedly stimulate their babies’ intelligence!

Page 28: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Color Psychology

Think about trends… In Decorating In Signage In Packaging

Page 29: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Color Psychology

Think about… Warm and Cool Colors

Sweaters were worn in a light blue room; the secretaries were cold. The owners painted the room a warm peach, never touched the thermostat; the sweaters came off!

It’s about Perception!

Page 30: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

Color Psychology

Sources on the web…

http://www.infoplease.com/spot/colors1.html

http://www.pantone.com/products/products.asp?idArticle=112&idArea=16

Page 31: Design & Delivery How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology.

How will your project

be read?

4 Principles of Graphic DesignTypographical Suggestions

Color Psychology