Design systems improve your workflow
Last September, our design team visited the Digital Labin conference, where they also got a chance to attend an amazing workshop from Kiwi.com. William Kolmacka and Milan Seiter discussed the importance of design systems and why you should use them consistently.
Our UI/UX design team loved that workshop, so they decided it was time to introduce design systems better to our co-workers, although we’re using them in some projects already.
So, Mia Vucemilovic, during one of our weekly Learn @ Lunch presentation, was the one who presented the principles behind the design system and why they are bettering the workflow, as well as saving money (ah, yes, the golden words management and clients love to hear).
Usually, during our Thursdays Learn@Lunch, a weekly (online) get-together, someone from the team presents something new from their line of work, a solution they made for a project, or a new technology. It’s where we can not only learn something new but also understand a part of the work other team members are doing.
The main questions Mia wanted to answer during her Learn@Lunch are:
- What is a design system?
- How to create one?
- What is a design system composed of?
- How to use it?
To set us off, Mia first had several definitions ready. However, as Kolmacka and Seiter stated, there is still no 100% correct definition, and they highlighted that we should always start with the user of that system.
But, as you can see below in the definitions, several terms keep popping up, like standards, reusable, and patterns.
“A complete set of standards intended to manage design at scale using reusable components and patterns.” — NN Group
“Adaptable system of guidelines, components, and tools that support the best practices of user interface design.” — Google
“A collection of reusable components, guided by clear standards, which can be assembled together to build any number of applications.” — InVision
“A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale.” — ForumOne
The one our UX/UI design team loved is from the Design System book itself by Alla Kholmatova:
“A design system is a set of interconnected patterns and shared practices coherently organized to achieve the purpose of digital products.”
It started back in 1960s and 1970s
NATO and NASA started using reusable patterns back in the 1960s and 1970s, but in the 2000s, with web and applications becoming more and more dynamic and oriented towards user usability, design systems started to make a commercial turn.
It was clear that better systematization and organization of the product design led to a simpler development process. Yahoo made one of the first documented design systems known as Pattern Libraries, while Twitter and Bootstrap followed soon. An example of a design system as we know them today is developed by Google and called Material Design.
Even though big players have been creating them in the last decade, we can still say that design systems are something new. The good news is that more and more designers and developers realize their significance.
Also, design systems can be hidden under several names:
- Pattern library
- Modular design
- Component design
- Design language
- User interface library
Before anyone jumps to a conclusion, we want to be clear that the design system is not a brand or style guide. A style or brand guide defines graphic elements which make the visual identity of a product, and it is a part of the Design System, but not everything a Design system is.
How to create a design system?
As well as the definition, there is not one correct answer on how to start or create a Design System; it all depends on the product and the information you already have.
But it all starts with a user.
We need to know exactly who our users are, conduct interviews, understand their needs, wants, goals, and motivations, and collect all existing information about the product.
Then, with all the collected information, we define principles and values.
Values describe how a product should feel when the users use it, while principles reinforce the core values and help decisions move in a consistent direction. Actually, values are a part of the principles on which those same principles are later defined.
For example, Uber’s principles are instructive, non-intrusive, focused, and timely, which can be seen through all their solutions.
So, how to start making a design system?
Well, it depends if you’re starting from scratch or if you’re starting with existing information. But you usually never start without having at least something, so there are some elements you can use. For example, company culture, esthetics, and behavior.
The methods are similar, but here’s a design system checklist for a fresh start and a restart.
If you’re starting fresh, then:
- Start with the purpose
- Collect and group existing elements
- Define patterns and building blocks
- Agree on the guiding principles
If you’re restarting, then:
- Find out about company culture
- Identify key behaviors or esthetic qualities
- Audit existing elements
- Define patterns
What is a design system composed of?
To better understand what design systems are composed of, Brad Frost introduced an interesting approach. With his roots in chemistry, he came up with the definition of Atomic Design which states:
“Subsystems are aggregated into larger systems, which in turn form part of something larger. Just like atoms make molecules, and molecules make organisms, in the design system, one element in combination with another makes a component.”
In the design system, we differentiate patterns and practices:
- Patterns are the repeating elements we combine to create the interface of things.
- Practices are how we choose to create, capture, share, and use those patterns, mainly when working in a team.
Design systems can have various structures, but it all starts with the foundation, an existing style guide (colors, typography, border radius, spacing, icons, illustrations, and content). Reminder: Yes, a style guide is a foundation, but not everything design systems are!
Then we have patterns that are collections of UI element groupings or layouts, like dialogues, disabled states, disclosures, empty states, filtering, forms, global header…
The third part of the design system is components, like an accordion, breadcrumb, button, checkbox, content switcher, and data table. In short, they provide designers and developers with prebuilt sets of functions or components that can be added and modified in mobile and web applications.
Tokens make the changes easy
Tokens are another interesting thing that makes communication between designers and developers easier. They are a single source of information for the whole system across multiple platforms. The way they function is that we name the values instead of using hard-coded values (like hex, color, and pixel values). It saves time (and money) when you need to make big changes across the whole design. For example, if there are any design changes, we can easily do that to every element connected to that token.
Who uses the design system, and how to use it?
Everyone can use a design system – from already mentioned designers and developers to marketers, product managers, sales, and the support team. You can take a peek at several excellent examples, like Bootstrap by Twitter, Material Design by Google, or Carbon Design System by IBM, which also won the 2022 Red Dot Design Award.
You will see that every design system has its structure, and every product has its own set of principles on how it should be structured and used – so design systems make it easier for everyone to be on the same page.
It also helps with the following:
- Better communication between designers and developers
- Efficient reusability
- Testing and evolving principles
- Productivity
- Consistency
- Design and code quality
- Accessibility
And, of course, in the end, what matters the most, it improves user experience.
Mia ended her Learn@Lunch with a quote from Ross Moody, and we think that sums up why you should use design systems to make your life a bit easier:
“Think of the system as a toolbox, not an instruction manual. Design systems are about supporting others with tools and information to improve upon what has already been built.”
