A frequent problem
If you are working in or with UX design, with developers and designers within one or in multiple teams, you have probably encountered the following problem:
Designers and developers spending a remarkable amount of time looking for the standards of a simple element of a digital product, for example, such as a button. Common questions are:
- What is the exact color of the button?
- What is the text size for using the button on a desktop screen and what is the size to use it on a tablet or a mobile device?
- What are the measurements of the spaces between text and container?
Designers and developers ask each other these questions while creating their digital products, wasting time finding the style of an element or a component. They are certainly looking for standards. This can easily pile up as they look for more complex components and patterns. This can cause frustrations within the team, inconsistencies and delays in design and development. The result: a digital product that causes frustrations to the user, not to mention the cost of this time-wasting to the company or organization producing this product.
What is a Design System?
Or to put it another way: what is NOT a Design System. It is certainly not software; it is not an application that can be installed, and it is not a project with a beginning and an end. So, what is it?
Let’s describe it as the way designers and developers work together with a shared vision, clear principles and strong values. Working with a Design System brings noticeable benefits for businesses and organizations and as a result for all their users, whether they are customers, citizens or employees.
It is an ongoing or a live project that allows businesses and organizations to innovate in the way they design and build their digital products.
A Design System includes a collection of standardized reusable components and patterns guided by a clear visual language. Let’s call this visual language a style guide. Together, these components and patterns can be assembled to build any number of websites and applications.
Each element, component and pattern is designed and built once, the code matches the design, and together they represent the personality of the product brand. An optimized and consistent application or website results in clear benefits for the users such as fast learning, increased productivity and fewer errors while using it.
These are the Key elements of a Design System: