As the number of devices, browsers, and ecosystems continues to grow, there is a need to create thoughtful, consistent interfaces - it’s more important than ever. That said, this isn’t a new idea. Design Systems are present for many years now, they just appear under other names, in a different form. Some examples are over 50 years old, like NASA Graphics Standards Manual System or EPA Graphic Standards System.
What is a Design System?
In a nutshell, Design Systems are collections of reusable components, guided standards, clear rules and principles, implemented in design and code. They should be accessible and serve as a single source of truth, both for internal teams and external organizations.
Now you could ask, how is that any different from a style guide or pattern library? Well, the answer is simple and it lays in the usability. Components in a Design System should live in a form accessible through the design software used by your designers and in the programming language used by your software developers. And the reason for this is that the Design System needs to be alive and fluent. It’s an organism that evolves with the product when pattern libraries and style guides are more like documentation for the ready one.
In other words, the style guide contains elements that can be very consistent among themselves, but like in the kitchen, from the same ingredients, three chefs will cook three different dishes. Accordingly, three designers with the same interface elements can create three completely different digital products. Design System is a recipe for how to use these ingredients. Describes the rules based on which elements included in style guides are created and connected together.
At this point, you should already understand that Design Systems can be much more complex. They consist of everything that makes up your product, not only its interface. It includes the technicalities like colors and fonts but also the idea behind the brand, its mission, vision, personality, even a tone of voice! MailChimp, for example, has a separate guide that focuses on the use of language and provides guidance on human empathy in the written word.
What’s in it for you? Design System Pros
- There are a lot of advantages of having a good Design System. First of all, you have a consistent product design across all the platforms your product exists in. Marketing matches the product and it's much easier to work with subcontractors. There is less friction adaptation for new users, your brand awareness is much better.
- You have a clean codebase and easy to manage design assets, which you can use in developing new features and testing new solutions. Designers and software developers don’t waste time on repetitive work and combined with the agile process, you can perform rapid prototyping and test your ideas with your users much cheaper than you would have to without the System.
- It helps with onboarding for newcomers. Instead of training them, just give them access to your System, which will serve as a source of knowledge and help them quickly enter the product ecosystem.
- Design Systems are also great with helping to achieve higher accessibility standards, which in recent years have become more and more important and well-received. So: if you use a typographic system designed for legibility; if you use a color palette that promotes high contrast; if you design each component with accessibility in mind, then even when the product grows, if it's developed with the initial assumptions in mind - you’ll be fine.
Are there any drawbacks? Actually only one. It’s not a cheap investment. If you are creating a new product, it will add a significant percentage to your cost of design work. If you already own a product and you want to create a Design System for it, you will need to spend quite some time and resources to build a System and apply it to work for all your teams, both design and development.
But before you start to fear for your budget, know that Design Systems aren’t for everybody.
Do you need a Design System?
Good news, probably not! But if you read everything above and you feel this is something for you, then you are presumably someone working or owning quite a big company slash startup, your product is designed and developed by couple teams and exists on multiple platforms, including web, iOS, and Android.
Design Systems become most useful as you scale up your company. When you need to grow, try new functionalities, test with your users, maintain consistency. If you say “yes” on all of this, I guarantee, no matter the initial cost of creating a Design System, it will save you lots of money in the road ahead.