The Little Details of UI Design

382fe1dc60baac42f9c5d61afe1f88c1?s=47 steveschoger
February 07, 2018

The Little Details of UI Design

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

382fe1dc60baac42f9c5d61afe1f88c1?s=128

steveschoger

February 07, 2018
Tweet

Transcript

  1. The Little Details of UI Design @steveschoger

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  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

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

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

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

  58. None
  59. None
  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

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

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

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

  103. None
  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);
  120. None
  121. None
  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

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

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

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

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

  171. None
  172. None
  173. None
  174. None
  175. None
  176. Change button color r

  177. Change button color r

  178. Remove news feed title r

  179. Combine New Post and News Feed r

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

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

  202. None
  203. Remove borders r

  204. Remove borders r margin-bottom: 20px;

  205. Increase spacing r margin-bottom: 30px;

  206. None
  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 \

  219. None
  220. Give each group a title \

  221. None
  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 \

  227. None
  228. Finishing touches

  229. None
  230. HSB Color Picker

  231. HSL Color Picker

  232. None
  233. None
  234. Consider temperature when saturating greys

  235. None
  236. None
  237. None
  238. Use good fonts

  239. None
  240. None
  241. None
  242. None
  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.
  245. None
  246. None
  247. None
  248. None
  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