To teach you about design systems, we’ll use examples from organisations like:
Finally, we’ll dive into the unique atomic take on the traditional design system that we prefer at NerdCow.
Crudely speaking, a design system is a set of rules for digital content creation.
But what kind of rules are they? Who makes these rules?
First, to avoid unnecessary exits to Wikipedia here is the full definition of a design system:
A design system is a set of standards widely accepted by an organisation to efficiently manage design at a scale while creating a shared language and visual consistency across different pages and channels
In other words, it makes everyone understand what things should look like and sound like when produced by and for your organisation.
What are the traps?
It seems to be a tendency to betray the design system when faced with time pressure or what looks like a one-off project. We saw a couple of companies fall for it, so it’s only fair I warn you. It’s not a wise longterm strategy. It’s incredibly inefficient, considering that a design system requires tending to.
Creating and maintaining a design system requires a dedication. The design system constantly evolves, just like your business. Additionally, you need to train people how to use it. Taking shortcuts with your design system wastes all that effort.
There are two essential parts to a design system:
The design system goes beyond the scope of aesthetics. In the examples at the end of this article, you will see sections such as the brand foundations, product guidelines, and marketing guidelines. You might not have a need or resources to build these up at once. It takes time, so don’t be too hard on yourself. Baby steps, remember!
Usually, we divide the design repository into three categories:
While these categories are intertwined, I would pick the component libraries as a starting point.
Primarily for the reason of getting things done in the shortest time possible. Once you build individual components, you can put them to good use and accelerate your business growth.
A tool is only as good as the hands that wield it. It takes time, effort and purpose to continually maintain a design system and to make sure it doesn’t become outdated. From my experience, you need at least one designer and one developer to write guidelines, create visual examples and provide code snippets.
You could have assumed by now that design systems are the domain of rather larger organisations. Perhaps you are right. They truly shine when applied to more complex scenarios.
However, I am of an opinion that we can cherry-pick useful parts, and thus keep their scope to the minimum. That alone significantly reduces the required resources to manage them.
Take websites as an example. They are rather straightforward tools in comparison to the capabilities of the modern software engineering
world. In fact, it’s not uncommon to classify them as marketing tools rather than software applications.
For these reasons, we simplified the typical design system by taking out sections that we don’t need and introducing a new naming
If you remember the contents of a typical design system you will remember the components and patterns, and their meaning. We took a more scientific approach and replaced both terms with the following categories:
We take it even further and glue organisms together to build interface templates such as page headers or navigations for different screen sizes.
The last reason why we do this is to fit the designing process into the agile development approach. You can only be agile if everyone in the company follows the method. We call it “agile web design” 😎.
Originally published Jan 27, 2024 2:59:33 PM, updated January 27 2024.