Defeat decision paralysis: building a killer design system in isolation

Presentation Summary

These days everything has an app or website and users have come to expect perfection out of their UIs. With the bar so high, it can be overwhelming for those of us designing and building those experiences. Before you start building you need to choose fonts, type, spacing, and colours. What’s more, every decision you make seems to lead to even more options.

Shaun will show you how to work through these tough decisions in small isolated steps that will make this massive undertaking feel like a breeze. You’ll learn how to build your colours, typefaces, and spacing into design tokens, build a theme, and develop your components in isolation using tools like Storybook.

Talk description and abstracts

• Building UIs can give you decision paralysis. With so many choices to make it feels like you can’t get started without having everything figured out.
  • What should your colour palette be?
  • What about dark mode? High contrast mode?
  • What Font(s) are you going to use?
  • How should this look on mobile?
• Let’s look at breaking this down into smaller chunks
  • What DO you need?
  • If you aren’t using something, don’t bother defining it
    • Not using box shadow? don’t define it
  • Start with the barebones
  • Expand as you go
• Colour palette
  • What does a colour palette need?
    • Example: If I’m making a portfolio page without async actions do I need feedback colours? (green for success + red for error)
  • Creating tokens for our palette
  • Visualizing your palette
• Typography
  • What do you need? Let’s render them
    • h1 - h5
    • p
    • code
  • picking a font family
  • font sizes and Line heights
  • font-weight
• Spacing
  • Making a smooth scale from a base unit
  • Visualize that scale
• What are design tokens?
  • global tokens (blue-500)
  • aliased tokens (cta-background-color)
  • component-specific tokens (button-cta-background-color)
• Expressing your tokens as a theme
  • Building a component
  • Building a page
• Dark mode?
• Review what we’ve accomplished by working in isolation with Storybook
• Share link to example repo & helper components that let me define