Elements of Design: A Developer's Primer

“Oh, don’t ask me, I’m a terrible designer.” That's something I've heard from developers ever since I started working with them. But it’s never true. It's just that most devs don't have the scaffolding around which to structure their designs.

In this talk I cover the things every developer should know about design: contrast, repetition, proximity, hierarchy, flow, typography, and color.

Transcript

1. Elements of Design A Developer’s Primer
2. Hi, I’m Jenn Scheer Designer & Front-end Developer at Rap Genius
3. Why is design important?
4. 7 Principles 1. Hierarchy 2. Contrast 3. Repetition 4. Proximity 5. Flow 6. Typography 7. Color
5. For Each Principle 1. 'HįQHLW 2. Look at some “bad” examples countered with “good” examples 3. Use these examples to give you 3–4 “rules” to use in your work
6. Great, here we go.
7. 1. Hierarchy 2. Contrast 3. Repetition 4. Proximity 5. Flow 6. Typography 7. Color
8. HIERARCHY
9. BAD HIERARCHY
10. BAD HIERARCHY
11. BAD HIERARCHY #1 #2 ...AND EVERYTHING ELSE. WE’RE LOST IN A FIELD OF BOREDOM LOGO
12. GOOD HIERARCHY
13. GOOD HIERARCHY
14. GOOD HIERARCHY #1 #2 #3 LOGO ACTIONS CONTENT
15. LARGE HEADLINE & BOLD COLOR GRAB YOUR ATTENTION GOOD HIERARCHY
16. LOGO IS STILL PROMINENT GOOD HIERARCHY
17. A FEW DISTINCT SECTIONS TELL YOU WHAT TO DO NEXT GOOD HIERARCHY
18. BAD HIERARCHY
19. BAD HIERARCHY
20. EVERYTHING IS FIGHTING FOR YOUR ATTENTION BAD HIERARCHY
21. GOOD HIERARCHY
22. GOOD HIERARCHY
23. GOOD HIERARCHY
24. GOOD HIERARCHY
25. GOOD HIERARCHY
26. GOOD HIERARCHY
27. GOOD HIERARCHY
28. 1. Hierarchy 2. Contrast 3. Repetition 4. Proximity 5. Flow 6. Typography 7. Color
29. CONTRAST USE LINE, SHAPE, COLOR, TEXTURE, PATTERN
30. A Big Sexy Headline Balanced by a chilled out sub-headline MIX TYPEFACES & VARY SIZES CONTRAST
31. BAD CONTRAST
32. BAD CONTRAST BLACK, WHITE & BLUE
33. BAD CONTRAST NICE IDEA, BUT TOO SMALL TO “SHOW IT OFF”
34. GOOD CONTRAST
35. GOOD CONTRAST GEOMETRIC ORGANIC
36. GOOD CONTRAST FLAT WHITE SHAPE COLORFUL TEXTURE
37. BAD CONTRAST
38. ALL WIDGETS HAVE SAME IMPORTANCE BAD CONTRAST
39. GOOD CONTRAST
40. EACH SECTION HAS DIFFERENT FEATURES TO MATCH ITS PURPOSE & BE DISTINCT GOOD CONTRAST
41. BAD CONTRAST
42. Oh No, the Bootstrap Trap! CONTRAST
43. Oh No, the Bootstrap Trap! Bootstrap is Cool! CONTRAST
44. Bootstrap is Cool! (Use it wisely.) Oh No, the Bootstrap Trap! CONTRAST
45. GOOD CONTRAST
46. CONTRAST IN TEXTURE, ILLUSTRATION, COLOR, AND SCALE GOOD CONTRAST
47. GOOD CONTRAST
48. 1. Hierarchy 2. Contrast 3. Repetition 4. Proximity 5. Flow 6. Typography 7. Color
49. REPETITION
50. DRY: Don’t Repeat Yourself REPETITION
51. DRY: Don’t Repeat Yourself Repeat Yourself! REPETITION
52. BAD REPETITION
53. NO REPEATING FORMATTING, & TOO MANY CONFLICTING WAYS TO INTERACT BAD REPETITION
54. GOOD REPETITION
55. CLEAR INTERACTIONS GOOD REPETITION
56. USE A GRID GOOD REPETITION
57. USE SIMILAR ELEMENTS TO CREATE CONSISTENCY GOOD REPETITION
58. BAD REPETITION
59. TOO MANY REPEATING ELEMENTS TO UNDERSTAND THE PATTERN BAD REPETITION
60. GOOD REPETITION
61. CREATE EASE WITHIN A CLEAR CONTEXT GOOD REPETITION
62. GOOD REPETITION
63. GOOD REPETITION
64. 1. Hierarchy 2. Contrast 3. Repetition 4. Proximity 5. Flow 6. Typography 7. Color
65. PROXIMITY
66. BAD PROXIMITY
67. NO WHITE SPACE! BAD PROXIMITY
68. GOOD PROXIMITY
69. CREATE ATTRACTIVE WHITE SPACE GOOD PROXIMITY
70. BAD PROXIMITY
71. BAD PROXIMITY
72. THIS IS 38 ITEMS... ALPHABETICALLY ORGANIZED FROM LEFT TO RIGHT... AGH, MY EYES. BAD PROXIMITY
73. ONLY GROUP 3–5 ELEMENTS TOGETHER GOOD PROXIMITY
74. BAD PROXIMITY
75. TOO MUCH INFORMATION HERE! BAD PROXIMITY
76. GOOD PROXIMITY
77. GOOD PROXIMITY
78. GOOD PROXIMITY INFORMATION ABOUT THE BOOKING ON AIRBNB
79. GOOD PROXIMITY INFORMATION ABOUT THE APARTMENT
80. PAY SPECIAL ATTENTION TO FORMS & INTERACTIONS! PROXIMITY
81. 1. Hierarchy 2. Contrast 3. Repetition 4. Proximity 5. Flow 6. Typography 7. Color
82. There are 2 meanings for İRZ FLOW
83. 1 2 4 3 Flow Within One Page FLOW
84. SHOPPING SUCCESS Flow Between Many Pages FLOW
85. Today, let’s talk about İRZZLWKLQRQHSDJH FLOW
86. SEE PRODUCT INSPECT DETAILS ADD TO CART FLOW
87. FLOW
88. READ A STORY READ ANOTHER STORY FLOW
89. BAD FLOW
90. READ THIS BAD FLOW
91. OR... THIS BAD FLOW
92. OR... THIS BAD FLOW
93. ...AND LEAVE THE PAGE EVERY TIME BAD FLOW
94. END OF STORY GOES IMMEDIATELY TO NEW STORY GOOD FLOW
95. BAD FLOW
96. CONTRADICTING WAYS TO SCAN THE INFORMATION BAD FLOW
97. GOOD FLOW
98. THE EYE ZIG-ZAGS LEFT AND RIGHT, DOWN THE PAGE GOOD FLOW
99. BAD FLOW
100. GIVING INSTRUCTIONS TWO-THIRDS THROUGH THE PROCESS BAD FLOW
101. GOOD FLOW
102. STEP USERS THROUGH PROCESS & GIVE LIVE FEEDBACK GOOD FLOW
103. STEP USERS THROUGH PROCESS & GIVE LIVE FEEDBACK GOOD FLOW
104. STEP USERS THROUGH PROCESS & GIVE LIVE FEEDBACK GOOD FLOW
105. GOOD FLOW STEP USERS THROUGH PROCESS & GIVE LIVE FEEDBACK
106. STEP USERS THROUGH PROCESS & GIVE LIVE FEEDBACK GOOD FLOW
107. 1. Hierarchy 2. Contrast 3. Repetition 4. Proximity 5. Flow 6. Typography 7. Color
108. A Big Sexy Headline A Big Silly Headline Balanced by a chilled out sub-headline Made serious in contrast to a more traditional typeface MIX TYPEFACES, VARY SIZES, & VARY STYLES TYPOGRAPHY
109. TYPOGRAPHY
110. BAD TYPOGRAPHY
111. LONG LINES OF TEXT ARE VERY DIFFICULT TO READ BAD TYPOGRAPHY
112. GOOD TYPOGRAPHY
113. MAKE LINES 35–65 CHARACTERS LONG MINIMUM FONT-SIZE:LINE-HEIGHT RATIO: >= 1:1.5 GOOD TYPOGRAPHY
114. GOOD TYPOGRAPHY
115. BOLD ITALICS CUSTOM LINK COLOR GOOD TYPOGRAPHY
116. BAD TYPOGRAPHY
117. OW!! CAN’T READ THIS BAD TYPOGRAPHY
118. HEADLINES BAD TYPOGRAPHY
119. ARE THE SAME AS CATEGORIES BAD TYPOGRAPHY
120. ARE THE SAME AS SOCIAL LINKS? BAD TYPOGRAPHY
121. GOOD TYPOGRAPHY
122. SECTION HEADLINES GOOD TYPOGRAPHY
123. FEATURED ARTICLES GOOD TYPOGRAPHY
124. CATEGORY OVERVIEWS GOOD TYPOGRAPHY
125. LISTINGS GOOD TYPOGRAPHY
126. GOOD TYPOGRAPHY
127. GOOD TYPOGRAPHY
128. 1. Hierarchy 2. Contrast 3. Repetition 4. Proximity 5. Flow 6. Typography 7. Color
129. HUE SATURATION VALUE COLOR
130. BAD COLOR
131. SO STERILE, SO GENERIC, SUCH BOREDOM BAD COLOR
132. GOOD COLOR
133. YELLOW IS APPROPRIATE FOR TARGET AUDIENCE, SHOWS INTERACTIVITY GOOD COLOR
134. BAD COLOR
135. ORANGE UPVOTES? PURPLE DOWNVOTES?! DEFAULT LINK COLORS BAD COLOR
136. GOOD COLOR
137. GOOD COLOR BLUE == THE USUAL, “LINKS”
138. GOOD COLOR GREEN == GO! BUY!
139. RAP GENIUS
141. So now what?
142. 1. Hierarchy 2. Contrast 3. Repetition 4. Proximity 5. Flow 6. Typography 7. Color
143. That’s It!
144. Jenn Scheer @singleportrait jenn@rapgenius.com