310 likes | 453 Views
Design & Delivery How will your project be read?. 4 Principles of Graphic Design Typographical Suggestions Color Psychology. Suzanne Webb Michigan State University. WRA 150: Consider Literacy January 31, 2006. 4 Principles of Graphic Design. CRAP Contrast Repetition Alignment Proximity
E N D
Design & DeliveryHow 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
4 Principles of Graphic Design • CRAP • Contrast • Repetition • Alignment • Proximity • According to The Non-Designer’s Web Book By: Robin Williams and John Tollett
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
REPETITION • Repeating Elements • Colors • Art (logos, pictures) • Font • Layout • Navigation
ALIGNMENT • Flush Left • Flush Right • Centered • Justified • Pick one alignment and stick with it!
PROXIMITY • Grouping Elements • Headlines close to their body copy • Captions close to their pictures • 3-5 Groupings per page • Give it The Squint Test
CRAP • Contrast • Repetition • Alignment • Proximity
Typography • 6 Categories of Type • Promotes a “feeling” / Sets the “tone” • Type Size (10-14 point) • Upper Case / Lower Case • A brief history…
6 Kinds of Fonts • Oldstyle • Modern • Slab Serif • San Serif • Script • Decorative
Font Choices Convey Meaning Marilyn Monroe Marilyn Monroe Marilyn Monroe Marilyn Monroe Marilyn Monroe
Oldstyle • Goudy Oldstyle • Goudy Oldstyle Bold • Diagonal Stress • Old-Timey • Slanted Serifs • Classy
Modern • Modern No. 20 • Modern No. 20 Bold • Dramatic Thick/Thin Transitions • Horizontal Serifs • Invented for Advertising • Never Good for Lots of Text
Sans Serif • Tahoma • Tahoma Bold • Sans = French for “without” • Good for Extended Bodies of Text • Easy to Read
Slab Serif • Clarendon Black • Clarendon Black Bold • Thick, Flat Serifs • Headlines, Special Applications • Not for Extended Text • Maybe Children’s Books(?)
Scripts • French Script • Blackaddar • Brush Script • Use for formal invitations and not much else. Ever. Never set in all caps. • Please: Use sparingly.
Bees Knees Papyrus Gigi Harlow Andy Jokerman Matisse Balloon Decorative
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
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”
Type Sizes • Varying Sizes Adds Contrast • Establishes a Hierarchy • Consistency is Key • For Print: 10-12 point • On Screen: ? (who’s your audience)
Type Sizes BIG TYPE --LITTLE TYPE-- Great for adding contrast!
Color Psychology • http://www.sheriftariq.org/design/images/color/color_wheel.gif
Color Psychology • Do colors mean something? • WARNING! • JEALOUSY • TRUST • What about in other cultures?
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.
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.
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!
Color Psychology • Think about trends… • In Decorating • In Signage • In Packaging
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!
Color Psychology • Sources on the web… • http://www.infoplease.com/spot/colors1.html • http://www.pantone.com/products/products.asp?idArticle=112&idArea=16
How will your project be read? 4 Principles of Graphic Design Typographical Suggestions Color Psychology