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

Design for Non-Designers / PHPTek

Design for Non-Designers / PHPTek

55486de8dc13fc5996a34cd2d4cbfd85?s=128

Tracy Osborn

May 25, 2017
Tweet

More Decks by Tracy Osborn

Other Decks in Programming

Transcript

  1. P HP TEK T RAC Y O S B OR

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

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

    N @limedaring Thanks to our Sponsors!
  4. P HP TEK T RAC Y O S B OR

    N @limedaring
  5. P HP TEK T RAC Y O S B OR

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

    N @limedaring
  7. P HP TEK T RAC Y O S B OR

    N @limedaring image credit: Dan Saffer
  8. P HP TEK T RAC Y O S B OR

    N @limedaring Design: Making an interface that 
 works well.
  9. P HP TEK 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. P HP TEK 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. P HP TEK 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. P HP TEK T RAC Y O S B OR

    N @limedaring
  13. P HP TEK 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. P HP TEK 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. P HP TEK 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. P HP TEK T RAC Y O S B OR

    N @limedaring
  17. P HP TEK T RAC Y O S B OR

    N @limedaring
  18. P HP TEK T RAC Y O S B OR

    N @limedaring
  19. P HP TEK T RAC Y O S B OR

    N @limedaring How can we create effective, basic designs?
  20. P HP TEK T RAC Y O S B OR

    N @limedaring Let’s talk about clutter
  21. P HP TEK T RAC Y O S B OR

    N @limedaring Pay attention to clutter #talkpay
  22. P HP TEK T RAC Y O S B OR

    N @limedaring Fastest way for better looking designs: Cut down on clutter.
  23. P HP TEK T RAC Y O S B OR

    N @limedaring
  24. P HP TEK T RAC Y O S B OR

    N @limedaring grid
  25. P HP TEK T RAC Y O S B OR

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

  26. P HP TEK T RAC Y O S B OR

    N @limedaring Shortcut: Use integrated grid systems and guides!
  27. P HP TEK T RAC Y O S B OR

    N @limedaring getbootstrap.com
  28. P HP TEK T RAC Y O S B OR

    N @limedaring foundation.zurb.com
  29. P HP TEK T RAC Y O S B OR

    N @limedaring getskeleton.com
  30. P HP TEK T RAC Y O S B OR

    N @limedaring
  31. P HP TEK T RAC Y O S B OR

    N @limedaring
  32. P HP TEK T RAC Y O S B OR

    N @limedaring color
  33. P HP TEK T RAC Y O S B OR

    N @limedaring Color principles Keep your colors complimentary. Use mostly neutrals + one brighter color for important bits.
  34. P HP TEK T RAC Y O S B OR

    N @limedaring https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
  35. P HP TEK T RAC Y O S B OR

    N @limedaring Shortcut: Use color palette websites!
  36. P HP TEK T RAC Y O S B OR

    N @limedaring foundation.zurb.com
  37. P HP TEK T RAC Y O S B OR

    N @limedaring material.io
  38. P HP TEK T RAC Y O S B OR

    N @limedaring colourlovers.com
  39. P HP TEK T RAC Y O S B OR

    N @limedaring
  40. P HP TEK T RAC Y O S B OR

    N @limedaring
  41. P HP TEK T RAC Y O S B OR

    N @limedaring
  42. P HP TEK T RAC Y O S B OR

    N @limedaring
  43. P HP TEK T RAC Y O S B OR

    N @limedaring
  44. P HP TEK T RAC Y O S B OR

    N @limedaring
  45. P HP TEK T RAC Y O S B OR

    N @limedaring fonts
  46. P HP TEK 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.
  47. P HP TEK T RAC Y O S B OR

    N @limedaring Shortcut: Use curated font websites!
  48. P HP TEK T RAC Y O S B OR

    N @limedaring http://hellohappy.org/beautiful-web-type/
  49. P HP TEK T RAC Y O S B OR

    N @limedaring http://hellohappy.org/beautiful-web-type/
  50. P HP TEK T RAC Y O S B OR

    N @limedaring fontpair.co
  51. P HP TEK T RAC Y O S B OR

    N @limedaring fontpair.co
  52. P HP TEK T RAC Y O S B OR

    N @limedaring
  53. P HP TEK T RAC Y O S B OR

    N @limedaring
  54. P HP TEK T RAC Y O S B OR

    N @limedaring white space
  55. P HP TEK T RAC Y O S B OR

    N @limedaring The ultimate clutter reducer
  56. P HP TEK T RAC Y O S B OR

    N @limedaring
  57. P HP TEK T RAC Y O S B OR

    N @limedaring
  58. P HP TEK T RAC Y O S B OR

    N @limedaring
  59. P HP TEK T RAC Y O S B OR

    N @limedaring
  60. P HP TEK T RAC Y O S B OR

    N @limedaring
  61. P HP TEK 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/
  62. P HP TEK T RAC Y O S B OR

    N @limedaring
  63. P HP TEK T RAC Y O S B OR

    N @limedaring
  64. P HP TEK 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.
  65. P HP TEK T RAC Y O S B OR

    N @limedaring User experience principles
  66. P HP TEK 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.
  67. P HP TEK T RAC Y O S B OR

    N @limedaring
  68. P HP TEK T RAC Y O S B OR

    N @limedaring
  69. P HP TEK T RAC Y O S B OR

    N @limedaring
  70. P HP TEK T RAC Y O S B OR

    N @limedaring
  71. P HP TEK T RAC Y O S B OR

    N @limedaring Pay attention to your goals. Make them easy to find and use.
  72. P HP TEK 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.
  73. P HP TEK 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. For best results, use the latest version of Firefox. Chrome for Mac and Windows is also supported.
  74. P HP TEK 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.
  75. P HP TEK 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.
  76. P HP TEK 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.
  77. P HP TEK T RAC Y O S B OR

    N @limedaring
  78. P HP TEK T RAC Y O S B OR

    N @limedaring
  79. P HP TEK 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. #talkpay
  80. P HP TEK T RAC Y O S B OR

    N @limedaring Headlines: Talk benefits, not details. Keep it short. Use natural, friendly language.
  81. P HP TEK T RAC Y O S B OR

    N @limedaring
  82. P HP TEK T RAC Y O S B OR

    N @limedaring
  83. P HP TEK T RAC Y O S B OR

    N @limedaring
  84. P HP TEK T RAC Y O S B OR

    N @limedaring
  85. P HP TEK T RAC Y O S B OR

    N @limedaring
  86. P HP TEK T RAC Y O S B OR

    N @limedaring
  87. P HP TEK T RAC Y O S B OR

    N @limedaring
  88. P HP TEK T RAC Y O S B OR

    N @limedaring Images and imagery
  89. P HP TEK 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.
  90. P HP TEK T RAC Y O S B OR

    N @limedaring
  91. P HP TEK T RAC Y O S B OR

    N @limedaring unsplash.com unsplash.com
  92. P HP TEK T RAC Y O S B OR

    N @limedaring photopin.com photopin.com
  93. P HP TEK T RAC Y O S B OR

    N @limedaring fiverr.com
  94. P HP TEK T RAC Y O S B OR

    N @limedaring
  95. P HP TEK T RAC Y O S B OR

    N @limedaring
  96. P HP TEK T RAC Y O S B OR

    N @limedaring Don’t be afraid of imitation.
  97. P HP TEK T RAC Y O S B OR

    N @limedaring Great designers steal 
 (and use shortcuts) #talkpay
  98. P HP TEK T RAC Y O S B OR

    N @limedaring Great designers steal 
 (and use shortcuts) #talkpay
  99. P HP TEK T RAC Y O S B OR

    N @limedaring
  100. P HP TEK T RAC Y O S B OR

    N @limedaring
  101. P HP TEK T RAC Y O S B OR

    N @limedaring
  102. P HP TEK T RAC Y O S B OR

    N @limedaring
  103. P HP TEK T RAC Y O S B OR

    N @limedaring
  104. P HP TEK T RAC Y O S B OR

    N @limedaring
  105. P HP TEK T RAC Y O S B OR

    N @limedaring
  106. P HP TEK T RAC Y O S B OR

    N @limedaring Quick overview of a design process
  107. P HP TEK T RAC Y O S B OR

    N @limedaring 1.
 Collect inspiration and 
 sketch ideas.
  108. P HP TEK T RAC Y O S B OR

    N @limedaring
  109. P HP TEK T RAC Y O S B OR

    N @limedaring
  110. P HP TEK T RAC Y O S B OR

    N @limedaring
  111. P HP TEK T RAC Y O S B OR

    N @limedaring
  112. P HP TEK T RAC Y O S B OR

    N @limedaring
  113. P HP TEK T RAC Y O S B OR

    N @limedaring
  114. P HP TEK T RAC Y O S B OR

    N @limedaring 2.
 Mock it up?
  115. P HP TEK T RAC Y O S B OR

    N @limedaring
  116. P HP TEK T RAC Y O S B OR

    N @limedaring
  117. P HP TEK T RAC Y O S B OR

    N @limedaring 3.
 Build it.
  118. P HP TEK T RAC Y O S B OR

    N @limedaring
  119. P HP TEK T RAC Y O S B OR

    N @limedaring My thought process, every time:
  120. P HP TEK 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!”
  121. P HP TEK T RAC Y O S B OR

    N @limedaring This is only the starting point!
  122. P HP TEK 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.
  123. P HP TEK T RAC Y O S B OR

    N @limedaring Make sure your goal is easy to find and use.
  124. P HP TEK T RAC Y O S B OR

    N @limedaring Keep your content simple, friendly, 
 and to the point.
  125. P HP TEK T RAC Y O S B OR

    N @limedaring Practice, practice, practice.
  126. P HP TEK T RAC Y O S B OR

    N @limedaring tinyurl.com/hellowebdesign #talkpay
  127. P HP TEK T RAC Y O S B OR

    N @limedaring
  128. P HP TEK T RAC Y O S B OR

    N @limedaring Thank you! @limedaring