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

Design for Non-Designers - DjangoCon AU

55486de8dc13fc5996a34cd2d4cbfd85?s=47 Tracy Osborn
August 24, 2018

Design for Non-Designers - DjangoCon AU

55486de8dc13fc5996a34cd2d4cbfd85?s=128

Tracy Osborn

August 24, 2018
Tweet

Transcript

  1. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Design for Non-Designers Basics of designing so you can make 
 effective, lovely interfaces.
  2. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Hi, I’m Tracy! @limedaring (daring, not darling) slides (also speakerdeck username)
  3. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring I will be tweeting all links: @limedaring (“daring” — not “darling”) #talkpay
  4. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  5. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  6. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Design: Making an interface that 
 works well.
  7. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Why should everyone know a bit about design?
  8. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay
  9. DJA NGO CO N AU 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. DJA NGO CO N AU 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. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  12. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay
  13. DJA NGO CO N AU 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. DJA NGO CO N AU 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. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Let’s get started
  16. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Let’s talk about clutter
  17. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Pay attention to clutter #talkpay
  18. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Fastest way for better looking designs: Cut down on clutter.
  19. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  20. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring GRID
  21. DJA NGO CO N AU T RAC Y O S

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

  22. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Shortcut: Use integrated grid systems 
 and guides!
  23. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring getbootstrap.com
  24. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring foundation.zurb.com
  25. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring getskeleton.com
  26. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring mozilla.org/en-US/developer/css-grid/
  27. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  28. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  29. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring COLOR
  30. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Color hints: Keep your colors complementary.
  31. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  32. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  33. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  34. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Color hints: Keep your colors complementary. Use mostly neutrals + one brighter color for important bits.
  35. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
  36. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Shortcut: Use color palette websites!
  37. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring color.adobe.com
  38. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring material.io
  39. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring colormind.io #talkpay colormind.io
  40. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  41. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  42. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring TYPOGRAPHY
  43. DJA NGO CO N AU 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.
  44. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  45. DJA NGO CO N AU 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.
  46. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  47. DJA NGO CO N AU 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.
  48. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Shortcut: Use curated font websites!
  49. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring http://hellohappy.org/beautiful-web-type/
  50. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring http://hellohappy.org/beautiful-web-type/
  51. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring fontpair.co
  52. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring fontpair.co
  53. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  54. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  55. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring WHITE
 SPACE
  56. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring The ultimate clutter reducer
  57. DJA NGO CO N AU T RAC Y O S

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

    OR N @limedaring
  59. DJA NGO CO N AU 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. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring White space makes your website easier to use — 
 affecting your bottom line.
  64. DJA NGO CO N AU 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/
  65. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  66. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  67. DJA NGO CO N AU 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.
  68. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring USER EXPERIENCE
  69. DJA NGO CO N AU 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.
  70. 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.
  71. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  72. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  73. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  74. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Pay attention to your goals. Make them easy to find and use.
  75. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring This is where you 
 should pay attention to 
 data and analytics.
  76. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring CONTENT
  77. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Content hints: • Less is more.
  78. DJA NGO CO N AU 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.
  79. DJA NGO CO N AU 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.
  80. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Content hints: • Less is more. • Big paragraphs are a sign of clutter.
  81. DJA NGO CO N AU 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.
  82. DJA NGO CO N AU 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. Last but not least, the Introduction has been updated.
  83. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Headlines hints: • Keep them succinct. • Use natural, friendly language. • Talk benefits, not details.
  84. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  85. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  86. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  87. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  88. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  89. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring IMAGES & IMAGERY
  90. DJA NGO CO N AU 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.
  91. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  92. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring unsplash.com
  93. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring photopin.com
  94. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring fiverr.com
  95. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  96. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  97. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  98. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  99. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  100. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  101. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring ON THE IMPORTANCE OF IMITATION
  102. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Great designers steal 
 (and use shortcuts) #talkpay
  103. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Great designers steal 
 (and use shortcuts) #talkpay
  104. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  105. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  106. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  107. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  108. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  109. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  110. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  111. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring THE DESIGN
 PROCESS
  112. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring 1.
 Collect inspiration and 
 sketch ideas.
  113. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  114. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  115. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  116. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  117. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  118. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  119. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring 2.
 Mock it up?
  120. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  121. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  122. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring 3.
 Build it.
  123. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  124. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring My thought process, every time:
  125. DJA NGO CO N AU 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!”
  126. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring This is only the starting point!
  127. DJA NGO CO N AU 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.
  128. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Make sure your goal is easy to find and use.
  129. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Keep your content simple, friendly, and to the point.
  130. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring Practice, practice, practice.
  131. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring tinyurl.com/hellowebdesign #talkpay
  132. DJA NGO CO N AU T RAC Y O S

    B OR N @limedaring
  133. DJA NGO CO N AU T RAC Y O S

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