Designing with C.R.A.P. - Stir Trek 2015
•
2 likes•1,409 views
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.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Designing with C.R.A.P. - Stir Trek 2015
Similar to Designing with C.R.A.P. - Stir Trek 2015 (20)
Recently uploaded
Recently uploaded (20)
Designing with C.R.A.P. - Stir Trek 2015
- 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:
- 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!
- 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.!
- 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
- 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.
- 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
- 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
- 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.!
- 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