Defeat Decision Paralysis: Building a Killer Design System in Isolation

Rate this content
Bookmark

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.

This talk has been presented at React Summit US 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

Decision paralysis refers to the overwhelming feeling and inability to make decisions when faced with the numerous choices and complexity involved in building design systems, leading to a halt or significant delay in progress.

To overcome decision paralysis, start by simplifying decisions; don't define elements you don't need immediately, such as loading states or elevation scales if not required. Focus on essential elements and use tools that provide pre-defined components to help guide initial decisions.

Design tokens are a method of expressing design decisions as data, using a name and value pair. These tokens can help maintain consistency across a design system by standardizing visual and stylistic elements like colors, typography, and spacing.

When building a design system, start with basic elements such as a primary and secondary color palette, a typography scale, and a spacing scale. These foundational elements provide a starting point for expanding the system as needed.

Choose colors by selecting a primary and secondary palette, possibly using accessible scales from existing tools like Tailwind CSS. For typography, start with essential font sizes and styles, and adjust based on your specific needs and branding.

Using existing tools and components, like Tailwind CSS for color and spacing scales, helps avoid reinventing the wheel, speeds up the development process, and ensures accessibility and consistency across the design system.

Storybook is a tool that allows developers to build and test UI components in isolation. It provides a sandbox environment to experiment with different styles and states of components, making it easier to see how changes affect the system without impacting the main codebase.

Shaun Evening
Shaun Evening
12 min
15 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Defeating decision paralysis when building design systems by letting tools make some decisions. Using design tokens to express design decisions as data, including colors and typography. Alias colors to give them more specific names and define typography with a type scale. Use existing spacing scales and build components in isolation to test different states. Start with the basics, use existing tools, and have fun with it.

1. Defeating Decision Paralysis in Design Systems

Short description:

Hey, friends! My name is Sean Evening. I'm here to talk to you today about defeating decision paralysis when building design systems. Stop making so many decisions at the start. Let some tools make some decisions for you. There's no need to reinvent the wheel. We've got Tailwind CSS, Redux UI, and Shadcn to help you get started. So, what are some basics then? We're gonna need a few colors.

Hey, friends! My name is Sean Evening. My pronouns are he, him, and I'm based in Hamilton, Ontario, Canada. I'm here to talk to you today about defeating decision paralysis when building design systems. So, let's dig in.

With all that a design system can be, it's really hard to know where to start. What should my color pallet be? How do I make this work for dark mode? Should I have a high contrast mode? What kind of fonts should I use? How is this going to look on mobile? Are there languages like French and German going to break my layouts? How am I going to test all of this? And pretty soon, if you're anything like me, you are ready to scrap the whole thing and go cry in a corner. But don't worry, I have some tips for you.

First and foremost, stop making so many decisions at the start. Good examples of this would be if you're not going to have async actions, don't define loading, success, or failure states. You wouldn't even need to describe success and error colors that way. If you're not going to use box shadow, don't define an elevation scale. Simply put, if you don't need it, forget about it. You can always come back to it later. And remember, no decision is permanent. Unlike this jQuery hand tattoo. If you aren't satisfied, you can change these things later. Unless it truly matters, don't let a decision or a lack of one be a blocker for you moving forward to the next thing.

My next piece of advice is going to be let some tools make some decisions for you. At least to start. There's no need to reinvent the wheel. There's lots of great tools out there to help you get started. And there are no wrong answers. Which is perhaps part of the problem. We've got Tailwind CSS has great color, font and spacing scales. You could use Redux UI. They have great unstyled accessible components. And Shadcn actually puts those two together to give you some really beautiful styled components to get you started that are very customizable. They pretty much just copy and paste component code into your code base for you. It's really, really cool.

So, what are some basics then? To start off, we're gonna need a few colors.

2. Design Tokens and Color Scales

Short description:

I'm talking gray scale and a primary and secondary. Your typography scale. A spacing scale. And anything else that's critical for your use case. For example, if you're making a weather app, you might need to create a temperature color scale. But if you're not making a temperature app or a weather app, don't worry about anything to do with temperatures. Let's talk about design tokens. Design tokens are a way of expressing design decisions as data. They consist of a name and value pair, with the option to use aliases for different contexts. For colors, we can choose from existing accessible scales like Tailwind and pick a gray scale. We can also select primary and secondary colors. It's important to remember that we don't have to use the entire color scale if it's not necessary.

