Designing with C.R.A.P.
1 like810 views
The document is a transcript from a presentation on design principles. It discusses the principles of contrast, repetition, alignment and proximity (CRAP). It provides examples of how contrast can be used effectively in design to draw attention and differentiate elements, but also how there can be too much contrast. It suggests using contrast sparingly and not being shy about it. It also provides an example of redesigning a rental lease agreement to improve readability and understanding by removing unnecessary formatting like underlines, italics and bolding to make all elements consistent.
Designing with C.R.A.P.
- 1. #CRAPdesign @csteinert Designing with C.R. A.P. Stir Trek 2014 #CRAPdesign Caitlin Steinert @csteinert 1
- 2. #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
- 3. #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
- 4. #CRAPdesign @csteinert What is design? Who knows, right? There’s a ton of different definitions. 4
- 5. #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
- 6. #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
- 7. #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
- 8. #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
- 9. #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
- 10. #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
- 11. #CRAPdesign @csteinert Contrast Repetition Alignment Proximity And, of course, here’s where we get CRAP. So let’s jump right in. 11
- 12. #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
- 13. #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
- 14. #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
- 15. #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
- 16. #CRAPdesign @csteinert Cats Dogs It’s raining: Once we switch to a color with more contrast, though, we’re good to go. 16
- 17. #CRAPdesign @csteinert Where’s Waldo is an excellent example of low contrast. 17
- 18. #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
- 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. We can guess what’s going on here, but why not make it very obvious? 19
- 20. #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
- 21. #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
- 22. #CRAPdesign @csteinert Apparently “contact us” wasn’t as high on the priority list as EVERY OTHER THING ON THIS PAGE. 22
- 24. #CRAPdesign @csteinert Contrast Use sparingly Don’t be shy 24
- 25. #CRAPdesign @csteinert Contrast Use sparingly Don’t be shy 25
- 26. #CRAPdesign @csteinert Contrast Use sparingly Don’t be SHY 26
- 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. 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
- 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. Let’s start by making everything the same. First the font sizes. 28
- 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. And then by removing unnecessary underlines. 29
- 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. 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
- 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. And unnecessary bolding. 31
- 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. 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
- 33. #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
- 34. #CRAPdesign @csteinert 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
- 35. #CRAPdesign @csteinert This is a chore to read. 35
- 36. #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
- 37. #CRAPdesign @csteinert Branding is straight-up repetition. We are assuring our users that they’re in the right place. 37
- 38. #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
- 39. #CRAPdesign @csteinert Fitbit uses repetition in color, typography, icons and charts to make their UI easy to parse at a glance. 39
- 40. #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
- 41. #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
- 42. #CRAPdesign @csteinert Once I know that these numbers indicate up-votes, I can easily skim this page for the information I need. 42
- 43. #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
- 44. #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
- 45. #CRAPdesign @csteinert Alignment naturally draws our eyes. We can use it to quietly suggest reading/viewing patterns to users. 45
- 46. #CRAPdesign @csteinert Certain alignments are stronger than others. 46
- 47. #CRAPdesign @csteinert Because they create an invisible “edge” when all the content stops at the same place. 47
- 48. #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
- 49. #CRAPdesign @csteinert But in the hierarchy of strong alignment, center still ranks below justified. Sorry, center alignment. 49
- 50. #CRAPdesign @csteinert The same goes for horizontal alignment. If there’s a strong “edge” being created, our eyes will notice it. 50
- 51. #CRAPdesign @csteinert Still noticing it. 51
- 52. #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
- 53. #CRAPdesign @csteinert Horizontally-aligned objects that are the same size can look similar to the point of being completely overlooked. 53
- 54. #CRAPdesign @csteinert But once one item breaks the alignment, whoa buddy, all eyes are on that contrasting item! 54
- 55. #CRAPdesign @csteinert Which is why tab strips work so well. 55
- 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. There’s a block quote in this wall of text, but it isn’t initially noticable. 56
- 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. “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
- 58. #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. Ok, back to this piece of… not C.R.A.P. Let’s add some alignment. 58
- 59. #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 Apartments 1234 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
- 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. 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
- 61. #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
- 62. #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
- 63. #CRAPdesign @csteinert Proximity Now they’re SUPER related. In fact, we might infer that the smaller circle even depends on the larger one. 63
- 64. #CRAPdesign @csteinert The audio controls on this dashboard are all located close to each other, in the same area. 64
- 65. #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
- 66. #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 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
- 67. #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 All it took was adjusting the margins in the CSS and we were all set. 67
- 68. #CRAPdesign @csteinert Magic Hill Apartments 1234 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
- 69. #CRAPdesign @csteinert Magic Hill Apartments 1234 Boat Road, Freedom Town, OH 44222 (555) 555-5555 Fax (555) 555-5556 But I could be wrong. 69
- 70. #CRAPdesign @csteinert Magic Hill Apartments 1234 Boat Road, Freedom Town, OH 44222 (555) 555-5555 Fax (555) 555-5556 Or I could be right. 70
- 71. #CRAPdesign @csteinert Magic Hill Apartments 1234 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
- 72. #CRAPdesign @csteinert Magic Hill Apartments 1234 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
- 74. #CRAPdesign @csteinert Contrast When we use contrast, we go for it. Don’t be shy! 74
- 75. #CRAPdesign @csteinert Contrast Repetition Repetition is about building trust and comprehension for our users. 75
- 76. #CRAPdesign @csteinert Contrast Repetition Alignment Alignment shows users the way. Certain types of alignment are stronger than others. 76
- 77. #CRAPdesign @csteinert Contrast Repetition Alignment Proximity People instinctively process proximity (or the lack thereof) as relationship cues. 77
- 78. #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. With these four basic principles, we took this from flat out ugly… 78
- 79. #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. to legible and useful! Hooray! 79
- 80. #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
- 81. #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