Who needs a design system and why? What is the structure of such a system? And what is it anyway?
When they hear ‘creative process’, most people think of chaos, but a successful creative process is based on a system.
With a proper and consistent design system you can save a lot of time in the design process, and it also allows you to create something new from an existing toolkit.
But what exactly is a design system? Who should use it and why? In this article I will explore all this.
What is a design system?
Here is a precise definition for you:
Design systems are evolving sets of reusable elements and principles.
They provide a common language to designers (e.g. graphic designers) and engineers, which ensures the consistency of the design process.
The two parts of a good design system are
- the set of elements
- and the set of rules.
These provide a foundation for the operation of the whole brand.
Why are design systems useful?
Processes are more easy to track if the system is documented, but not every design system is in writing.
Inexperienced designers and lone wolfs often store these structures in their brain— these are the so-called inhead design systems.
At the start there is only one designer working on the project and the design system is in their head.
But the moment other designers (or other contractors) join the project, you need a set of elements and an organising principle to support coherent design processes – especially if these people are not in the same location.
When you have complex design problems to solve involving a large number of users and designers, you truly need a design system.
With such a system you can save a lot of time, as people can work independently yet consistently and in line with the principles.
A short history of design systems
The need for design systems has emerged in recent years in the context of digital product design. However, there has been a need for such systems for a really long time. Ten Books on Architecture by Vitruvius was also meant to satisfy such needs.
You may be more familiar with Christopher Alexander, who defined patterns (reusable solutions) to make various design problems easier to solve.
Design problem + reusable solutions (patterns) = a design system anyone can use.
Later, in the 1970s and 80s corporate identity manuals were written to create easy to understand and easy to apply systems with sets of elements and instructions to make sure branding elements were used consistently.
Now that we know all this, let’s take a look at the structure of design systems.
The hierarchy of design systems
Design systems include elements such as the logo, the colour palette, typography, images and the instructions how to use them.
Various documents exist that contain some or all of these. A non-exhaustive list in order of complexity:
- Style guide
- UI Kit
- Brandguide
- Corporate identity manual
- Design system UI
- Design Language
You may notice that all the items on the list contain elements that are important for branding, but to a different extent and level of detail.
While a style guide is a less detailed summary, a design language is a comprehensive system which includes visual identity, branding, and the system and rules of digital and conventional forms.
Let’s take a closer look...
The atoms of design systems
According to Brad Frost, design systems, like the world itself, are made up of atoms. (This is the basic idea of the Atomic Design System.)
These atoms should be organised. Without order, it’s very difficult to build anything.
If you use organised elements, you may reduce the amount of work you need to do by one third.
And if you have building instructions, you can be even more effective.
With the right set of elements and instruction systems, you can have different outputs from the same set.
The 5 steps of the Atomic Design System
- You break down the elements you want to use to atoms. (These atoms may be colours, shapes, fonts, etc.)
- You can create molecules by linking the atoms. (For example a login screen consists of several design atoms.)
- By joining molecules, you can create organisms.
- From organisms you can create templates.
- Templates make up the page or content unit you wanted to create.
This mindset always supports the work of the designer, regardless of the task or the tools. Applications like Figma offer an increasing number of options to support the creation of design systems.
Examples: 4 outstanding and 1 emerging design system
We analysed some design systems before in the context of the development of UI design.
Here are 5 examples for inspiration.
1. Apple – Human Interface Guidelines
Apple Human Interface Guidelines (HIG) is a comprehensive guide to Apple’s platforms for designers and developers. The goal is to make tools widely available to improve user experience.
It includes recommendations about typography, colours and other elements.
2. Google – Material 3
Material Design is Google’s own design system. As opposed to its great competitor’s system, this one is so detailed that it is practically a free UI training course.
This is an Android-oriented design language created by Google. The main goal is to support the experience of digital content consumption and device use with natural effects.
3. IBM – Carbon Design
It stands out a bit from the rest, but it’s no surprise that an IT company also has its own design system.
Carbon Design System summarises how the brand communicates on various platforms.
4. Audi – Corporate Identity
User interfaces are becoming increasingly important in cars as well. This means that automotive companies also need design systems.
Designers will surely find Audi’s design guide an interesting and useful read.
5. Zwoelf – Zwistem
We are currently developing Zwistem, the design system of our Zwoelf brand. (It’s in the UI Kit stage.)
The aim is to organise colours, buttons, input fields and other elements to create kits and guides that allow for the quick creation of prototypes. We are also planning to sell it as an independent design system in the future.
Summary
While there are popular terms that go viral all the time, at the end of the day all that matters is if there is a real idea behind them. (And this exactly is the point of design systems.)
In more complex design processes you need to have documentation that is accessible and comprehensible for everyone.
For this you must have two things:
- a set of elements
- and the rules of application.
Once you have this, it will be much easier to create new layouts and designs within a framework.
Also, you need to know the rules if you want to break them. (Without conscious decisions, creativity is of little use.)
And one more thing...
A design system is not set in stone. It is an organic framework that keeps evolving and developing.
If you agree with what you’ve read, share the article so that others can benefit from it, too. If you have a different opinion, if you have questions contact us, or sign up!
If you want to use Brand Sprint, visit our resources page, it provides you a free PDF guide to learn it—and perhaps use it in your next project, adding value to your services, or by our book which is a step by step guide to branding 👇
How a brand turns into visual identity
Ready to elevate your design strategy? Get this must-have book in ebook or print format. Packed with practical advice, it’s your roadmap to becoming an elite designer who thinks strategically and builds unforgettable brands.