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