Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design for Non-Designers — Lean Product

Design for Non-Designers — Lean Product

Tracy Osborn

April 20, 2018
Tweet

More Decks by Tracy Osborn

Other Decks in Technology

Transcript

  1. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Design for Non-Designers Basics of designing so you can make 
 effective, lovely interfaces.
  2. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Hi, I’m Tracy! @limedaring (daring, not darling) slides (also speakerdeck username)
  3. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  4. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  5. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring I will be tweeting all links: @limedaring (“daring” — not “darling”) #talkpay
  6. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  7. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring image credit: Dan Saffer
  8. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Design: Making an interface that 
 works well.
  9. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay
  10. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay
  11. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay
  12. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  13. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay
  14. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay
  15. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay
  16. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  17. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring How can we create effective, simple designs?
  18. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Let’s talk about clutter
  19. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Pay attention to clutter #talkpay
  20. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Fastest way for better looking designs: Cut down on clutter.
  21. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  22. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring grid
  23. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Line things up — pixel differences are definitely unconsciously noticed.

  24. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Shortcut: Use integrated grid systems 
 and guides!
  25. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring getbootstrap.com
  26. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring foundation.zurb.com
  27. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring getskeleton.com
  28. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring mozilla.org/en-US/developer/css-grid/
  29. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  30. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  31. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring color
  32. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Color principles Keep your colors complimentary. Use mostly neutrals + one brighter color for important bits.
  33. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
  34. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Shortcut: Use color palette websites!
  35. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring color.adobe.com
  36. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring material.io
  37. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring colormind.io #talkpay colormind.io
  38. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  39. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  40. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  41. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  42. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  43. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring fonts
  44. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Keep the number of fonts low — two different fonts is usually a good rule of thumb. Use fancy/display fonts sparingly — 
 very cluttery. Vary weights (bold), style (italics), and transforms (uppercase, etc.) to 
 differentiate bits.
  45. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  46. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  47. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  48. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Shortcut: Use curated font websites!
  49. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring http://hellohappy.org/beautiful-web-type/
  50. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring http://hellohappy.org/beautiful-web-type/
  51. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring fontpair.co
  52. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring fontpair.co
  53. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  54. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  55. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring white space
  56. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring The ultimate clutter reducer
  57. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  58. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  59. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  60. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  61. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  62. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  63. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring White space makes a website feel more professional and luxurious.
  64. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  65. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  66. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  67. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  68. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring White space makes your website easier to use — 
 affecting your bottom line.
  69. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring “By replacing the extra links around the Add to Cart buttons with whitespace, Xerox saw a 20% improvement in engagement, 5% boost in products added to cart, and a 33% improvement in customers continuing through purchase.” https://studio.uxpin.com/blog/ux-case-study-designing-whitespace-to-improve-conversions/
  70. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  71. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  72. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Reduce visual clutter, by keeping the number of fonts and colors low, add white space, and line things up. Aim for a “clean” design.
  73. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring User experience principles
  74. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring What’s the most important 
 action on your design? Make it easy to find and use.
  75. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  76. CO DE EURO PE T RAC Y O S B

    OR N @limedaring vs sign up email address I believe folks who know a bit about design will be more likely to hire a professional designer when the time is right. I’m a designer, and even I hire designers for things bigger than me. And if you agree, you should join my newsletter. I believe folks who know a bit about design will be more likely to hire a professional designer when the time is right. I’m a designer, and even I hire designers for things bigger than me. If you agree, you should join my newsletter.
  77. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  78. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  79. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  80. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  81. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Pay attention to your goals. Make them easy to find and use.
  82. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Content principles Less is more. Big paragraphs are a sign of clutter. Break into bullets if you can.
  83. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Please note that although Chrome is supported for both Mac and Windows operating systems, it is recommended that all users of this site switch to the most up-to-date version of the Firefox web browser for the best possible results.
  84. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring For best results, use the latest version of Firefox. Chrome for Mac and Windows is also supported. Please note that although Chrome is supported for both Mac and Windows operating systems, it is recommended that all users of this site switch to the most up-to-date version of the Firefox web browser for the best possible results.
  85. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring We made a bunch of changes: The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. Screenshots of the admin have been updated to reflect the new Django 1.9 styles. The few minor typos have been fixed. Updated the version of django-registration-redux that we use to 1.3. Last but not least, the Introduction has been updated. We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django- registration-redux that we use to 1.3. • Introduction has been updated.
  86. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django- registration-redux that we use to 1.3. • Introduction has been updated. We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django- registration-redux that we use to 1.3. • Introduction has been updated.
  87. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django-registration- redux that we use to 1.3. • Introduction has been updated. We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django- registration-redux that we use to 1.3. • Introduction has been updated.
  88. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Headlines: Talk benefits, not details. Keep it short. Use natural, friendly language.
  89. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  90. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  91. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  92. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  93. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  94. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  95. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  96. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Images and imagery
  97. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Images: - Stock photos usually look like stock photos. - You can accomplish a lot with just type and screenshots. - Remember to pay attention to file size. - Don’t forget retina-quality images.
  98. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  99. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring unsplash.com unsplash.com
  100. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring photopin.com photopin.com
  101. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring fiverr.com
  102. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  103. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  104. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Don’t be afraid of imitation.
  105. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Great designers steal 
 (and use shortcuts) #talkpay
  106. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Great designers steal 
 (and use shortcuts) #talkpay
  107. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  108. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  109. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  110. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  111. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  112. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  113. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  114. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Quick overview of a design process
  115. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring 1.
 Collect inspiration and 
 sketch ideas.
  116. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  117. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  118. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  119. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  120. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  121. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  122. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring 2.
 Mock it up?
  123. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  124. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  125. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring 3.
 Build it.
  126. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring
  127. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring My thought process, every time:
  128. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring My thought process, every time: “crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap 
 … yes!”
  129. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring This is only the starting point!
  130. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Reduce visual clutter: Keep the number of fonts and colors low. Add white space. Line things up. Keep content short and easy to skim.
  131. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Make sure your goal is easy to find and use.
  132. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Keep your content simple, friendly, and to the point.
  133. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Practice, practice, practice.
  134. LEAN PRO DU CT T RAC Y O S B

    OR N @limedaring Thank you! Chat with me online: @limedaring