The Little Details of UI Design

Presented at Laracon Online 2018 (https://laracon.net/)

Transcript

1. The Little Details of UI Design @steveschoger
13. The Header
14. Change header background color
15. Too bland / no personality Change header background color
16. #067698
17. background-color: #067698; Change header background color
18. Add a bit of color to your greys
19. #067698 rgb(5, 118, 152);
20. HSL HUE LIGHTNESS SATURATION
21. HSL HUE LIGHTNESS SATURATION hsl(204, 100%, 50%);
22. HUE BRIGHTNESS SATURATION HSB
23. #067698 rgb(5, 118, 152); hsl(194, 92%, 31%);
24. Change header background color background-color: hsl(194, 0%, 28%)
25. hsl(194, 22%, 28%) hsl(0, 0%, 28%) Current grey background Current grey background saturated with brand hue Brand hue Increase 22% hsl(194, 92%, 31%); Brand HSL
26. Change header background color
27. background-color: hsl(194, 22%, 28%) Change header background color
28. dribbble.com/colors
29. White feels too bright Change search input background color
30. background-color: hsl(194, 23%, 92%); border: none; Change search input background color
31. Hard edge Use a consistent corner radius
32. Use a consistent corner radius
33. Use a consistent corner radius
35. border-radius: 4px; Add border radius
36. Too harsh Make search icon lighter
37. fill: hsl(194, 8%, 56%); Make search icon lighter
38. Fontawesome Fontawesome Update icons
39. ! "  $ % & ' (
40. Use a consistent icon set
42. Available to purchase Symbolicons Flaticons www.symbolicons.com by Jory Raphael 2000+ icons (Available in Solid, Stroke and Color) www.flaticons.co by Zach Roszczewski 1200+ icons (Available in Solid and Stroke) Pictos Redux www.pictos.cc by Drew Wilson 825+ icons (Available in Solid, Stroke and Color) Primaries www.parakeet.co/primaries by Louie Mantia 648+ icons (Available in Solid) Entypo Material Icons www.entypo.com by Daniel Bruce 411 icons (Available in Solid) www.material.io/icons/ by Google 900 icons (Available in Solid) Zondicons www.zondicons.com by Steve Schoger 271 icons (Available in Solid) Heroicons UI www.steveschoger.com by Steve Schoger 107+ icons (Available in Stroke) Available for free
43. Available to purchase Symbolicons Flaticons www.symbolicons.com by Jory Raphael 2000+ icons (Available in Solid, Stroke and Color) www.flaticons.co by Zach Roszczewski 1200+ icons (Available in Solid and Stroke) Pictos Redux www.pictos.cc by Drew Wilson 825+ icons (Available in Solid, Stroke and Color) Primaries www.parakeet.co/primaries by Louie Mantia 648+ icons (Available in Solid) Entypo Material Icons www.entypo.com by Daniel Bruce 411 icons (Available in Solid) www.flaticons.co by Google 900 icons (Available in Solid) Zondicons www.zondicons.com by Steve Schoger 271 icons (Available in Solid) Heroicons UI www.steveschoger.com by Steve Schoger 107+ icons (Available in Stroke) Available for free
44. Fontawesome Fontawesome Update icons
45. Heroicons UI Heroicons UI Update icons
46. Detach from notification icons Make profile picture a dropdown
47. Taylor Otwell Settings & Privacy Help Center Language Posts & Activity Job postings Make profile picture a dropdown
48. padding: 0 2rem; border-left: 2px solid Make profile picture a dropdown
49. Make profile picture a dropdown
51. Make profile picture a circle
52. border-radius: 15px; overflow: hidden; Make profile picture a circle
53. Evenly distribute notification icons
54. justify-content: space-around; Evenly distribute notification icons
55. background-color: hsl(194, 23%, 92%); Make icons a bit darker
56. Make icons a bit darker
57. Make icons a bit darker
60. Activity Panel
61. r Make profile picture a circle
62. r Make profile picture a circle border-radius: 40px; overflow: hidden;
63. r Reorganize stats
64. r Reorganize stats
65. r Reorganize stats
66. Use font size to emphasis important information
68. 12px 14px 16px 18px 20px 24px 30px 36px 48px Classic Typographic Scale Tailwind Default Font Sizing 12px 14px 16px 18px 21px 24px 36px 48px 60px 72px
69. 12px 14px 16px 18px 20px 24px 30px 36px 48px Classic Typographic Scale Tailwind Default Font Sizing 12px 14px 16px 18px 21px 24px 36px 48px 60px 72px
70. 12px 14px 16px 18px 20px 24px 30px 36px 48px 60px 72px Classic Typographic Scale Tailwind Default Font Sizing 12px 14px 16px 18px 21px 24px 36px 48px 60px 72px
71. r Reorganize stats
73. r Reorganize stats font-size: 16px; font-size: 24px; font-size: 14px;
74. r Reduce size of username
75. Reduce size of username r font-size: 24px;
76. Reduce size of “Welcome Back” text and put it on its own line r
77. Reduce size of “Welcome Back” text and put it on its own line r
78. Reduce width of panel r
79. Reduce width of panel r
80. Move right side bar up r
81. Make secondary text lighter r
82. Make secondary text lighter r
83. Make secondary text lighter r
84. Use color to create hierarchy
86. Taylor Otwell Creator of Laravel You must understand more about your customers than your competitors do in order to build successful brand relationships. Take a healthy daily dose of Vitamin E(mpathy) and the customers will respond.
87. Taylor Otwell Creator of Laravel You must understand more about your customers than your competitors do in order to build successful brand relationships. Take a healthy daily dose of Vitamin E(mpathy) and the customers will respond. Primary Tertiary Secondary
88. Taylor Otwell Creator of Laravel You must understand more about your customers than your competitors do in order to build successful brand relationships. Take a healthy daily dose of Vitamin E(mpathy) and the customers will respond. Primary Tertiary Secondary
89. Make secondary text lighter r
90. Make secondary text lighter r
91. Zoom
92. Zoom
93. r
94. Use consistent spacing r padding: 24px; padding: 24px; padding: 15px; padding: 28px;
95. Use a consistent spacing scale
96. Spacing 12px 14px 16px 18px 20px 24px 30px 36px 48px Font Sizing 12px 16px 20px 30px 48px 6px
97. Spacing 12px 14px 16px 18px 20px 24px 30px 36px 48px Font Sizing 0.375rem 0.75rem 1rem 1.25rem 1.875rem 3rem
98. Spacing 12px 14px 16px 18px 20px 24px 30px 36px 48px Font Sizing 0.375rem 0.75rem 1rem 1.25rem 1.875rem 3rem
99. Use consistent spacing r
100. Use consistent spacing r
101. Use color to draw attention
102. Use color to draw attention
104. hsl(194, 92%, 31%);
105. Change panel background color
106. Change panel background color
107. Invert text colors
108. Invert text colors r
109. Saturate greys when using a colored background
110. COVFEFE NORMAL REDUCED CONTRAST COVFEFE
111. COVFEFE NORMAL OPACITY REDUCED 30% COVFEFE
112. COVFEFE NORMAL OPACITY REDUCED 25% COVFEFE
113. COVFEFE COVFEFE NORMAL HAND PICKED COLOR
114. Saturate grey text r color: hsl(0, 0%, 80%);
115. Saturate grey text r color: hsl(192, 100%, 92%);
116. Make the increase values white r
117. Make the increase values white r
118. Make secondary text bold r font-weight: bold;
119. Add subtle text shadow r text-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.20);
122. Imporve promotion section r
123. Update premium membership call-to-action text style r
124. Increase weight and change color of the text link r
125. Add icon to call-to-action r
126. Offset box-shadows
127. Offset box-shadow r box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.20);
128. Offset box-shadow r box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.20);
129. Offset box-shadow r box-shadow: 0 2 1px hsla(0, 0%, 0%, 0.08);
130. Offset box-shadow
131. Offset box-shadow
132. The News Feed
134. THe News Feed r
135. Make profile picture a circle r
136. Update the icons r
137. Use consistent spacing r
138. Change all blue links r
139. Easy on the link styles
141. Change all blue links r
142. Change all blue links r
143. Give text hierarchy r Primary Tertiary Secondary
144. Change all blue links r
145. Use contrast to create balance
147. Make icons lighter r
148. Make icons lighter r
149. Pick an appropriate line height
150. Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it's not a UI kit. It doesn't have a default theme, and there are no built-in UI components. On the flip side, it also has no opinion about how your site should look and doesn't impose design decisions that you have to fight to undo Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. A Utility-First CSS Framework for Rapid UI Development Large font-size: 48px; line-height: 1.125; Medium font-size: 24px; line-height: 1.25; Small font-size: 16px; line-height: 1.5rem
151. Increase line-height of body r
152. Increase line-height of body r line-height: 24px;
153. Review post activity r
155. Merge actions and stats r
156. Merge actions and stats r
157. Remove grey background r
158. Fix alignment r
159. Use alignment to clean up your design
160. Broadcast Announcements Automations Send your subscribers one-off broadcasts when you have time-sensitive content. Send your subscribers one-off broadcasts when you have time-sensitive content. Embeddable Forms Advanced Reporting Build beautiful forms that help turn casual readers into engaged customers. Build beautiful forms that help turn casual readers into engaged customers. Broadcast Announcements Automations Send your subscribers one-off broadcasts when you have time-sensitive content. Send your subscribers one-off broadcasts when you have time-sensitive content. Embeddable Forms Advanced Reporting Build beautiful forms that help turn casual readers into engaged customers. Build beautiful forms that help turn casual readers into engaged customers.
161. Fix alignment r
162. Fix alignment r
163. Remove top border r
164. Merge all posts r
165. Change all blue links
166. New Post
167. New Post r
168. Update icons r
169. Change button color R
170. Give actions hierarchy
176. Change button color r
177. Change button color r
178. Remove news feed title r
179. Combine New Post and News Feed r
181. Introduce progressive disclosure r
182. Introduce progressive disclosure r
183. Change input background color r background-color: hsl(300, 3%, 93%)
184. Focus state r
185. Remove “New Post” title r
186. Remove “New Post” title r
187. r
189. Right Side Bar
190. Right side bar r
191. Make profile pictures circles r
192. Use consistent spacing r
193. Update text color r
194. Update text color r
195. Remove panel heading background color
196. Remove panel heading background color r
197. Reduce size of title r
198. Make button a text link r
199. Move text link to top right corner of the panel r
200. Change buttons to icons r
201. Consider space instead of borders
203. Remove borders r
204. Remove borders r margin-bottom: 20px;
205. Increase spacing r margin-bottom: 30px;
207. Navigation
208. Navigation r
209. Update icons r
210. Lighten icons r
211. Remove borders r
212. Reduce space r
213. Remove container r
214. Change background color
215. Use color to create depth and hierarchy
216. Change background color
217. Change background color
218. Divide navigation into groups \
220. Give each group a title \
222. Reduce size of titles and make them uppercase \
223. Developer DEVELOPER
224. Developer DEVELOPER
225. Increase letter-spacing of titles \
226. Increase letter-spacing of titles \
228. Finishing touches
230. HSB Color Picker
231. HSL Color Picker
234. Consider temperature when saturating greys
238. Use good fonts
243. Great Typekit Fonts for UI’s Proxima Nova Acumin Pro Aktiv Grotesk Museo Sans The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind.
244. Great Typekit Fonts for UI’s Proxima Nova Acumin Pro Aktiv Grotesk Museo Sans The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind.
249. Add a bit of color to your greys Use a consistent corner radius Use a consistent icon set Use font size to emphasis important information Use color to create a hierarchy Use a consistent spacing scale Use color to draw attention Saturate greys when using a colored background Offset box-shadows Easy on the link styles Use contrast to create balance Pick an appropriate line height Use alignment to clean up your design Give actions hierarchy Consider space instead of borders Use color to create depth and hierarchy Consider temperature when saturating greys Use good fonts UI Design Checklist
250. www.refactoringui.com
251. Thanks! @steveschoger