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

Design for Developers

Zaharenia Atzitzikaki
November 12, 2015
Design
32
1.9k

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.

Zaharenia Atzitzikaki

November 12, 2015
Tweet

More Decks by Zaharenia Atzitzikaki

See All by Zaharenia Atzitzikaki
Hacking Hybrid Work
sugarenia
0
430
How To Influence Your Manager and Win Promotions
sugarenia
2
760
From Individual Contributor to People Manager
sugarenia
0
720
How to Work Remotely and Live to Tell the Tale
sugarenia
0
800
Intro to Sass
sugarenia
5
710
From student to web professional: Hints, tips & cheat codes
sugarenia
15
1.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
239
1.2M
Lessons learnt (so far)
sugarenia
5
610
My God, it's full of jobs!
sugarenia
7
650

Other Decks in Design

See All in Design
Arborea - Concept Art
thebloggart
0
170
Customizing Icons to Complement Fonts
strongeron
0
110
Spindle UIのつくりかた / Spindle UI: From Concept to Creation
spindle
3
1.4k
ミラノ工科大学連携プログラム サービスデザイン基礎研修 募集要項｜Tangity part of NTTDATA
okabemy
1
980
愉しみながら成長できる仕組みづくり
norinity1103
0
290
ビジネスの中心で“デザインのチカラ”をはたらかせるデザイナーのあり方 / Designship2023
visional_engineering_and_design
2
580
ホワイトペーパー制作代行サービス（旧）
siteengine
0
150
インターネット広告の変遷とAIを活用した最近の取り組み
cyberagentdevelopers
PRO
0
290
Adding a Touch of glitr
achafetz
0
220
SHM Illustration
thebloggart
0
260
Data, Design and Government
hik0107
11
3.2k
デザイナー向けLoglass会社紹介
loglass2019
2
240

Featured

See All Featured
Writing Fast Ruby
sferik
615
59k
Agile that works and the tools we love
rasmusluckow
323
20k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
41
12k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
26
5.5k
Faster Mobile Websites
deanohume
296
29k
The Cost Of JavaScript in 2023
addyosmani
9
1.6k
[RailsConf 2023] Rails as a piece of cake
palkan
15
2.9k
Product Roadmaps are Hard
iamctodd
43
8.8k
How STYLIGHT went responsive
nonsquared
89
4.5k
Code Reviewing Like a Champion
maltzj
510
38k
Large-scale JavaScript Application Architecture
addyosmani
501
110k

