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. 2.
  2. 3.
  3. 4.
  4. 5.
  5. 6.
  6. 7.
  7. 8.
  8. 9.
  9. 10.
  10. 11.
  11. 12.
  12. 16.
  13. 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
  14. 34.
  15. 41.
  16. 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
  17. 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
  18. 47.

    Taylor Otwell Settings & Privacy Help Center Language Posts &

    Activity Job postings Make profile picture a dropdown
  19. 50.
  20. 58.
  21. 59.
  22. 67.
  23. 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
  24. 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
  25. 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
  26. 72.
  27. 85.
  28. 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.
  29. 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
  30. 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
  31. 91.
  32. 92.
  33. 93.

    r

  34. 96.

    Spacing 12px 14px 16px 18px 20px 24px 30px 36px 48px

    Font Sizing 12px 16px 20px 30px 48px 6px
  35. 97.

    Spacing 12px 14px 16px 18px 20px 24px 30px 36px 48px

    Font Sizing 0.375rem 0.75rem 1rem 1.25rem 1.875rem 3rem
  36. 98.

    Spacing 12px 14px 16px 18px 20px 24px 30px 36px 48px

    Font Sizing 0.375rem 0.75rem 1rem 1.25rem 1.875rem 3rem
  37. 103.
  38. 120.
  39. 121.
  40. 133.
  41. 140.
  42. 146.
  43. 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
  44. 154.
  45. 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.
  46. 166.
  47. 167.
  48. 171.
  49. 172.
  50. 173.
  51. 174.
  52. 175.
  53. 180.
  54. 187.

    r

  55. 188.
  56. 202.
  57. 206.
  58. 207.
  59. 219.
  60. 221.
  61. 227.
  62. 229.
  63. 232.
  64. 233.
  65. 235.
  66. 236.
  67. 237.
  68. 239.
  69. 240.
  70. 241.
  71. 242.
  72. 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.
  73. 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.
  74. 245.
  75. 246.
  76. 247.
  77. 248.
  78. 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