Slides by Tomáš Ledba (Socialbakers) - Design Systems Meetup June 2019

1. Tomáš Ledba
Building Strong Visual Foundations
for Your Design System

2. Who is this guy?

3. UI/UX Designer

4. UI/UX Designer
graphic designer doing fancy wireframes

6. Look & Feel & Usability

7. Responsive Strategy
Style guides & Component Library
Mockups & Layouts
Dev-Design Handoffs
Navigation Structure

8. Wireframes
A/B Tests
Web Analytics
HeatmapsResponsive Strategy
Style guides & Component Library
Mockups & Layouts
Dev-Design Handoffs
Navigation Structure

10. Let’s start!

11. Wait! I am an artist. Why should I care
about some design system?
Less Decisions – Faster Designing – Focus on What Matters
Visual Consistency
Evolution Instead of Revolution(s)
👍
👍
👍

12. Design System Does Not Limit Creativity,
it Accelerates it 🏎🏎 🏎🏎 🏎🏎

13. What are we going to talk about?

14. Spacing
Typography
Colours
Shadows
Icons
Brand Assets

15. Spacing & Sizing

16. Average laptop resolution means
1 296 600 options where to
place your pixel

17. “As the number of choices increase, it
becomes exponentially difficult to make
a decision.”
Hick’s law

18. Limit your options by placing
square grid on your art board

19. Follow best practices and use
8px grid to stay safe

20. font-size: 13px
line-height: 16px
Possible grid numbers:
👉 4px
👉 8px
👉 16px
😎 and have a good feeling from text bounding boxes perfectly aligned inside of your grid
font-size: 13px
line-height: 18px
font-size: 13px
line-height: 20px
Possible grid numbers:
👉 6px
Possible grid numbers:
👉 4px
Or use your body text line-height

21. Always choose even grid number
https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632

22. 2px 24px
too many options too restrictive
And avoid too small / too big numbers

23. Use grid to set up spacing system

24. 👍👎
https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62
There is a big difference between 4 and 8 pixels, but you
don’t want to decide between 60, 64 and 68 pixels
Apply geometric progression

25. Use your spacing system across
design consistently

26. Vertical spacing
Stack
https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

27. Inline
Horizontal spacing
https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

28. Square Inset
Squish Inset
Stretch Inset
Padding
https://medium.com/eightshapes-
llc/space-in-design-systems-
188bcbae0d62

29. https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
https://builttoadapt.io/8-point-grid-borders-and-layouts-e91eb97f5091
Height of buttons, Inputs, etc.

30. Grid margins and gutters
https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins

31. Go further and set up global rules…

32. https://blog.prototypr.io/10-practical-steps-to-create-a-predictable-accessible-and-harmonious-
typography-system-a-case-6c85d901bedd
… but precisely test all
possible combinations

33. 💡
Global rules make sense for more complex UI, but they can be
useless or restricting for something like landing pages

34. Speed up your workflow

35. Auto Layout for stacking & paddings
https://www.animaapp.com

36. nudg.it for adjusting nudge with your grid
http://nudg.it

37. https://medium.com/sketch-app-sources/8-point-soft-grids-in-sketch-e8f1d5ca2cd4
Sketch objects / styles for “white” space

38. Typography

39. Choose the right font

40. Typography creates personality
Technicist Traditional Playful

41. Keep in mind some fonts were
designed for headlines
Designed for headline 👉
Designed for smaller sizes 👉
https://refactoringui.com/book/

42. 💡 Use website like fontpair.co for best combinations
fontpair.co
Don’t be afraid to combine
two fonts

43. Set up typography scale

44. And use non-linear scale again 🏎

45. Modular scale generators look cool,
but can be tricky
“I need something between this
and this”
https://type-scale.com

46. Medium Type RatioHigh Type Ratio Low Type Ratio
https://medium.com/sketch-app-sources/exploring-responsive-type-scales-cf1da541be54
Marketing Site Blog / Info Site Product Site
When using modular scale, choose
the one based on your project

