PRINCIPLES OF EFFECTIVE
DESIGN:JOSHUA TREE
EPIPHANY & CRAP
Edited & adapted by Barbara B. Nixon
Georgia Southern University
THE JOSHUA TREE EPIPHANY
CRAPCONTRAST, REPETITION, ALIGNMENT, PROXIMITY
Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known.
Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press
CRAPContrast
Repetition
Alignment
Proximity
Robin Williams Non-Designers Design Book, Peachpit Press
CRAPContrast
make different things differentbrings out dominant elementsmutes lesser elementscreates dynamism
Repetition
Alignment
Proximity
Robin Williams Non-Designers Design Book, Peachpit Press
1
2
3
4
5
CRAPContrast
Repetition repeat design throughout the interfaceconsistencycreates unity
Alignment
Proximity
Robin Williams Non-Designers Design Book, Peachpit Press
1
2 3
4
CRAPContrast
Repetition
Alignment creates a visual flowvisually connects elements
Proximity
Robin Williams Non-Designers Design Book, Peachpit Press
1
2
3
4
CRAPContrast
Repetition
Alignment
Proximity groups related elementsseparates unrelated ones
Robin Williams Non-Designers Design Book, Peachpit Press
1
2
3
WHERE DOES YOUR EYE GO?CRAP combines to give you cues of how to read the graphic
Robin Williams Non-Designers Design Book, Peachpit Press
title
subtext
three points
main point
sub point
PROXIMITYChapter 2
PRINCIPLE OF PROXIMITY Group related items together Physical closeness implies a relationship What happens when similar elements
are grouped into one unit? Relationships are important
Too many elements forthe eye to look at
With two bold phrases, thereader doesn’t know whichto look at first. Which ismore important?
Here the elements are groupedtogether, into closer proximity.The card is now organizedintellectually & visually – making itcommunicate more clearly.
First masthead has no elements in proximity
Second masthead chose better typeface &placed elements in proximity
WHAT TO REMEMBER ABOUT PROXIMITY When several things are in close
proximity, they become one visual unit Items relating to each other should be
grouped together Be conscious of where you eye is going Basic purpose is to organize Count the number of visual elements
WHAT TO AVOID Don’t stick something in every corner or
the middle just ‘cause Avoid too many separate elements on
the page Avoid leaving equal amounts of white
space between elements unless group is part of a subset
Avoid confusion over whether something belongs to its related material
Don’t create relationships that don’t belong together
No one will be able to understand this mess
With this the reader caneasily figure out what’s going on
ALIGNMENTChapter 3
PRINCIPLE OF ALIGNMENT Nothing should be placed on the page
randomly Every item should have a visual
connection with something else on the page
Aligned items result in stronger cohesive unit
Elements on the card look likethey were randomly placed to fillthe corners & middle. There are noconnections.
Moving elements to the right givesit one alignment. The informationis more organized.
Centered alignment. The edgesare “soft,” and you can’t see thestrength of the line.
By aligning text flush-right, itcreates a hard edge – an invisibleline connecting the information.
ALIGNING TEXT On a business card, centered text appears
weak. When aligned left or right, the invisible line
connects the text & gives a hard vertical edge.
Centered alignments creates a more formal look.
Lack of alignment is likely a big cause of pieces that don’t communicate well.
Lining up the elements can make a difference.
ALIGNING TEXT When you find a strong alignment, stick with it.
See Newsletters pg. 44-45 What about indenting? Strong alignment=Professional look
WHAT TO REMEMBER ABOUT ALIGNMENT
Nothing should be placed on the page at random.
Every element should have some visual connection with another element on the page.
Unity is an important concept. Basic purpose of alignment is to unify &
organize the page. Be conscious of where you place
elements.
WHAT TO AVOID Avoid using more than one alignment. Try to break away from always using a
centered alignment.
REPETITIONChapter 4
PRINCIPLE OF REPETITION Repeat some aspect of the design
throughout the entire piece This element may be a bold font, a
color, a design element, etc. It must be something the reader will
visually recognize. Repetition=Consistency
When you get to the end of the information, does your eye wander off the card?
Now, with the bold type atthe top & bottom, do you findthat your eye “bounces”between the bold typeelements?
The letterhead, business card &envelope retain the repetitiveelements.Strong left alignmentSpacing
Want each piece to belongtogether.
REPETITION Helps organize information Helps guide the reader through the
pages Helps unify unrelated parts of the design Repetitive elements establish a
sophisticated continuity
WHAT CAN A REPETITIVE ELEMENT BE? Clip art Picture font Simple element using different sizes,
colors, angles Sometimes not exactly the same object,
but closely related Look at the examples on pg. 59
WHAT TO REMEMBER ABOUT REPETITION
Repetition of visual elements unifies & strengthens a piece
It’s critical in multi-page documents Basic purpose is to unify & add visual
interest Repetition is about being consistent
WHAT TO AVOID Avoid repeating the element so much
that it becomes annoying or overwhelming
CONTRASTChapter 5
PRINCIPLE OF CONTRAST If two items are not exactly the same,
then make them different Contrast is an effective way to add
visual interest Contrast is created when two elements
are differentThere is no contrast between a 12 pt. font &
a 14 pt. font
CONTRAST The piece can be nice & neat, but with no
contrast no one will read it! It’s important to the organization of
information.Look at the differences between pg. 68 & 69
Easiest way to add contrast is with typefaces
Create headlines that catch the eye Then create contrast with text Enhance with strong alignments
CONTRAST Don’t be afraid to make some items
small to create a contrast with larger items
Don’t be afraid of blank space Elements of contrast can sometimes be
used as elements of repetition Let’s take a look at the ads on
pgs. 76 & 77
The first example shows some contrastbetween the typefaces & the rules, butthey’re wimpy.
The second example has a strongcontrast between typefaces making itmore eye-catching.Stronger contrast between thicknessof the rules.
The third example also has a strongcontrast.The reverse type draws your eye.
WHAT TO REMEMBER ABOUT CONTRAST
Contrast draws our eyes to it If placing two elements on the page that
aren’t the same, they can’t be similar. They must be VERY different.
Contrast has two purposesCreate an interest in the pageAid in the organization of the information
ADD CONTRAST THROUGH… Typeface choices Line thicknesses Colors Shapes Sizes Space
WHAT TO AVOID Avoid contrasting a sort-of heavy line
with a sort of heavier line Avoid contrasting brown text with black
headlines Avoid using two
or more typefacesthat are similar
Recommended