Design

Design System : what is it? Definition and examples

Back to the blog

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.

ContentDesign SystemBrand GuidelinesPattern 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.

exemple-ecrans-design-system (2).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.

Author

Published on the 01 February 2022

Designer UX/I