47. Always adjust
typography for
mobile devices
👍👎
https://typecast.com/blog/a-more-modern-scale-for-web-typography

48. And update each style individually

49. https://twitter.com/i/moments/994601867987619840
Don’t forget the line-height
The bigger the font-size is, the smaller line-height
you need (and opposite)

50. Separate visual hierarchy
from semantic
h1
h2

51. https://uxmovement.com/content/how-letterspacing-can-make-all-caps-easier-to-read/
Use bigger letter-spacing for ALL-CAPS
And try smaller letter-spacing for headlines

52. https://twitter.com/i/moments/994601867987619840
Font size is not everything, use colour
and bold style for visual prioritisation

53. Colours

54. Define basic colours

55. Primary (brand) Colours
https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3
Neutral
Secondary (functional or UI) Colours

56. Find shades for your colours

57. Start with edges
https://dribbble.com/shots/1737347-Mail-App-UI-Labels

58. https://material.io/design/color/#tools-for-picking-colors
And continue by
filling the gaps
Find at least 5 shades for
each of your colour and 10
shades of your greys

59. Greys does not have to be neutral
https://twitter.com/i/moments/994601867987619840

60. What about
pure black?

61. Pure black

62. https://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/

63. 👍 👍

64. Define usage for each of your colours

65. https://design.firefox.com/photon/visuals/color.html

66. Don’t rely on colours itself
https://twitter.com/i/moments/994601867987619840

67. Shadows

68. Think about shadows as a tool for
creating depth

69. https://material.io

70. The “closer” is something to user, the more it will
attract his attention

71. Hovers
https://dribbble.
com/shots/500
8343-Liquid-
Hover-Card-
Animations

72. https://dribbble.com/shots/2375074-Dropdown-select-boxes
Drop-downs

73. https://dribbble.com/shots/3040883-Knight-modal
Modal & Overlays

74. Drag-drop, etc.

75. Set up depth system
https://www.smashingmagazine.com/2017/02/shadows-blur-effects-user-interface-design/

76. Border-radius

77. Radius together with typography and colours
creates personality of UI
https://supplyui.com

78. Icons

79. Choose one style and stick with it

80. https://blog.iconfinder.com/better-icon-design-in-6-easy-steps-68a7c8fa0889
Use consistent stroke

81. Align strokes to pixel grid
https://spec.fm/specifics/8-pt-grid
In the end, every object of your UI will be displayed as a bunch of pixel (even vector ones)
https://blog.ginetta.net/i-set-out-to-create-pixel-perfect-
icons-heres-what-i-discovered-along-the-way-
4e46378932df

82. Always use bounding box with a safe zone
https://www.smashingmagazine.com/2016/0
5/easy-steps-to-better-logo-design/
https://blog.ginetta.net/i-set-out-to-create-
pixel-perfect-icons-heres-what-i-
discovered-along-the-way-4e46378932df

83. Consider using grid when drawing icons
https://material.io/design/iconography/#grid-keyline-shapes

84. Use icons in intended size
https://refactoringui.com/book/

85. If you need the same icon in more sizes, create more versions of the
same icon or place icon into some space around
https://twitter.com/i/moments/994601867987619840

86. Brand Assets

87. Put together everything what
makes your brand unique
Patterns & Shapes
https://dribbble.com/shots/6158573-
Pattern/attachments

88. Put together everything what
makes your brand unique
Illustrations
https://dribbble.com/shots/6
506019-Grow-
Up/attachments

89. Put together everything what
makes your brand unique
Photos
https://dribbble.com/shots/61
96304-About-
Page/attachments

90. That’s all for today 🏎

91. Keep Studying
http://bit.ly/keep-studying

92. Follow the best ones
https://designsystemsrepo.com/design-systems/

93. Thank you!
twitter: @tomasledba behance.net/TomasLedba