Design System : what is it? Definition and examples
As digital becomes an everyday thing, Design System has been implicitly part of the digital landscape of large companies like Apple, Google, AirBnB or Uber for several years. This set of elements and rules can be noticed by similar looking buttons, common colors or user experience recommendations. But why is it so useful to have a Design System?
Consistency, speed and communication
The Design System is a library containing all the components and styles for designing digital projects. In addition, it contains the rules of use, the identity and the vision of the brand.
This tool saves a lot of time on all levels: project managers can communicate their intentions more easily to designers; designers innovate on the basis of homogeneous elements by following recommendations; and developers have already coded components at their disposal, making it easier to integrate or develop certain parts of a project.
Less abstract, the famous LEGO bricks are an excellent example of Design System. They follow rules, but allow you to combine them hundreds, thousands, or even millions of times while maintaining the brand identity. Did you know that you could make over 915 million combinations with six two-by-six bricks?
Design System vs Brand Guidelines
Brand Guidelines are essential for any type of business. If your identity is clear, your customers will remember you better and will be able to describe you more easily. However, today, a user experience is much more important than a nice image, and that often starts with a digital medium like a website or an app. A Brand Guidelines will not cover these aspects enough.
This is where a Design System comes in. It allows you to develop company-specific recommendations for new digital media. In addition, this material is often available online, allowing it to be shared with various teams in different locations.
A lighter alternative to the Design System exists; the Pattern Library where only reusable components are found, especially for designers. Often internal, it is used to save time in the same project with a few essential rules.
| Content | Design System | Brand Guidelines | Pattern Library |
|---|---|---|---|
| Brand Vision | ✅ | ✅ | |
| Brand Tone | ✅ | ✅ | |
| Guiding Principles | ✅ | ✅ | |
| Values | ✅ | ✅ | |
| Writing recommendations | ✅ | ✅ | |
| Terminologies | ✅ | ✅ | |
| Interactions & UX recommendations | ✅ | ||
| Logos for print with variations | ✅ | ✅ | |
| Logos for screens with variations | ✅ | ||
| Accessibility | ✅ | ||
| Notifications | ✅ | ||
| Brand Colors | ✅ | ✅ | ✅ |
| Interface colors | ✅ | ✅ | |
| Layout & Templates | ✅ | ✅ | |
| Fonts | ✅ | ✅ | ✅ |
| Text Sizes | ✅ | ✅ | ✅ |
| Adaptive text sizes | ✅ | ✅ | |
| Typographic relationships | ✅ | ✅ | |
| Iconography | ✅ | ✅ | ✅ |
| UI Components | ✅ | ✅ | |
| Illustrations, photos, videos | ✅ | ✅ | |
| Tools | ✅ | ✅ | |
| Technologies | ✅ | ||
| Source code | ✅ |
Use cases
It's not just about websites or apps, the Design System can also cover any type of interface and, very often, any experience such as a tool that scans your items at the supermarket, TV overlays, animated banners or social media posts.
Evolution and adaptation
A design system requires maintenance. Whether it's to keep up with current trends, new technology recommendations or to add new components, it's important for designers and developers to be able to update it easily. Once the database is created, it only takes a few days per month to act on new developments.
.png)
As mobile, web and website designers, we use and develop more and more Design System or Pattern Library, with varying complexity depending on the size of the project. This allows us to gain in speed and homogeneity during the creation or evolution of your products.
