Design for Non-Designers: All Things Open

https://allthingsopen.org/talk/design-for-non-designers/

Transcript

1. ALL THING S OPEN TRACY OSBORN @limedaring Design for Non-Designers Design principles and shortcuts to help you 
 become a better designer.
2. ALL THING S OPEN TRACY OSBORN @limedaring Hi, I’m Tracy! @limedaring (daring, not darling)
3. ALL THING S OPEN TRACY OSBORN @limedaring
4. ALL THING S OPEN 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. ALL THING S OPEN TRACY OSBORN @limedaring
6. ALL THING S OPEN TRACY OSBORN @limedaring
7. ALL THING S OPEN TRACY OSBORN @limedaring I will be tweeting all links: @limedaring (“daring” — not “darling”) #talkpay
8. ALL THING S OPEN TRACY OSBORN @limedaring
9. ALL THING S OPEN TRACY OSBORN @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay
10. ALL THING S OPEN TRACY OSBORN @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay
11. ALL THING S OPEN TRACY OSBORN @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay
12. ALL THING S OPEN TRACY OSBORN @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay
13. ALL THING S OPEN TRACY OSBORN @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay
14. ALL THING S OPEN TRACY OSBORN @limedaring
15. ALL THING S OPEN TRACY OSBORN @limedaring image credit: Dan Saffer
16. ALL THING S OPEN TRACY OSBORN @limedaring How can we create effective, basic designs?
17. ALL THING S OPEN TRACY OSBORN @limedaring Let’s talk about clutter
18. ALL THING S OPEN TRACY OSBORN @limedaring Pay attention to clutter #talkpay
19. ALL THING S OPEN TRACY OSBORN @limedaring Fastest way for better looking designs: Cut down on clutter.
20. ALL THING S OPEN TRACY OSBORN @limedaring
21. ALL THING S OPEN TRACY OSBORN @limedaring grid
22. ALL THING S OPEN TRACY OSBORN @limedaring Line things up — pixel differences are definitely unconsciously noticed.

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