Pro Yearly is on sale from $80 to $50! »

Design for Non-Designers — Beyond Tellerand Dusseldorf 2018

Design for Non-Designers — Beyond Tellerand Dusseldorf 2018

55486de8dc13fc5996a34cd2d4cbfd85?s=128

Tracy Osborn

May 07, 2018
Tweet

Transcript

  1. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Design for Non-Designers Basics of designing so you can make 
 effective, lovely interfaces.
  2. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Hi, I’m Tracy! @limedaring (daring, not darling) slides (also speakerdeck username)
  3. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring I will be tweeting all links: @limedaring (“daring” — not “darling”) #talkpay
  4. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  5. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  6. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring image credit: Dan Saffer
  7. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Design: Making an interface that 
 works well.
  8. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring We will cover:
  9. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring We will cover: •The one visual design principle to remember — and how it applies to major design concepts.
  10. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring We will cover: •The one visual design principle to remember — and how it applies to major design concepts. •An overview of the design process, to help beginners go from an idea to execution as fast as possible.
  11. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Not a beginner? This presentation will help you teach design.
  12. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Why should everyone know a bit about design?
  13. BEYON D TELLERA ND 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. BEYON D TELLERA ND 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. BEYON D TELLERA ND 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. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  17. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay
  18. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay
  19. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay
  20. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Let’s get started
  21. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Let’s talk about clutter
  22. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Pay attention to clutter #talkpay
  23. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Fastest way for better looking designs: Cut down on clutter.
  24. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  25. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring GRID
  26. BEYON D TELLERA ND T RAC Y O S B

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

  27. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Shortcut: Use integrated grid systems 
 and guides!
  28. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring getbootstrap.com
  29. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring foundation.zurb.com
  30. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring getskeleton.com
  31. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring mozilla.org/en-US/developer/css-grid/
  32. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  33. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  34. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring COLOR
  35. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Color hints: Keep your colors complementary.
  36. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Color hints: Keep your colors complementary.
  37. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  38. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  39. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  40. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Color hints: Keep your colors complementary. Use mostly neutrals + one brighter color for important bits.
  41. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
  42. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Shortcut: Use color palette websites!
  43. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring color.adobe.com
  44. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring material.io
  45. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring colormind.io #talkpay colormind.io
  46. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  47. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  48. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring TYPOGRAPHY
  49. BEYON D TELLERA ND 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.
  50. CO DE EURO PE T RAC Y O S B

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

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

    OR N @limedaring
  53. BEYON D TELLERA ND 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 — 
 can be very cluttery.
  54. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  55. BEYON D TELLERA ND 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 — 
 can be very cluttery. Vary weights (bold), style (italics),
 and transforms (uppercase, etc.) 
 to differentiate bits.
  56. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Shortcut: Use curated font websites!
  57. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring http://hellohappy.org/beautiful-web-type/
  58. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring http://hellohappy.org/beautiful-web-type/
  59. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring fontpair.co
  60. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring fontpair.co
  61. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  62. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  63. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring WHITE
 SPACE
  64. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring The ultimate clutter reducer
  65. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  66. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  67. BEYON D TELLERA ND T RAC Y O S B

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

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

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

    OR N @limedaring
  71. BEYON D TELLERA ND T RAC Y O S B

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

    OR N @limedaring
  73. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  74. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring White space makes your website easier to use — 
 affecting your bottom line.
  75. BEYON D TELLERA ND 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/
  76. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  77. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  78. BEYON D TELLERA ND 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.
  79. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring USER EXPERIENCE
  80. BEYON D TELLERA ND 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.
  81. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  82. 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.
  83. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  84. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  85. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  86. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Pay attention to your goals. Make them easy to find and use.
  87. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring This is where you 
 should pay attention to 
 data and analytics.
  88. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring CONTENT
  89. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Content hints: • Less is more.
  90. BEYON D TELLERA ND 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.
  91. BEYON D TELLERA ND 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.
  92. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Content hints: • Less is more. • Big paragraphs are a sign of clutter.
  93. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Content hints: • Less is more. • Big paragraphs are a sign of clutter. • Break into bullets if you can.
  94. BEYON D TELLERA ND 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.
  95. BEYON D TELLERA ND 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.
  96. BEYON D TELLERA ND 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.
  97. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Headlines hints: • Keep them succinct. • Use natural, friendly language. • Talk benefits, not details.
  98. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  99. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  100. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  101. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  102. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  103. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring IMAGES & IMAGERY
  104. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Images: • Stock photos usually look like stock photos. Be careful what you pick. • You can accomplish a lot with just type and screenshots. • Remember to pay attention to file size. • Don’t forget retina-quality images.
  105. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  106. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring unsplash.com unsplash.com
  107. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring photopin.com photopin.com
  108. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring fiverr.com
  109. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  110. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  111. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  112. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  113. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  114. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  115. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring ON THE IMPORTANCE OF IMITATION
  116. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Great designers steal 
 (and use shortcuts) #talkpay
  117. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Great designers steal 
 (and use shortcuts) #talkpay
  118. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  119. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  120. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  121. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  122. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  123. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  124. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  125. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring THE DESIGN
 PROCESS
  126. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring 1.
 Collect inspiration and 
 sketch ideas.
  127. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  128. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  129. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  130. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  131. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  132. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  133. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring 2.
 Mock it up?
  134. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  135. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  136. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring 3.
 Build it.
  137. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  138. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring My thought process, every time:
  139. BEYON D TELLERA ND 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!”
  140. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring This is only the starting point!
  141. BEYON D TELLERA ND 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.
  142. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Make sure your goal is easy to find and use.
  143. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Keep your content simple, friendly, and to the point.
  144. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring Practice, practice, practice.
  145. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring tinyurl.com/hellowebdesign #talkpay
  146. BEYON D TELLERA ND T RAC Y O S B

    OR N @limedaring
  147. BEYON D TELLERA ND T RAC Y O S B

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