Designing with Contrast, Repetition, Alignment and Proximity (CRAP

#CRAPdesign @csteinert
Designing with
C.R. A.P.
Stir Trek 2014
#CRAPdesign
Caitlin Steinert
@csteinert
1

Designing with
C.R. A.P.
Stir Trek 2014
#CRAPdesign
Caitlin Steinert
@csteinert
My name is Caitlin, I’m a front-end developer. There’s a hashtag that I invite you to use,
I’d love to hear what you all have to say.
2

The Non-Designer’s Design Book!
Robin Williams
This talk was inspired by “The Non-Designer’s Design Book” by Robin Williams. I first
read this book as a textbook in college, and I still refer to it often. Ms. Williams has a
bunch of other “Non-Designer” books on Amazon.
3

What is design?
Who knows, right? There’s a ton of different definitions.
4

In most people's vocabularies, design means veneer. It's interior
decorating. It's the fabric of the curtains of the sofa. But to me,
nothing could be further from the meaning of design. Design is the
fundamental soul of a human-made creation that ends up
expressing itself in successive outer layers of the product or service.
- Steve Jobs
Some people have definitions that are a bit emotional. And I apologize for the
obligatory Steve Jobs quote in a design presentation.
5

One could describe design as plan for arranging elements to
accomplish a particular purpose.
- Charles Eames
Some have really simplistic definitions. Charles Eames, along with his wife Ray, was (and
still is) an influential furniture and architecture designer.
6

DESIGN: (noun) a speciﬁcation of an object, manifested by some
agent, intended to accomplish goals, in a particular environment,
using a set of primitive components, satisfying a set of
requirements, subject to some constraints.
- Paul Ralph and Yair Wand
Some people try to get as academic as possible. Ralph and Wand are Computer
Science academics who wanted to define design as scientifically as possible. The point
is, there’s no one definition. But if there was, it wouldn’t include the word…
7

…magic. OR illusion! Sometimes I wish it was. I wish we could just wave a magic wand
and make our projects perfect.
8

Design is a process.
But design is a process. And it involves a lot of decision making. Lots of educated
guesses, tests, and trying over until we’re happy.
9

Contrast
Repetition
Alignment
Proximity
Many of the design decisions we make are influenced by these four principles. I believe
that you can boil down good design decisions and find that these principles are their
basis.
10

Contrast
Repetition
Alignment
Proximity
And, of course, here’s where we get CRAP. So let’s jump right in.
11

Contrast:
the state of being strikingly different from something else,
typically something in juxtaposition or close association.
I want to point out one specific word here.
12

Contrast:
the state of being strikingly different from something
else, typically something in juxtaposition or close association.
Contrast is a “go big or go home” game.
13

R: 200
G: 40
B: 50
R: 190
G: 30
B: 80
We’ve got two colors here. We can tell from their Red Green Blue values that they are,
indeed, different colors.
14

Cats
Dogs
It’s raining:
But once they’re both on an even playing field, it becomes hard to tell which one is
which.
15

Cats
Dogs
It’s raining:
Once we switch to a color with more contrast, though, we’re good to go.
16

Where’s Waldo is an excellent example of low contrast.
17

Searching for Waldo is the point of these books, but it shouldn’t be the effect our
designs have on our users.
18

Vero Eos et Accusamus et Iusto
Odio
Dignissimos Ducimus  
 
Qui blanditiis praesentium
voluptatum deleniti atque corrupti
quos dolores et quas molestias
excepturi sint occaecati cupiditate
non provident, similique sunt in
culpa qui est eligendi optio
cumque nihil impedit quo minus id
quod maxime placeat facere
possimus.
We can guess what’s going on here, but why not make it very obvious?
19

Vero Eos et Accusamus et Iusto
Odio
 
possimus.
Vero Eos et Accusamus
et Iusto Odio
 
possimus.
Now we can more accurately parse this information. And it didn’t even take that much
effort. Ok, that’s all well and good, but is it possible to have TOO MUCH contrast?
20

Have you even been told by a manager that everything on that huge list they just gave
you was top priority? That’s what’s going on here.
!
Here’s a user test for you. You’re a user coming to this site to contact the owners. How
do you accomplish that?
21

Apparently “contact us” wasn’t as high on the priority list as EVERY OTHER THING ON
THIS PAGE.
22

Contrast
Use sparingly
23

Contrast
Use sparingly
Don’t be shy
24

Contrast
Use sparingly
Don’t be shy
25

Contrast
Use sparingly
Don’t be SHY
26

Magic Hill Apartments
1234 Boat Road, Freedom Town, OH 44222
(555) 555-5555 Fax (555) 555-5556
We wanted to take a moment thank you for being such wonderful residents. It has been a pleasure to have you as a
part of our community. We hope that you choose to renew your lease agreement for another year.
Renew your lease early and have only $10 increase.
Please contact the leasing office if you want a different option than a 12 month renewal which is enclosed. We will
prepare a different renewal and return it to you. You can sign and return current renewal by February 1, 2014 or you
can give written notice by March 1, 2014.
• 9 month lease with $25 increase and short term fee of $50 per month
• Month to Month $25 rental increase and the $75 per month fee (maximum of 60 days only)
• Renew 12 month lease with only a $10 increase by February 1, 2014
• Renew after February 1, 2014, but before March 1, 2014 with increase of $25 per month (which is Market rent
for your unit.) if nothing is received by this date we will take and application for your unit.
• Move out at end of current lease term with 60 day written notice.
We will require 60 day written notice from the 1st of the month if you are planning to move at the of your current lease term. You will
need to give written notice by March 1, 2014. We would prefer notice as soon as possible, so we can pre-lease your unit if the decision is to
move.
My landlord (names have been changed to protect… everyone involved) obviously
wants me to read everything on this lease renewal agreement. But, of course I’m going
to read it, it’s my lease renewal agreement. So let’s make it easier to actually read.
27

(555) 555-5555 Fax (555) 555-5556
We wanted to take a moment thank you for being such wonderful residents. It has been a pleasure to have you as a part of our
community. We hope that you choose to renew your lease agreement for another year.
Please contact the leasing office if you want a different option than a 12 month renewal which is enclosed. We will prepare a different
renewal and return it to you. You can sign and return current renewal by February 1, 2014 or you can give written notice by March 1,
2014.
• Renew after February 1, 2014, but before March 1, 2014 with increase of $25 per month (which is Market rent for your unit.) if
nothing is received by this date we will take and application for your unit.
We will require 60 day written notice from the 1st of the month if you are planning to move at the of your current lease term. You
will need to give written notice by March 1, 2014. We would prefer notice as soon as possible, so we can pre-lease your unit if the
decision is to move.
Let’s start by making everything the same. First the font sizes.
28

(555) 555-5555 Fax (555) 555-5556
2014.
And then by removing unnecessary underlines.
29

(555) 555-5555 Fax (555) 555-5556
2014.
And unnecessary italics.
30

(555) 555-5555 Fax (555) 555-5556
2014.
• Renew after February 1, 2014, but before March 1, 2014 with increase of $25 per month (which is Market rent for your unit.) if nothing
is received by this date we will take and application for your unit.
need to give written notice by March 1, 2014. We would prefer notice as soon as possible, so we can pre-lease your unit if the decision is
to move.
And unnecessary bolding.
31

(555) 555-5555 Fax (555) 555-5556
2014.
to move.
Now that we have a clean slate, we can start adding contrast back in. But only to the
things that really deserve being called out!
Onto the next principle!
32

Repetition:
similar parts within a system should be expressed in
similar ways
Repetition is all about earning users’ trust and promoting comprehension of our
systems.
33

Don’t Repeat Yourself
Repetition is the root of all software evil.
Now, I know that the developers in the audience might cringe at “repetition,” but the
idea is a bit different in design. What we’re really talking about is “consistency,” (but
“C.C.A.P.” isn’t as fun).
34

This is a chore to read.
35

This isn’t, because the colors convey meaning. Green = comments, red = strings. With
this repetition of colors, our users understand what they’re looking at and can better
parse the info.
36

Branding is straight-up repetition. We are assuring our users that they’re in the right
place.
37

And repetition doesn’t mean copy-pasting every element of a design. These Adobe
product splash screens have similarities, but aren’t identical. So we know they’re
related, but separate.
38

Fitbit uses repetition in color, typography, icons and charts to make their UI easy to
parse at a glance.
39

The “traffic light” colors translate well, and by seeing just one chart fully completed, we
can infer if necessary where the other charts stand.
40

StackOverflow has a LOT going on on every single page. But they make that
information easy to parse just by repeating one key element.
41

Once I know that these numbers indicate up-votes, I can easily skim this page for the
information I need.
42

Andy Warhol took repetition to a different, almost subversive level. By shoving multiple,
slightly different versions of the same image into our faces, we’re almost forced to
notice things we may not have before. And to consider our assumptions of what we
THINK Marilyn Monroe looks like by confronting an image of her with blue skin or green
hair.
43

Alignment:
placement of elements such that edges line up along
common rows or columns, or their bodies along
a common center.
Alignment is probably the most straight-forward of all these principles.
44

Alignment naturally draws our eyes. We can use it to quietly suggest reading/viewing
patterns to users.
45

Certain alignments are stronger than others.
46

Because they create an invisible “edge” when all the content stops at the same place.
47

When there’s no definitive edge, the result isn’t as strong. That doesn’t mean we
shouldn’t use it. In fact, center-aligned content, when contrasted with either left- or
right-aligned content can be very attention-grabbing.
48

But in the hierarchy of strong alignment, center still ranks below justified. Sorry, center
alignment.
49

The same goes for horizontal alignment. If there’s a strong “edge” being created, our
eyes will notice it.
50

Still noticing it.
51

And then it falls off. I am of the personal opinion that horizontal center alignment is
pretty terrible if the items being aligned aren’t uniform or similarly sized.
52

Horizontally-aligned objects that are the same size can look similar to the point of being
completely overlooked.
53

But once one item breaks the alignment, whoa buddy, all eyes are on that contrasting
item!
54

Which is why tab strips work so well.
55

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.
Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
“Nemo enim ipsam voluptatem. Doloremque laudantium, totam  
rem aperiam, eaque ipsa quae ab illo inventore veritatis et  
quasi architecto beatae vitae dicta sunt explicabo.”  
- Plato
Quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt. Sed ut
perspiciatis unde omnis iste natus error sit voluptatem accusantium.
There’s a block quote in this wall of text, but it isn’t initially noticable.
56

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.
“Nemo enim ipsam voluptatem. Doloremque laudantium,  
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis  
et quasi architecto beatae vitae dicta sunt explicabo.”  
- Plato
Quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt. Sed ut
perspiciatis unde omnis iste natus error sit voluptatem accusantium.
Changing the alignment helps. Changing the font weight and adding a background
color could help, too, but this is a slide about Alignment, not Contrast!
57

(555) 555-5555 Fax (555) 555-5556
2014.
to move.
Ok, back to this piece of… not C.R.A.P. Let’s add some alignment.
58

2014.
to move.
(555) 555-5555 Fax (555) 555-5556
In this case, the center alignment is a great contrast to the rest of the document since
it’s all left aligned.
59

(555) 555-5555 Fax (555) 555-5556
2014.
• Month to Month $25 rental increase and the $75 per month fee
• Maximum of 60 days only
• Renew after February 1, 2014, but before March 1, 2014 with increase of $25 per month (which is Market rent for your unit.)
• If nothing is received by this date we will take and application for your unit.
to move.
And here we’ve moved the parenthetical information in the bulleted list into sub-items,
which reinforces their “child” status without the need of parenthesis, and therefore
makes the whole mess easier to read.
60

Proximity
Humans perceive relationships based on the distance between objects. In this example,
the two circles have no relationship to each other because they are separate.
61

Proximity
But as soon as they look like this, we assume — without any other information — that
they share something. That’s because elements that are close together are perceived to
be more related than elements that are farther apart.
62

Proximity
Now they’re SUPER related. In fact, we might infer that the smaller circle even depends
on the larger one.
63

The audio controls on this dashboard are all located close to each other, in the same
area.
64

And they’re located away from the temperature controls. Presumably so that the driver
won’t accidentally blast the tunes instead of the AC.
65

Order #10! $20
4/10/14
(15) bananas!! $10
(10) oranges! ! $10
(2) apples!! ! !$5
Order #11! $20
4/11/14
(15) bananas!! $10
This is a simplified version of an app I worked on a few years back. I scrolled down and
realized I no longer had any idea what I was looking at. Which headers belong to which
data?
66

4/10/14
4/11/14
Order #10! $20
4/10/14
(15) bananas!! $10
(10) oranges! ! $10
(2) apples!! ! !$5
Order #11! $20
4/11/14
(30) bananas!! $20
Order #10! $20
4/10/14
(15) bananas!! $10
(10) oranges! ! $10
(2) apples!! ! !$5
Order #11! $20
4/11/14
(30) bananas!! $20
All it took was adjusting the margins in the CSS and we were all set.
67

(555) 555-5555 Fax (555) 555-5556
Alright, back to this guy again. Now, if I wanted to fax this completed form back to my
landlord, but which number is the fax? I can make an educated guess and say it’s the
second one…
68

(555) 555-5555 Fax (555) 555-5556
But I could be wrong.
69

(555) 555-5555 Fax (555) 555-5556
Or I could be right.
70

(555) 555-5555 Fax
(555) 555-5556
Since my landlord didn’t see fit to hit the enter key and clear things up for me…
71

(555) 555-5555
Fax (555) 555-5556
I guess I’ll just call both numbers and assume the one that makes a horrible noise is the
one I’m looking for.
72

Let’s

Review!
73

Contrast
When we use contrast, we go for it. Don’t be shy!
74

Contrast
Repetition
Repetition is about building trust and comprehension for our users.
75

Contrast
Repetition
Alignment
Alignment shows users the way. Certain types of alignment are stronger than others.
76

Contrast
Repetition
Alignment
Proximity
People instinctively process proximity (or the lack thereof) as relationship cues.
77

(555) 555-5555 Fax (555) 555-5556
We wanted to take a moment thank you for being such wonderful residents. It has been a pleasure to have you as a
part of our community. We hope that you choose to renew your lease agreement for another year.
Please contact the leasing office if you want a different option than a 12 month renewal which is enclosed. We will
prepare a different renewal and return it to you. You can sign and return current renewal by February 1, 2014 or you
can give written notice by March 1, 2014.
• Renew after February 1, 2014, but before March 1, 2014 with increase of $25 per month (which is Market rent
for your unit.) if nothing is received by this date we will take and application for your unit.
need to give written notice by March 1, 2014. We would prefer notice as soon as possible, so we can pre-lease your unit if the decision is to
move.
With these four basic principles, we took this from flat out ugly…
78

(555) 555-5555
Fax (555) 555-5556
2014.
to move.
• Month to Month $25 rental increase and the $75 per month fee
• Maximum of 60 days only
• Renew after February 1, 2014, but before March 1, 2014 with increase of $25 per month (which is Market rent for your unit.)
• If nothing is received by this date we will take and application for your unit.
to legible and useful! Hooray!
79

The Non-Designer’s Design Book!
Robin Williams
Resources
A Proposal for a Formal Deﬁnition of the!
Design Concept!
Paul Ralph and Yair Wand
Universal Principles of Design!
William Lidwell, Kritina Holden, Jill Butler
Design <for> Hackers!
David Kadavy
80

Thanks!
www.csteinert.com
@csteinert
Jokes!
How many designers does it take to change a light bulb? It only takes one, but you’ll
need to provide the bulb as either a vector or high resolution raster file.
How many developers does it take to change a lightbulb? None, we don’t do hardware
issues.
81

Designing with Contrast, Repetition, Alignment and Proximity (CRAP

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Designing with Contrast, Repetition, Alignment and Proximity (CRAP

Similar a Designing with Contrast, Repetition, Alignment and Proximity (CRAP (20)

Último

Último (20)

Designing with Contrast, Repetition, Alignment and Proximity (CRAP