Download - Designing with C.R.A.P
#CRAPdesign @csteinert
Designing with
C.R. A.P.
Stir Trek 2014 #CRAPdesign
Caitlin Steinert @csteinert
1
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
What is design?
Who knows, right? There’s a ton of different definitions.
4
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
DESIGN: (noun) a specification 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
#CRAPdesign @csteinert
…magic. OR illusion! Sometimes I wish it was. I wish we could just wave a magic wand and make our projects perfect.
8
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
Contrast Repetition Alignment Proximity
And, of course, here’s where we get CRAP. So let’s jump right in.
11
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
Cats
Dogs
It’s raining:
Once we switch to a color with more contrast, though, we’re good to go.
16
#CRAPdesign @csteinert
Where’s Waldo is an excellent example of low contrast.
17
#CRAPdesign @csteinert
Searching for Waldo is the point of these books, but it shouldn’t be the effect our designs have on our users.
18
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
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.
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.
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
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
Apparently “contact us” wasn’t as high on the priority list as EVERY OTHER THING ON THIS PAGE.
22
#CRAPdesign @csteinert
Contrast
Use sparingly
23
#CRAPdesign @csteinert
Contrast
Use sparingly Don’t be shy
24
#CRAPdesign @csteinert
Contrast
Use sparingly Don’t be shy
25
#CRAPdesign @csteinert
Contrast
Use sparingly Don’t be SHY
26
#CRAPdesign @csteinert
Magic Hill Apartments1234 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
#CRAPdesign @csteinert
Magic Hill Apartments1234 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.
Let’s start by making everything the same. First the font sizes.
28
#CRAPdesign @csteinert
Magic Hill Apartments1234 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.
And then by removing unnecessary underlines.
29
#CRAPdesign @csteinert
Magic Hill Apartments1234 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.
And unnecessary italics.
30
#CRAPdesign @csteinert
Magic Hill Apartments1234 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.
And unnecessary bolding.
31
#CRAPdesign @csteinert
Magic Hill Apartments1234 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.
• 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.
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.
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.
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
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
Don’t Repeat YourselfRepetition 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
#CRAPdesign @csteinert
This is a chore to read.
35
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
Branding is straight-up repetition. We are assuring our users that they’re in the right place.
37
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
Fitbit uses repetition in color, typography, icons and charts to make their UI easy to parse at a glance.
39
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
Once I know that these numbers indicate up-votes, I can easily skim this page for the information I need.
42
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
Alignment naturally draws our eyes. We can use it to quietly suggest reading/viewing patterns to users.
45
#CRAPdesign @csteinert
Certain alignments are stronger than others.
46
#CRAPdesign @csteinert
Because they create an invisible “edge” when all the content stops at the same place.
47
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
But in the hierarchy of strong alignment, center still ranks below justified. Sorry, center alignment.
49
#CRAPdesign @csteinert
The same goes for horizontal alignment. If there’s a strong “edge” being created, our eyes will notice it.
50
#CRAPdesign @csteinert
Still noticing it.
51
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
Horizontally-aligned objects that are the same size can look similar to the point of being completely overlooked.
53
#CRAPdesign @csteinert
But once one item breaks the alignment, whoa buddy, all eyes are on that contrasting item!
54
#CRAPdesign @csteinert
Which is why tab strips work so well.
55
#CRAPdesign @csteinert
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. Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
There’s a block quote in this wall of text, but it isn’t initially noticable.
56
#CRAPdesign @csteinert
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. Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
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
#CRAPdesign @csteinert
Magic Hill Apartments1234 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.
Ok, back to this piece of… not C.R.A.P. Let’s add some alignment.
58
#CRAPdesign @csteinert
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.
Magic Hill Apartments1234 Boat Road, Freedom Town, OH 44222
(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
#CRAPdesign @csteinert
Magic Hill Apartments1234 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.
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
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
Proximity
Now they’re SUPER related. In fact, we might infer that the smaller circle even depends on the larger one.
63
#CRAPdesign @csteinert
The audio controls on this dashboard are all located close to each other, in the same area.
64
#CRAPdesign @csteinert
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
#CRAPdesign @csteinert
Order #10! $204/10/14
(15) bananas!! $10
(10) oranges! ! $10
(2) apples!! ! !$5
Order #11! $204/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
#CRAPdesign @csteinert
4/10/14
4/11/14
Order #10! $204/10/14
(15) bananas!! $10
(10) oranges! ! $10
(2) apples!! ! !$5
Order #11! $204/11/14
(30) bananas!! $20
Order #10! $204/10/14
(15) bananas!! $10(10) oranges! ! $10
(2) apples!! ! !$5
Order #11! $204/11/14
(30) bananas!! $20
All it took was adjusting the margins in the CSS and we were all set.
67
#CRAPdesign @csteinert
Magic Hill Apartments1234 Boat Road, Freedom Town, OH 44222
(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
#CRAPdesign @csteinert
Magic Hill Apartments1234 Boat Road, Freedom Town, OH 44222
(555) 555-5555 Fax (555) 555-5556
But I could be wrong.
69
#CRAPdesign @csteinert
Magic Hill Apartments1234 Boat Road, Freedom Town, OH 44222
(555) 555-5555 Fax (555) 555-5556
Or I could be right.
70
#CRAPdesign @csteinert
Magic Hill Apartments1234 Boat Road, Freedom Town, OH 44222
(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
#CRAPdesign @csteinert
Magic Hill Apartments1234 Boat Road, Freedom Town, OH 44222
(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
#CRAPdesign @csteinert
Let’s Review!
73
#CRAPdesign @csteinert
Contrast
When we use contrast, we go for it. Don’t be shy!
74
#CRAPdesign @csteinert
Contrast Repetition
Repetition is about building trust and comprehension for our users.
75
#CRAPdesign @csteinert
Contrast Repetition Alignment
Alignment shows users the way. Certain types of alignment are stronger than others.
76
#CRAPdesign @csteinert
Contrast Repetition Alignment Proximity
People instinctively process proximity (or the lack thereof) as relationship cues.
77
#CRAPdesign @csteinert
Magic Hill Apartments1234 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.
With these four basic principles, we took this from flat out ugly…
78
#CRAPdesign @csteinert
Magic Hill Apartments1234 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.
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.
• 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.
to legible and useful! Hooray!
79
#CRAPdesign @csteinert
The Non-Designer’s Design Book!Robin Williams
Resources
A Proposal for a Formal Definition 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
#CRAPdesign @csteinert
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