Building a Design System → Part I: The smallest version of a design system
Despite the fact that design systems are pretty awesome, I recently found myself in a situation where a design system was not the best choice, so I’d like to write an article for designers who are in the process of building a design system for digital experiences like websites or apps. This article would cover anything from the smallest version of a design system to the largest version, which is subjective since a design system can go infinity. Let’s get started with the smallest version of a design system and some experiences which need to be shared.
Be aware! A Design system creates additional costs
A design system encourages you to devote more time to your project before it is completed. If you are a small company with a limited budget, a design system can be more of a financial and time disaster than a win for the project.
Define the purpose of your design system
It doesn’t matter if you already started with your design system or if your planning to have one. The first thing you need to do is to identify the purpose of your design system! This is not only important for the person or company which is paying for it. It’s important for the designers to know why they doing this and how they will benefit from it.
It is easier to define the purpose of your design system by knowing the crucial benefits of a design system:
- Consistency: A Design System that is used drives consistency between features or products in the same organization.
- Speed: A Design System provides reusable elements and guidelines to accelerate the design and development process.
- Speed results in gaining time for others things: As building products getting quicker, designers gain time they can spend on more user research and user experience design.
Design system purpose example
The following purpose works well for an organization that has more than one product team. Team autonomy is key, the design system helps to align within the design teams with a minimum of meeting for team alignment.
“The purpose of our design system is to drive high consistency in Look and feel between our variety of products to help constantly prove a user’s assumptions about the user interface right, creating a sense of control, familiarity, and reliability.”
If your designers are dissatisfied by wasting so much time building screens and pushing pixels instead of finding great ideas or doing research that can lead to these great ideas, another aim may be the following:
“The purpose of our design system is to improve long-term efficiency to have more time to create better products with more testing and user experience.”
Design Principles, the design system’s smallest piece.
Design principles are widely applicable laws, guidelines, biases, and design considerations that designers apply with discretion.
In a small team, good design principles can drive as much consistency as a design system but don’t provide as much speed as a design system with a subsection of reusable graphical components. That’s why it’s one of the first things to hold in mind when creating a design system. It is important to make the principles visible and easy to find for all those involved in the design process of your products. A significant amount of essential consistency will be driven by design principles as long as any part of the team has them in mind. This creates automatically a shared language within the team and a set of criteria to use while designing together.
The success of the design principles can be demonstrated by the design principles of Dieter Rams who was a designer who created great products for many years:
Design principles examples
“Our users are using our product on the run and need to get information fast, that’s because our design gives the user the possibility to reach desired information within 3 clicks.”
“Our user group includes a wide range of people with different visual problems, that’s because our design uses colors only in connection with icons or illustrations to drive a better understanding of content.”
“Our design gets translated into 10 different languages, that’s why we need to use easy to translate and understand descriptions and terminologies.”
Steal with pride to ensure consistency
Stealing with pride is nothing special, but it is very powerful. Don’t be afraid to steal brilliant ideas from your college. Stealing is a very quick and effective way to drive consistency between teams.
Create a environment in which you reuse fantastic ideas and components from each other.
Modern design software, such as Figma, make this practice very simple as long as all files are shared among teams and designers. So, start stealing with pride!
Conclusion
With design principles and “steal with pride,” it’s reasonable to create a good product for a first release. But, for the continuous development of the design system, the definition of the design system's purpose creates a sense of why this effort is necessary, even if this effort does not appear to be directly contributing to the product’s goals (vision).
What's next ..?
In my following article, “Building a Design System → Part II” I will discuss how to continue the process of building a design system and include some guidance and methods for doing so in an organized manner.
Thank you for taking the time to read! Please clap and subscribe if you enjoyed it. It would mean a lot to me and encourage me to write more stories like this.
I would appreciate it if you would leave a comment to share your thoughts and experiences with the community and me.
You can support me by becoming a member of Medium by clicking my referral link: https://medium.com/membership/@florianwachter
or buy me a Coffee ☕ 👉 https://www.buymeacoffee.com/flowr
You can learn more about Design Systems here:
