Design for Non-Designers: View Source Berlin

Transcript

1. VIEW SOU RCE TRACY OSBORN @limedaring Design for Non-Designers Design principles and shortcuts to help you 
 become a better designer.
2. VIEW SOU RCE TRACY OSBORN @limedaring Hi, I’m Tracy! @limedaring (daring, not darling)
3. VIEW SOU RCE TRACY OSBORN @limedaring
4. VIEW SOU RCE TRACY OSBORN @limedaring Software Developer Developer Software Engineer Senior Software Engineer Programmer Coder Architect Software Architect Marketing Technologist SEO Consultant Web Analytics Developer Digital Marketing Manager Social Media Manager Growth Hacker Content Manager Content Strategist Information Architect UX Designer UI Designer Accessibility Specialist Interaction Designer Front-End Designer Front-End Developer Mobile Developer Full-Stack Developer Systems Engineer Database Administrator Data Architect Data Analyst Devops Manager Product Manager QA Engineer Security Specialist Technical Lead
5. VIEW SOU RCE TRACY OSBORN @limedaring
6. VIEW SOU RCE TRACY OSBORN @limedaring
7. FLU EN T CO NFER ENC E T RAC Y OS B OR N @limedaring
8. VIEW SOU RCE TRACY OSBORN @limedaring
9. FLU EN T CO NFER ENC E T RAC Y OS B OR N @limedaring
10. FLU EN T CO NFER ENC E T RAC Y OS B OR N @limedaring
11. FLU EN T CO NFER ENC E T RAC Y OS B OR N @limedaring
12. VIEW SOU RCE TRACY OSBORN @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay
13. FLU EN T CO NFER ENC E T RAC Y OS B OR N @limedaring
14. VIEW SOU RCE TRACY OSBORN @limedaring
15. VIEW SOU RCE TRACY OSBORN @limedaring image credit: Dan Saffer
16. VIEW SOU RCE TRACY OSBORN @limedaring How can we create effective, basic designs?
17. VIEW SOU RCE TRACY OSBORN @limedaring Let’s talk about clutter
18. FLU EN T CO NFER ENC E T RAC Y OS B OR N @limedaring
19. VIEW SOU RCE TRACY OSBORN @limedaring Fastest way for better looking designs: Cut down on clutter.
20. VIEW SOU RCE TRACY OSBORN @limedaring
21. VIEW SOU RCE TRACY OSBORN @limedaring grid
22. VIEW SOU RCE TRACY OSBORN @limedaring Line things up — pixel differences are definitely unconsciously noticed.

23. VIEW SOU RCE TRACY OSBORN @limedaring
24. VIEW SOU RCE TRACY OSBORN @limedaring
25. VIEW SOU RCE TRACY OSBORN @limedaring
26. VIEW SOU RCE TRACY OSBORN @limedaring color
27. VIEW SOU RCE TRACY OSBORN @limedaring Color principles Keep your colors complimentary. Use mostly neutrals + one brighter color for important bits.
28. VIEW SOU RCE TRACY OSBORN @limedaring https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
29. VIEW SOU RCE TRACY OSBORN @limedaring
30. VIEW SOU RCE TRACY OSBORN @limedaring
31. VIEW SOU RCE TRACY OSBORN @limedaring
32. VIEW SOU RCE TRACY OSBORN @limedaring
33. VIEW SOU RCE TRACY OSBORN @limedaring
34. VIEW SOU RCE TRACY OSBORN @limedaring
35. VIEW SOU RCE TRACY OSBORN @limedaring
36. VIEW SOU RCE TRACY OSBORN @limedaring fonts
37. VIEW SOU RCE TRACY OSBORN @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.
38. VIEW SOU RCE TRACY OSBORN @limedaring http://hellohappy.org/beautiful-web-type/
39. VIEW SOU RCE TRACY OSBORN @limedaring http://hellohappy.org/beautiful-web-type/
40. VIEW SOU RCE TRACY OSBORN @limedaring
41. VIEW SOU RCE TRACY OSBORN @limedaring
42. VIEW SOU RCE TRACY OSBORN @limedaring white space
43. VIEW SOU RCE TRACY OSBORN @limedaring The ultimate clutter reducer
44. VIEW SOU RCE TRACY OSBORN @limedaring
45. VIEW SOU RCE TRACY OSBORN @limedaring
46. VIEW SOU RCE TRACY OSBORN @limedaring
47. VIEW SOU RCE TRACY OSBORN @limedaring
48. VIEW SOU RCE TRACY OSBORN @limedaring
49. VIEW SOU RCE TRACY OSBORN @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/
50. VIEW SOU RCE TRACY OSBORN @limedaring
51. VIEW SOU RCE TRACY OSBORN @limedaring
52. VIEW SOU RCE TRACY OSBORN @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.
53. VIEW SOU RCE TRACY OSBORN @limedaring Don’t forget the user experience!
54. VIEW SOU RCE TRACY OSBORN @limedaring What’s the most important 
 action on your design? Make it easy to find and use.
