Building strong visual foundations for your design system
Download as PPTX, PDF3 likes469 views
This document discusses building strong visual foundations for a design system. It recommends establishing a grid system for spacing and alignment, choosing fonts and setting up a typography scale, defining a color palette and shades, establishing rules for shadows, icons, and other brand assets. The goal is to accelerate design and ensure visual consistency by limiting options in a considered way within the design system.
Building strong visual foundations for your design system
- 1. Tomáš Ledba Building Strong Visual Foundations for Your Design System
- 2. Who is this guy?
- 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?
- 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
- 28. Square Inset Squish Inset Stretch Inset Padding https://medium.com/eightshapes- llc/space-in-design-systems- 188bcbae0d62
- 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
- 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
- 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
- 61. Pure black
- 63. 👍 👍
- 64. Define usage for each of your colours
- 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
- 70. The “closer” is something to user, the more it will attract his attention
- 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
- 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 🏎
- 92. Follow the best ones https://designsystemsrepo.com/design-systems/
- 93. Thank you! twitter: @tomasledba behance.net/TomasLedba