I'm talking gray scale and a primary and secondary. Your typography scale. A spacing scale. And anything else that's critical for your use case. For example, if you're making a weather app, you might need to create a temperature color scale. But if you're not making a temperature app or a weather app, don't worry about anything to do with temperatures.

But before we go any further, I just want to cover the topic of design tokens. Now, design tokens are a way of expressing design decisions as data. At a bare minimum, a design token is a name and value pair that can express that. So, we've got our name, which is like a global reference to the value. We've got the value itself, the raw value. And you can also have aliases that reference those tokens with a more self-descriptive name for a particular context. And we'll get into that soon.

For example, here are a few examples from Tailwind in Sky Blue color scale. We've got sky 50, which has a value of F0F9FF. But we could alias that as primary accent. And Sky 500 here has a value of 0EA5E9, but we're might want to alias that as primary base. Now, while we're on the topic, let's talk about colors. First and foremost, let's think about what we need. We can use already existing accessible scales, again, like tailwind. We want to pick a gray scale. Now, turns out, there are several different grayscales you could use, with different tints of blue or red or whatnot. Let's use one. And then we're going to pick our primary and secondary color. Here's an example of how I've put this together in Storybook. I'm using three scales from Tailwind. I've got their gray, which is more neutral. I have the pink scale and the sky scale. Now, having 50 to 950 is quite a lot. And you might be thinking, what are we going to do with all these colors? Well, just because we have been given a full scale doesn't mean to say we need to use the whole thing.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

The Whimsical Potential of JavaScript Frameworks
React Summit US 2023React Summit US 2023
28 min
The Whimsical Potential of JavaScript Frameworks
Top Content
Watch video: The Whimsical Potential of JavaScript Frameworks
The speaker discusses the whimsical and detailed work of Stripe, particularly their interactive and dynamic pages. They explain the use of React for building whimsical details and tracking mouse position. The speaker introduces React Spring for smooth animation and React3 Fiber for creating a 3D egg model. They also mention the use of Framer Motion and React server components for animating CSS properties.
AI + UX: Product Design for Intelligent Experiences
C3 Dev Festival 2024C3 Dev Festival 2024
28 min
AI + UX: Product Design for Intelligent Experiences
AI design challenges include bias, safety, and security. Trust and transparency are important in AI. Design principles for AI include user control, fighting bias, and promoting good decision-making. AI can enable the design process and investors expect to see it included in products. AI empowers individuals to create and share ideas, but managing expectations is crucial.
Domain Driven Design with Vue Applications
Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Top Content
Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.
Proven Pinia Patterns
Vue.js London 2023Vue.js London 2023
20 min
Proven Pinia Patterns
Top Content
Pinnia is a lighter, more modular state management solution for Vue apps, offering consistent patterns, TypeScript support, and an intuitive developer experience. PINIA encourages splitting state into manageable domains, improving code splitting, type inferences, team collaboration, and debugging clarity. Pinia provides flexibility in accessing and mutating state, with different approaches for option and setup stores. It also offers features like patch, reset, and onAction methods. Vue Mastery offers comprehensive Pinnia courses and resources for fast learning.
Component Design Patterns
Vue.js London 2023Vue.js London 2023
18 min
Component Design Patterns
The Talk covers clean components and when to create new components, as well as patterns for writing cleaner components and the benefits of VIP patterns. Refactoring and separating code into separate components can make it shorter and easier to read, reducing complexity. The importance of not repeating oneself and the benefits of using smaller components for performance and developer experience are discussed. Composables can help extract logic in large and complex components, and patterns can be incorporated into component libraries and design systems.
Design-Driven Full-stack: an End-to-End Dev Workflow that Scales
React Summit 2022React Summit 2022
32 min
Design-Driven Full-stack: an End-to-End Dev Workflow that Scales
This Talk discusses the challenges of building full stack applications and introduces Redwood.js as a solution. It emphasizes the importance of design-driven workflows and the use of Redwood Cells to handle state and simplify complex tasks. The Talk also highlights the seamless integration between the front end and back end using mock data and the optimization of workflow for performant teams. It concludes with a mention of Redwood's authentication features and the importance of community and collaboration.