Let's face it: the choices that designers make on a daily basis often seem completely arbitrary to developers. Typefaces, colors, and layouts are apparently plucked out of thin air. Why those ones? Who knows! There's a general impression that you have to be "artsy" and "gifted" to be a designer. While I'm sure that helps, the fact of the matter is that designers aren't pulling this stuff out of the ether. In fact, most design choices can be boiled down to four basic design principles. Together they're known (affectionately) as C.R.A.P., and just being aware of their existence will help you make better design judgements no matter where you rate on the dev-to-designer continuum.

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

2. #CRAPdesign @csteinert
The Non-Designer’s Design Book
Robin Williams

3. #CRAPdesign @csteinert
What is design?

4. #CRAPdesign @csteinert
“In most people's vocabularies, design means veneer. It's
interior decorating. It's the fabric of the curtains and 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

5. #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

6. #CRAPdesign @csteinert
“Design is the rendering of intent.”
- Jared Spool

7. #CRAPdesign @csteinert
What design isn’t:

8. #CRAPdesign @csteinert

9. #CRAPdesign @csteinert

10. #CRAPdesign @csteinert
Design is a process.

11. #CRAPdesign @csteinert
! Contrast
! Repetition
! Alignment
! Proximity

12. #CRAPdesign @csteinert
! Contrast
! Repetition
! Alignment
! Proximity

13. #CRAPdesign @csteinert
Contrast:
the state of being strikingly different from something
else, typically something in juxtaposition or close
association.

14. #CRAPdesign @csteinert
Contrast:
the state of being strikingly different from
something else, typically something in juxtaposition or close
association.

15. #CRAPdesign @csteinert
! R: 200!
! G: 40"!
! B: 50!
! R: 190!
! G: 30"!
! B: 80!

16. #CRAPdesign @csteinert
Cats
Dogs
It’s raining:

17. #CRAPdesign @csteinert
Cats
Dogs
It’s raining:

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.!

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.!

20. #CRAPdesign @csteinert

21. #CRAPdesign @csteinert

22. #CRAPdesign @csteinert

23. #CRAPdesign @csteinert

24. #CRAPdesign @csteinert

25. #CRAPdesign @csteinert

26. #CRAPdesign @csteinert
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.!

27. #CRAPdesign @csteinert
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.!

28. #CRAPdesign @csteinert
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.!

29. #CRAPdesign @csteinert
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.!

30. #CRAPdesign @csteinert
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.!
• 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.!

31. #CRAPdesign @csteinert
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.!

32. #CRAPdesign @csteinert
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.!
• 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.!

33. #CRAPdesign @csteinert
Contrast
! Use sparingly

34. #CRAPdesign @csteinert
Contrast
! Use sparingly
! Don’t be shy

35. #CRAPdesign @csteinert
Contrast
! Use sparingly
! Don’t be shy

36. #CRAPdesign @csteinert
Contrast
! Use sparingly
! Don’t be SHY!

37. #CRAPdesign @csteinert
Repetition:
similar parts within a system should be expressed
in similar ways

38. #CRAPdesign @csteinert

39. #CRAPdesign @csteinert

40. #CRAPdesign @csteinert

41. #CRAPdesign @csteinert

42. #CRAPdesign @csteinert

43. #CRAPdesign @csteinert

44. #CRAPdesign @csteinert

45. #CRAPdesign @csteinert

46. #CRAPdesign @csteinert

47. #CRAPdesign @csteinert

48. #CRAPdesign @csteinert
Repetition:
! Build trust

49. #CRAPdesign @csteinert
Repetition:
! Build trust
! Enhance comprehension

50. #CRAPdesign @csteinert
Repetition:
! Build trust
! Enhance comprehension
! Don’t insult your audience

51. #CRAPdesign @csteinert
Alignment:
placement of elements such that edges line up along
common rows or columns, or their bodies along
a common center.

52. #CRAPdesign @csteinert

53. #CRAPdesign @csteinert

54. #CRAPdesign @csteinert

55. #CRAPdesign @csteinert

56. #CRAPdesign @csteinert

57. #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.
“Musa, mihi causas memora, quo numine laeso,
quidve dolens, regina deum tot volvere casus
insignem pietate virum, tot adire labores
impulerit. Tantaene animis caelestibus irae?”
- Virgil
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.

58. #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.
“Musa, mihi causas memora, quo numine laeso,
quidve dolens, regina deum tot volvere casus
insignem pietate virum, tot adire labores
impulerit. Tantaene animis caelestibus irae?”
- Virgil
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.

59. #CRAPdesign @csteinert
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.!
• 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.!

60. #CRAPdesign @csteinert
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.!
• 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.!

61. #CRAPdesign @csteinert
Magic Hill Apartments!
1234 Boat Road, Freedom Town, OH 44222!
(555) 555-5555 Fax (555) 555-5556!
• 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 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.!

62. #CRAPdesign @csteinert
Alignment:
! Guides the user’s eye

63. #CRAPdesign @csteinert
Alignment:
! Guides the user’s eye
! Has varying degrees of strength

64. #CRAPdesign @csteinert
Alignment:
! Guides the user’s eye
! Has varying degrees of strength
! Compelling when broken

65. #CRAPdesign @csteinert
Proximity

66. #CRAPdesign @csteinert
Proximity

67. #CRAPdesign @csteinert
Proximity

68. #CRAPdesign @csteinert
Proximity

69. #CRAPdesign @csteinert
FREE WATER
FOOD SOLD

70. #CRAPdesign @csteinert

71. #CRAPdesign @csteinert

72. #CRAPdesign @csteinert

73. #CRAPdesign @csteinert
Order #10" $20!
4/10/14!
(15) bananas! ! $10!
(10) oranges! ! $10!
(2) apples! ! ! !$5!
Order #11" $20!
4/11/14!
(15) bananas! ! $10!

74. #CRAPdesign @csteinert
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!

75. #CRAPdesign @csteinert
Magic Hill Apartments!
1234 Boat Road, Freedom Town, OH 44222!
(555) 555-5555 Fax (555) 555-5556!

76. #CRAPdesign @csteinert
Magic Hill Apartments!
1234 Boat Road, Freedom Town, OH 44222!
(555) 555-5555 Fax (555) 555-5556!

77. #CRAPdesign @csteinert
Magic Hill Apartments!
1234 Boat Road, Freedom Town, OH 44222!
(555) 555-5555 Fax (555) 555-5556!

78. #CRAPdesign @csteinert
Magic Hill Apartments!
1234 Boat Road, Freedom Town, OH 44222!
(555) 555-5555 Fax
(555) 555-5556!

79. #CRAPdesign @csteinert
Magic Hill Apartments!
1234 Boat Road, Freedom Town, OH 44222!
(555) 555-5555
Fax (555) 555-5556!

80. #CRAPdesign @csteinert
Proximity:
! Implies relationship

81. #CRAPdesign @csteinert
Proximity:
! Implies relationship
! Will be inferred regardless

82. #CRAPdesign @csteinert
Let’s
Review!!

83. #CRAPdesign @csteinert
! Contrast

84. #CRAPdesign @csteinert
! Contrast
! Repetition

85. #CRAPdesign @csteinert
! Contrast
! Repetition
! Alignment

86. #CRAPdesign @csteinert
! Contrast
! Repetition
! Alignment
! Proximity

87. #CRAPdesign @csteinert
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.!

88. #CRAPdesign @csteinert
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.!
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.!

89. #CRAPdesign @csteinert
Try it
yourself!!
csteinert.com/crap

90. #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

91. #CRAPdesign @csteinert
Thanks!!
www.csteinert.com
@csteinert