Transcript

  1. Design for Developers
    Please love us.
    Devstaff Heraklion • November 2015
    Zaharenia Atzitzikaki • @sugarenia

    View Slide

  2. Design for Developers
    Please love us.
    Devstaff Heraklion • November 2015
    Zaharenia Atzitzikaki • @sugarenia

    View Slide

  3. Hi.

    View Slide

  4. I’m Zaharenia.

    View Slide

  5. I’m a designer.

    View Slide

  6. I’m a designer.

    View Slide

  7. I’m a designer.
    Now Lead Designer at Workable

    View Slide

  8. I’m a designer.
    Previously freelancing, agency work
    Now Lead Designer at Workable

    View Slide

  9. Developers are cool.

    View Slide

  10. We’re on the same side.

    View Slide

  11. Don’t panic!

    View Slide

  12. Design can be taught

    View Slide

  13. Design is a method

    View Slide

  14. Colour

    View Slide

  15. Meet the colour wheel

    View Slide

  16. View Slide

  17. BASIC

    View Slide

  18. SECONDARY

    View Slide

  19. TERTIARY

    View Slide

  20. Warm versus Cool

    View Slide

  21. WARM

    View Slide

  22. COOL

    View Slide

  23. Using the colour wheel

    View Slide

  24. MONOCHROME

    View Slide

  25. View Slide

  26. COMPLEMENTS

    View Slide

  27. View Slide

  28. ANALOGOUS

    View Slide

  29. View Slide

  30. TRIADIC

    View Slide

  31. View Slide

  32. Adobe™ Color CC, y’all.

    View Slide

  33. How to create the
    perfect colour palette

    View Slide

  34. STEP #1
    Choose a brand colour

    View Slide

  35. #1BBC9B

    View Slide

  36. STEP #2
    Choose an accent colour

    View Slide

  37. #E64C66

    View Slide

  38. STEP #3
    Use a light colour for the
    background

    View Slide

  39. #FAFAFA

    View Slide

  40. STEP #4
    Use a dark colour for text

    View Slide

  41. #2D3E50

    View Slide

  42. STEP #5
    Wrap it all with neutrals

    View Slide

  43. #AEAEAE

    View Slide

  44. View Slide

  45. Colour pitfalls

    View Slide

  46. Avoid black & white

    View Slide

  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.

    View Slide

  48. Success is green
    Error is red

    View Slide

  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.

    View Slide

  50. Don’t rely on colour alone

    View Slide

  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.

    View Slide

  52. When all else fails, steal

    View Slide

  53. Typography

    View Slide

  54. Web design is 95%
    typography.
    INFORMATION ARCHITECTS INC, 19 OCTOBER 2006

    View Slide

  55. Typography = cheat code

    View Slide

  56. Classification

    View Slide

  57. Serif fonts are squiggly
    BIG CASLON, 150pt

    View Slide

  58. Sans-serif fonts are business
    PROXIMA NOVA, 130pt

    View Slide

  59. 5ETKRVHQPVUCTGHWP
    HANZIPEN SC, 150pt

    View Slide

  60. Monospace fonts are cool
    MENLO, 100pt

    View Slide

  61. Find the perfect font

    View Slide

  62. Sans-serifs for interfaces

    View Slide

  63. View Slide

  64. Serifs for content

    View Slide

  65. View Slide

  66. Quality webfonts

    View Slide

  67. hellohappy.org/beautiful-web-type

    View Slide

  68. femmebot.github.io/google-type

    View Slide

  69. FF TISA PRO (TYPEKIT)

    View Slide

  70. OPEN SANS (GOOGLE)

    View Slide

  71. CORNER STORE (TYPEKIT)

    View Slide

  72. SOURCE CODE PRO (GOOGLE)

    View Slide

  73. But I want to stay websafe!

    View Slide

  74. View Slide

  75. View Slide

  76. View Slide

  77. Readability

    View Slide

  78. Bump up your font size

    View Slide

  79. …and go bigger for mobile

    View Slide

  80. Pay attention to leading
    …OR LINE HEIGHT

    View Slide

  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.

    View Slide

  82. Keep your line lengths short

    View Slide

  83. Leave justification to Word

    View Slide

  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.

    View Slide

  85. Test for edge cases

    View Slide

  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.

    View Slide

  87. Layout

    View Slide

  88. Need for grid

    View Slide

  89. Think of LEGOs

    View Slide

  90. Grids

    View Slide

  91. Horizontal or vertical

    View Slide

  92. View Slide

  93. 12, 16 or 24 columns

    View Slide

  94. BASIC IDEA

    View Slide

  95. BASIC IDEA
    Make things align

    View Slide

  96. BASIC IDEA
    Make things align
    …but not too much

    View Slide

  97. Break the grid to your advantage

    View Slide

  98. View Slide

  99. View Slide

  100. Know your content

    View Slide

  101. White space

    View Slide

  102. Don’t fear the white space

    View Slide

  103. View Slide

  104. View Slide

  105. View Slide

  106. Graphics

    View Slide

  107. Icons

    View Slide

  108. View Slide

  109. View Slide

  110. Only use icons as visual aid

    View Slide

  111. View Slide

  112. View Slide

  113. View Slide

  114. View Slide

  115. View Slide

  116. View Slide

  117. Avoid icon overload

    View Slide

  118. Find the perfect icon set

    View Slide

  119. Please no.

    View Slide

  120. LOOK FOR

    View Slide

  121. LOOK FOR
    Size availability

    View Slide

  122. LOOK FOR
    Size availability
    Glyph variety

    View Slide

  123. LOOK FOR
    Size availability
    Glyph variety
    Style

    View Slide

  124. View Slide

  125. Streamline

    View Slide

  126. Streamline
    Icomoon

    View Slide

  127. Videos & Animation

    View Slide

  128. Video backgrounds are cool

    View Slide

  129. View Slide

  130. View Slide

  131. Showcase your product
    with an overview video

    View Slide

  132. Animations add pizzazz

    View Slide

  133. View Slide

  134. View Slide

  135. Your UI isn’t a Disney movie.
    SOPHIE PAXTON, 6 OCTOBER 2015

    View Slide

  136. Hands-on examples

    View Slide

  137. Usable forms

    View Slide

  138. View Slide

  139. Add lots of whitespace

    View Slide

  140. View Slide

  141. Stick with top,
    left-aligned labels

    View Slide

  142. View Slide

  143. Keep forms short

    View Slide

  144. View Slide

  145. Style all states

    View Slide

  146. View Slide

  147. View Slide

  148. View Slide

  149. View Slide

  150. Readable tables

    View Slide

  151. View Slide

  152. Add lots of whitespace

    View Slide

  153. View Slide

  154. Fix alignment

    View Slide

  155. View Slide

  156. Remove extra borders

    View Slide

  157. View Slide

  158. Style table headers

    View Slide

  159. View Slide

  160. Add zebra striping

    View Slide

  161. View Slide

  162. View Slide

  163. View Slide

  164. View Slide

  165. But wait, there’s more!

    View Slide

  166. book.sugarenia.com
    title TBA

    View Slide

  167. “So when is it out?”

    View Slide

  168. When it’s ready.

    View Slide

  169. Devstaff Heraklion • November 2015
    Zaharenia Atzitzikaki • @sugarenia
    Thanks!
    You rock.

    View Slide