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

The Little Details of UI Design

steveschoger
February 07, 2018

The Little Details of UI Design

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

steveschoger

February 07, 2018
Tweet

More Decks by steveschoger

Other Decks in Design

Transcript

  1. The Little Details
    of UI Design
    @steveschoger

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. The Header

    View Slide

  14. Change header background color

    View Slide

  15. Too bland / no personality
    Change header background color

    View Slide

  16. #067698

    View Slide

  17. background-color: #067698;
    Change header background color

    View Slide

  18. Add a bit of color
    to your greys

    View Slide

  19. #067698
    rgb(5, 118, 152);

    View Slide

  20. HSL
    HUE
    LIGHTNESS
    SATURATION

    View Slide

  21. HSL
    HUE
    LIGHTNESS
    SATURATION
    hsl(204, 100%, 50%);

    View Slide

  22. HUE
    BRIGHTNESS
    SATURATION
    HSB

    View Slide

  23. #067698
    rgb(5, 118, 152);
    hsl(194, 92%, 31%);

    View Slide

  24. Change header background color
    background-color: hsl(194, 0%, 28%)

    View Slide

  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

    View Slide

  26. Change header background color

    View Slide

  27. background-color: hsl(194, 22%, 28%)
    Change header background color

    View Slide

  28. dribbble.com/colors

    View Slide

  29. White feels too bright
    Change search input background color

    View Slide

  30. background-color: hsl(194, 23%, 92%);
    border: none;
    Change search input background color

    View Slide

  31. Hard edge
    Use a consistent corner radius

    View Slide

  32. Use a consistent
    corner radius

    View Slide

  33. Use a consistent corner radius

    View Slide

  34. View Slide

  35. border-radius: 4px;
    Add border radius

    View Slide

  36. Too harsh
    Make search icon lighter

    View Slide

  37. fill: hsl(194, 8%, 56%);
    Make search icon lighter

    View Slide

  38. Fontawesome Fontawesome
    Update icons

    View Slide

  39. !
    "

    $ %
    & '
    (

    View Slide

  40. Use a consistent icon set

    View Slide

  41. View Slide

  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

    View Slide

  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

    View Slide

  44. Fontawesome Fontawesome
    Update icons

    View Slide

  45. Heroicons UI Heroicons UI
    Update icons

    View Slide

  46. Detach from notification icons
    Make profile picture a dropdown

    View Slide

  47. Taylor Otwell
    Settings & Privacy
    Help Center
    Language
    Posts & Activity
    Job postings
    Make profile picture a dropdown

    View Slide

  48. padding: 0 2rem;
    border-left: 2px solid
    Make profile picture a dropdown

    View Slide

  49. Make profile picture a dropdown

    View Slide

  50. View Slide

  51. Make profile picture a circle

    View Slide

  52. border-radius: 15px;
    overflow: hidden;
    Make profile picture a circle

    View Slide

  53. Evenly distribute notification icons

    View Slide

  54. justify-content: space-around;
    Evenly distribute notification icons

    View Slide

  55. background-color: hsl(194, 23%, 92%);
    Make icons a bit darker

    View Slide

  56. Make icons a bit darker

    View Slide

  57. Make icons a bit darker

    View Slide

  58. View Slide

  59. View Slide

  60. Activity Panel

    View Slide

  61. r
    Make profile picture a circle

    View Slide

  62. r
    Make profile picture a circle
    border-radius: 40px;
    overflow: hidden;

    View Slide

  63. r
    Reorganize stats

    View Slide

  64. r
    Reorganize stats

    View Slide

  65. r
    Reorganize stats

    View Slide

  66. Use font size to emphasis
    important information

    View Slide

  67. View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  71. r
    Reorganize stats

    View Slide

  72. View Slide

  73. r
    Reorganize stats
    font-size: 16px;
    font-size: 24px;
    font-size: 14px;

    View Slide

  74. r
    Reduce size of username

    View Slide

  75. Reduce size of username
    r
    font-size: 24px;

    View Slide

  76. Reduce size of “Welcome Back” text and put it on its own line
    r

    View Slide

  77. Reduce size of “Welcome Back” text and put it on its own line
    r

    View Slide

  78. Reduce width of panel
    r

    View Slide

  79. Reduce width of panel
    r

    View Slide

  80. Move right side bar up
    r

    View Slide

  81. Make secondary text lighter
    r

    View Slide

  82. Make secondary text lighter
    r

    View Slide

  83. Make secondary text lighter
    r

    View Slide

  84. Use color to create
    hierarchy

    View Slide

  85. View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  89. Make secondary text lighter
    r

    View Slide

  90. Make secondary text lighter
    r

    View Slide

  91. Zoom

    View Slide

  92. Zoom

    View Slide

  93. r

    View Slide

  94. Use consistent spacing
    r
    padding: 24px;
    padding: 24px;
    padding: 15px;
    padding: 28px;

    View Slide

  95. Use a consistent
    spacing scale

    View Slide

  96. Spacing
    12px 14px 16px 18px 20px 24px 30px 36px 48px
    Font Sizing
    12px 16px 20px 30px 48px
    6px

    View Slide

  97. Spacing
    12px 14px 16px 18px 20px 24px 30px 36px 48px
    Font Sizing
    0.375rem 0.75rem 1rem 1.25rem 1.875rem 3rem

    View Slide

  98. Spacing
    12px 14px 16px 18px 20px 24px 30px 36px 48px
    Font Sizing
    0.375rem 0.75rem 1rem 1.25rem 1.875rem 3rem

    View Slide

  99. Use consistent spacing
    r

    View Slide

  100. Use consistent spacing
    r

    View Slide

  101. Use color to draw attention

    View Slide

  102. Use color to draw
    attention

    View Slide

  103. View Slide

  104. hsl(194, 92%, 31%);

    View Slide

  105. Change panel background color

    View Slide

  106. Change panel background color

    View Slide

  107. Invert text colors

    View Slide

  108. Invert text colors
    r

    View Slide

  109. Saturate greys when
    using a colored
    background

    View Slide

  110. COVFEFE
    NORMAL
    REDUCED CONTRAST
    COVFEFE

    View Slide

  111. COVFEFE
    NORMAL
    OPACITY REDUCED 30%
    COVFEFE

    View Slide

  112. COVFEFE
    NORMAL
    OPACITY REDUCED 25%
    COVFEFE

    View Slide

  113. COVFEFE
    COVFEFE
    NORMAL
    HAND PICKED COLOR

    View Slide

  114. Saturate grey text
    r
    color: hsl(0, 0%, 80%);

    View Slide

  115. Saturate grey text
    r
    color: hsl(192, 100%, 92%);

    View Slide

  116. Make the increase values white
    r

    View Slide

  117. Make the increase values white
    r

    View Slide

  118. Make secondary text bold
    r
    font-weight: bold;

    View Slide

  119. Add subtle text shadow
    r
    text-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.20);

    View Slide

  120. View Slide

  121. View Slide

  122. Imporve promotion section
    r

    View Slide

  123. Update premium membership call-to-action text style
    r

    View Slide

  124. Increase weight and change color of the text link
    r

    View Slide

  125. Add icon to call-to-action
    r

    View Slide

  126. Offset box-shadows

    View Slide

  127. Offset box-shadow
    r
    box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.20);

    View Slide

  128. Offset box-shadow
    r
    box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.20);

    View Slide

  129. Offset box-shadow
    r
    box-shadow: 0 2 1px hsla(0, 0%, 0%, 0.08);

    View Slide

  130. Offset box-shadow

    View Slide

  131. Offset box-shadow

    View Slide

  132. The News Feed

    View Slide

  133. View Slide

  134. THe News Feed
    r

    View Slide

  135. Make profile picture a circle
    r

    View Slide

  136. Update the icons
    r

    View Slide

  137. Use consistent spacing
    r

    View Slide

  138. Change all blue links
    r

    View Slide

  139. Easy on the link styles

    View Slide

  140. View Slide

  141. Change all blue links
    r

    View Slide

  142. Change all blue links
    r

    View Slide

  143. Give text hierarchy
    r
    Primary
    Tertiary
    Secondary

    View Slide

  144. Change all blue links
    r

    View Slide

  145. Use contrast to create
    balance

    View Slide

  146. View Slide

  147. Make icons lighter
    r

    View Slide

  148. Make icons lighter
    r

    View Slide

  149. Pick an appropriate
    line height

    View Slide

  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

    View Slide

  151. Increase line-height of body
    r

    View Slide

  152. Increase line-height of body
    r
    line-height: 24px;

    View Slide

  153. Review post activity
    r

    View Slide

  154. View Slide

  155. Merge actions and stats
    r

    View Slide

  156. Merge actions and stats
    r

    View Slide

  157. Remove grey background
    r

    View Slide

  158. Fix alignment
    r

    View Slide

  159. Use alignment to clean
    up your design

    View Slide

  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.

    View Slide

  161. Fix alignment
    r

    View Slide

  162. Fix alignment
    r

    View Slide

  163. Remove top border
    r

    View Slide

  164. Merge all posts
    r

    View Slide

  165. Change all blue links

    View Slide

  166. New Post

    View Slide

  167. New Post
    r

    View Slide

  168. Update icons
    r

    View Slide

  169. Change button color
    R

    View Slide

  170. Give actions hierarchy

    View Slide

  171. View Slide

  172. View Slide

  173. View Slide

  174. View Slide

  175. View Slide

  176. Change button color
    r

    View Slide

  177. Change button color
    r

    View Slide

  178. Remove news feed title
    r

    View Slide

  179. Combine New Post and News Feed
    r

    View Slide

  180. View Slide

  181. Introduce progressive disclosure
    r

    View Slide

  182. Introduce progressive disclosure
    r

    View Slide

  183. Change input background color
    r
    background-color: hsl(300, 3%, 93%)

    View Slide

  184. Focus state
    r

    View Slide

  185. Remove “New Post” title
    r

    View Slide

  186. Remove “New Post” title
    r

    View Slide

  187. r

    View Slide

  188. View Slide

  189. Right Side Bar

    View Slide

  190. Right side bar
    r

    View Slide

  191. Make profile pictures circles
    r

    View Slide

  192. Use consistent spacing
    r

    View Slide

  193. Update text color
    r

    View Slide

  194. Update text color
    r

    View Slide

  195. Remove panel heading background color

    View Slide

  196. Remove panel heading background color
    r

    View Slide

  197. Reduce size of title
    r

    View Slide

  198. Make button a text link
    r

    View Slide

  199. Move text link to top right corner of the panel
    r

    View Slide

  200. Change buttons to icons
    r

    View Slide

  201. Consider space instead
    of borders

    View Slide

  202. View Slide

  203. Remove borders
    r

    View Slide

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

    View Slide

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

    View Slide

  206. View Slide

  207. Navigation

    View Slide

  208. Navigation
    r

    View Slide

  209. Update icons
    r

    View Slide

  210. Lighten icons
    r

    View Slide

  211. Remove borders
    r

    View Slide

  212. Reduce space
    r

    View Slide

  213. Remove container
    r

    View Slide

  214. Change background color

    View Slide

  215. Use color to create
    depth and hierarchy

    View Slide

  216. Change background color

    View Slide

  217. Change background color

    View Slide

  218. Divide navigation into groups
    \

    View Slide

  219. View Slide

  220. Give each group a title
    \

    View Slide

  221. View Slide

  222. Reduce size of titles and make them uppercase
    \

    View Slide

  223. Developer
    DEVELOPER

    View Slide

  224. Developer
    DEVELOPER

    View Slide

  225. Increase letter-spacing of titles
    \

    View Slide

  226. Increase letter-spacing of titles
    \

    View Slide

  227. View Slide

  228. Finishing touches

    View Slide

  229. View Slide

  230. HSB Color Picker

    View Slide

  231. HSL Color Picker

    View Slide

  232. View Slide

  233. View Slide

  234. Consider temperature
    when saturating greys

    View Slide

  235. View Slide

  236. View Slide

  237. View Slide

  238. Use good fonts

    View Slide

  239. View Slide

  240. View Slide

  241. View Slide

  242. View Slide

  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.

    View Slide

  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.

    View Slide

  245. View Slide

  246. View Slide

  247. View Slide

  248. View Slide

  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

    View Slide

  250. www.refactoringui.com

    View Slide

  251. Thanks!
    @steveschoger

    View Slide