principles of effective design: the joshua tree epiphany c ontrast r epetition a lignment p roximity

12
PRINCIPLES OF EFFECTIVE DESIGN: THE JOSHUA TREE EPIPHANY Contrast Repetition Alignment Proximity

Upload: alyson-pierce

Post on 24-Dec-2015

220 views

Category:

Documents


4 download

TRANSCRIPT

PRINCIPLES OF EFFECTIVE DESIGN:

THE JOSHUA TREE EPIPHANY

Contrast

Repetition

Alignment

Proximity

THE JOSHUA TREE EPIPHANY

ONCE UPON A TIME, ROBIN RECEIVED A TREE IDENTIFYING BOOK WHERE YOU COULD MATCH A TREE UP WITH ITS NAME BY LOOKING AT ITS PICTURE. ROBIN DECIDED TO GO OUT AND IDENTIFY THE TREES IN THE NEIGHBORHOOD. BEFORE SHE WENT OUT, SHE READ THROUGH PART OF THE BOOK. THE FIRST TREE IN THE BOOK WAS THE JOSHUA TREE BECAUSE IT ONLY TOOK TWO CLUES TO IDENTIFY IT.

NOW THE JOSHUA TREE IS A REALLY WEIRD-LOOKING TREE AND SHE LOOKED AT THAT PICTURE AND SAID TO HERSELF, "OH, WE DON’T HAVE THAT KIND OF TREE IN NORTHERN CALIFORNIA. THAT IS A WEIRD-LOOKING TREE. I WOULD KNOW IF I SAW THAT TREE, AND I’VE NEVER SEEN ONE BEFORE."

SO SHE TOOK THE BOOK AND WENT OUTSIDE. HER PARENTS LIVED IN A CUL-DE-SAC OF SIX HOMES. FOUR OF THOSE HOMES HAD JOSHUA TREES IN THE FRONT YARD. SHE HAD LIVED IN THAT HOUSE FOR THIRTEEN YEARS, AND SHE HAD NEVER SEEN A JOSHUA TREE.

SHE TOOK A WALK AROUND THE BLOCK - AT LEAST 80 PERCENT OF THE HOMES HAD JOSHUA TREES IN THE FRONT YARDS. AND SHE HAD SWORN SHE HAD NEVER SEEN ONE BEFORE!

THE MORAL OF THE STORY? ONCE ROBIN WAS CONSCIOUS OF THE TREE, ONCE SHE COULD NAME IT, SHE SAW COULD SEE IT EVERYWHERE. WHICH IS EXACTLY MY POINT. ONCE YOU CAN NAME SOMETHING, YOU’RE CONSCIOUS OF IT. YOU HAVE POWER OVER IT. YOU OWN IT. YOU’RE IN CONTROL.

C R A PUsed to describe design elements

CONTRAST

REPETITION

ALIGNMENT

PROXIMITY

Which designLooks better to you?

CRAPContrast

Repetition

Alignment

Proximity

Robin Williams Non-Designers Design Book, Peachpit Press

CRAPContrast

make different things different brings out dominant elements mutes lesser elements creates dynamism

Repetition

Alignment

Proximity

Robin Williams Non-Designers Design Book, Peachpit Press

1

2

3

4

5

CRAPContrast

Repetition repeat design throughout the interface consistency creates unity

Alignment

Proximity

Robin Williams Non-Designers Design Book, Peachpit Press

1

2 3

4

CRAPContrast

Repetition

Alignment creates a visual flow visually connects elements

Proximity

Robin Williams Non-Designers Design Book, Peachpit Press

1

2

3

4

CRAPContrast

Repetition

Alignment

Proximity groups related elements separates 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