55. VIEW SOU RCE TRACY OSBORN @limedaring
56. VIEW SOU RCE TRACY OSBORN @limedaring
57. VIEW SOU RCE TRACY OSBORN @limedaring
58. VIEW SOU RCE TRACY OSBORN @limedaring
59. VIEW SOU RCE TRACY OSBORN @limedaring Get a second (third, fourth…) opinion 
 on your designs.
60. VIEW SOU RCE TRACY OSBORN @limedaring Content principles Less is more. Big paragraphs are a sign of clutter. Break into bullets if you can.
61. VIEW SOU RCE TRACY OSBORN @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.
62. VIEW SOU RCE TRACY OSBORN @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.
63. VIEW SOU RCE TRACY OSBORN @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.
64. VIEW SOU RCE TRACY OSBORN @limedaring
65. VIEW SOU RCE TRACY OSBORN @limedaring
66. VIEW SOU RCE TRACY OSBORN @limedaring What’s the most important 
 action on your design? Make it easy to find and use. #talkpay
67. VIEW SOU RCE TRACY OSBORN @limedaring Headlines: Talk benefits, not details. Keep it short. Use natural, friendly language.
68. VIEW SOU RCE TRACY OSBORN @limedaring
69. VIEW SOU RCE TRACY OSBORN @limedaring
70. VIEW SOU RCE TRACY OSBORN @limedaring
71. VIEW SOU RCE TRACY OSBORN @limedaring
72. VIEW SOU RCE TRACY OSBORN @limedaring
73. VIEW SOU RCE TRACY OSBORN @limedaring
74. VIEW SOU RCE TRACY OSBORN @limedaring
75. VIEW SOU RCE TRACY OSBORN @limedaring Don’t be afraid of imitation.
76. VIEW SOU RCE TRACY OSBORN @limedaring Great designers steal 
 (and use shortcuts) #talkpay
77. FLU EN T CO NFER ENC E T RAC Y OS B OR N @limedaring
78. VIEW SOU RCE TRACY OSBORN @limedaring
79. VIEW SOU RCE TRACY OSBORN @limedaring
80. VIEW SOU RCE TRACY OSBORN @limedaring
81. VIEW SOU RCE TRACY OSBORN @limedaring
82. VIEW SOU RCE TRACY OSBORN @limedaring
83. VIEW SOU RCE TRACY OSBORN @limedaring
84. VIEW SOU RCE TRACY OSBORN @limedaring
85. VIEW SOU RCE TRACY OSBORN @limedaring Quick overview of a design process
86. VIEW SOU RCE TRACY OSBORN @limedaring 1.
 Collect inspiration and 
 sketch ideas.
87. VIEW SOU RCE TRACY OSBORN @limedaring
88. VIEW SOU RCE TRACY OSBORN @limedaring
89. VIEW SOU RCE TRACY OSBORN @limedaring
90. VIEW SOU RCE TRACY OSBORN @limedaring
91. VIEW SOU RCE TRACY OSBORN @limedaring
92. VIEW SOU RCE TRACY OSBORN @limedaring
93. VIEW SOU RCE TRACY OSBORN @limedaring 2.
 Mock it up?
94. VIEW SOU RCE TRACY OSBORN @limedaring
95. VIEW SOU RCE TRACY OSBORN @limedaring
96. VIEW SOU RCE TRACY OSBORN @limedaring 3.
 Build it.
97. VIEW SOU RCE TRACY OSBORN @limedaring
98. VIEW SOU RCE TRACY OSBORN @limedaring My thought process, every time:
99. VIEW SOU RCE TRACY OSBORN @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!”
100. VIEW SOU RCE TRACY OSBORN @limedaring This is only the starting point!
101. VIEW SOU RCE TRACY OSBORN @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.
102. VIEW SOU RCE TRACY OSBORN @limedaring Make sure your goal is easy to find and use.
103. VIEW SOU RCE TRACY OSBORN @limedaring Keep your content simple, friendly, 
 and to the point.
104. VIEW SOU RCE TRACY OSBORN @limedaring Practice, practice, practice.
105. VIEW SOU RCE TRACY OSBORN @limedaring hellowebapp.com/web-design
106. VIEW SOU RCE TRACY OSBORN @limedaring Thank you! @limedaring