Design for Developers

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.

1b8ad785acdd1ce1c99914b1c2a4e10e?s=128

Zaharenia Atzitzikaki

November 12, 2015
Tweet

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

  16. None
  17. BASIC

  18. SECONDARY

  19. TERTIARY

  20. Warm versus Cool

  21. WARM

  22. COOL

  23. Using the colour wheel

  24. MONOCHROME

  25. None
  26. COMPLEMENTS

  27. None
  28. ANALOGOUS

  29. None
  30. TRIADIC

  31. None
  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

  44. None
  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

  63. None
  64. Serifs for content

  65. None
  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!

  74. None
  75. None
  76. None
  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

  92. None
  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

  98. None
  99. None
  100. Know your content

  101. White space

  102. Don’t fear the white space

  103. None
  104. None
  105. None
  106. Graphics

  107. Icons

  108. None
  109. None
  110. Only use icons as visual aid

  111. None
  112. None
  113. None
  114. None
  115. None
  116. None
  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

  124. None
  125. Streamline

  126. Streamline Icomoon

  127. Videos & Animation

  128. Video backgrounds are cool

  129. None
  130. None
  131. Showcase your product with an overview video

  132. Animations add pizzazz

  133. None
  134. None
  135. Your UI isn’t a Disney movie. SOPHIE PAXTON, 6 OCTOBER

    2015
  136. Hands-on examples

  137. Usable forms

  138. None
  139. Add lots of whitespace

  140. None
  141. Stick with top, left-aligned labels

  142. None
  143. Keep forms short

  144. None
  145. Style all states

  146. None
  147. None
  148. None
  149. None
  150. Readable tables

  151. None
  152. Add lots of whitespace

  153. None
  154. Fix alignment

  155. None
  156. Remove extra borders

  157. None
  158. Style table headers

  159. None
  160. Add zebra striping

  161. None
  162. None
  163. None
  164. None
  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.