Design for Developers

Design is not a talent. It’s a skill, and as any other skill, it can be nurtured and developed. Join me as we go through the basics of good design, with many hands-on examples that will help you achieve it. The presentation is mainly focused on web design, but the basic principles apply everywhere.

Slides from Devstaff meetup in Heraklion, Greece.

Transcript

1. Design for Developers Please love us. Devstaff Heraklion • November 2015 Zaharenia Atzitzikaki • @sugarenia
2. Design for Developers Please love us. Devstaff Heraklion • November 2015 Zaharenia Atzitzikaki • @sugarenia
3. Hi.
4. I’m Zaharenia.
5. I’m a designer.
6. I’m a designer.
7. I’m a designer. Now Lead Designer at Workable
8. I’m a designer. Previously freelancing, agency work Now Lead Designer at Workable
9. Developers are cool.
10. We’re on the same side.
11. Don’t panic!
12. Design can be taught
13. Design is a method
14. Colour
15. Meet the colour wheel
17. BASIC
18. SECONDARY
19. TERTIARY
20. Warm versus Cool
21. WARM
22. COOL
23. Using the colour wheel
24. MONOCHROME
26. COMPLEMENTS
28. ANALOGOUS
30. TRIADIC
32. Adobe™ Color CC, y’all.
33. How to create the perfect colour palette
34. STEP #1 Choose a brand colour
35. #1BBC9B
36. STEP #2 Choose an accent colour
37. #E64C66
38. STEP #3 Use a light colour for the background
39. #FAFAFA
40. STEP #4 Use a dark colour for text
41. #2D3E50
42. STEP #5 Wrap it all with neutrals
43. #AEAEAE
45. Colour pitfalls
46. Avoid black & white
47. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
48. Success is green Error is red
49. This is an error. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. This is not an error! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
50. Don’t rely on colour alone
51. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
52. When all else fails, steal
53. Typography
54. Web design is 95% typography. INFORMATION ARCHITECTS INC, 19 OCTOBER 2006
55. Typography = cheat code
56. Classification
57. Serif fonts are squiggly BIG CASLON, 150pt
58. Sans-serif fonts are business PROXIMA NOVA, 130pt
59. 5ETKRVHQPVUCTGHWP HANZIPEN SC, 150pt
60. Monospace fonts are cool MENLO, 100pt
61. Find the perfect font
62. Sans-serifs for interfaces
64. Serifs for content
66. Quality webfonts
67. hellohappy.org/beautiful-web-type
68. femmebot.github.io/google-type
69. FF TISA PRO (TYPEKIT)
70. OPEN SANS (GOOGLE)
71. CORNER STORE (TYPEKIT)
72. SOURCE CODE PRO (GOOGLE)
73. But I want to stay websafe!
77. Readability
78. Bump up your font size
79. …and go bigger for mobile
80. Pay attention to leading …OR LINE HEIGHT
81. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
82. Keep your line lengths short
83. Leave justification to Word
84. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad m i n i m ve n i a m , q u i s n o s t r u d exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
85. Test for edge cases
86. Lorem ipsum dolor sit amet lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
87. Layout
88. Need for grid
89. Think of LEGOs
90. Grids
91. Horizontal or vertical
93. 12, 16 or 24 columns
94. BASIC IDEA
95. BASIC IDEA Make things align
96. BASIC IDEA Make things align …but not too much
97. Break the grid to your advantage
100. Know your content
101. White space
102. Don’t fear the white space
106. Graphics
107. Icons
110. Only use icons as visual aid
117. Avoid icon overload
118. Find the perfect icon set
119. Please no.
120. LOOK FOR
121. LOOK FOR Size availability
122. LOOK FOR Size availability Glyph variety
123. LOOK FOR Size availability Glyph variety Style
125. Streamline
126. Streamline Icomoon
127. Videos & Animation
128. Video backgrounds are cool
131. Showcase your product with an overview video
132. Animations add pizzazz
135. Your UI isn’t a Disney movie. SOPHIE PAXTON, 6 OCTOBER 2015
136. Hands-on examples
137. Usable forms
139. Add lots of whitespace
141. Stick with top, left-aligned labels
143. Keep forms short
145. Style all states
150. Readable tables
152. Add lots of whitespace
154. Fix alignment
156. Remove extra borders
158. Style table headers
160. Add zebra striping
165. But wait, there’s more!
166. book.sugarenia.com title TBA
167. “So when is it out?”
168. When it’s ready.
169. Devstaff Heraklion • November 2015 Zaharenia Atzitzikaki • @sugarenia Thanks! You rock.