What is a design system and how it can help us?

A little bit of history#

The basics of systematization of design appeared together with the development of the “Swiss style” thanks to Jan Tschichold. In 1927, Tschichold wrote his famous book “New Typography”. This book introduced the key concepts of simplicity, conciseness, ease of perception, and clearly defined boundaries of the permissible use of individual elements in graphic design, including modular grids.

In the 1950s, the term “design system” appeared and meant visual brand identity. At that time, it was not about digital products, but only about physical ones. A classic example is a detailed instruction for the New York Subway, where all details of creating graphics, navigation principles, colors, etc. are thoroughly explained.

In the 1960s, computer technologies began to significantly outpace the speed of software development. Computers became more powerful, but the development process was still slow, difficult to maintain, and with a lot of bugs. This stage was called the “Software Crisis”. For the first time, this term was introduced in 1968 at the NATO Software Development Conference.

At the same conference, Douglas McIlroy made a presentation on the component approach in software development. The component approach has reduced costs and increased the speed of development — this made it possible to use the power of modern computers more efficiently.

Half a century later, we are faced with a similar situation. The dynamics of the market and the features of the digital environment forced us to take a fresh look at the issue of consistency and scalability of solutions.

The previously existing guidelines did not meet the new requirements. They assumed the passage of any design solution according to the process: “guideline → design → develop → implementation”. In this approach, details are lost at each step of the chain and bugs appear.

But if you combine guidelines, development, and implementation, you can get rid of many problems with the implementation, improvement, and support of products. This is how a modern tool appeared at the intersection of design and technology — a design system.

What is a design system?#

A design system is a set of brand values, tools, and components (both in design and in code) that simplifies the creation, testing, visual and technical updating of products, as well as ensures the uniformity of their interfaces.

The design system should include the following elements:

• Brand values — the philosophy and set of principles based on which we make decisions and build a product;
• Visual language — colors, typography, shapes, sizes, margins, imagery, animations and movements, etc.;
• Tools — guidelines, UX patterns, research results, templates, manuals, rules, recommendations, etc.;
• Components — parts of reusable code in your system, the so-called building blocks.

Why do we need a design system?#

A single source of truth#

Without a design system, the design process and user experience deteriorate. Designers approach solving problems not systematically, but each in their own way. A single source of truth helps to achieve consistency within teams — a place where you can get acquainted with all relevant components, styles, templates, patterns and read the documentation for them.

Documentation is one of the key components of a design system. It allows you to minimize the risk of loss of knowledge due to the loss of a team member.

Speed and quality#

Design systems help teams to increase the speed of work, maintain uniformity and improve the quality of products in the long term. Developers do not need to make up everything from scratch — you can assemble the screen from components, like LEGO bricks, and reduce efforts from hundreds of lines of code to a few characters.

A design system created by a strong team minimizes risks — its presence allows you to attract specialists of any level to the team and not be afraid that they will spoil the product.

And a design system also allows you to create an infinite number of prototypes for experiments, helping your team to get insights faster.

Efficiency#

It’s no secret that design systems increase team productivity. Product teams use design tokens and components that are already in the design system. This allows designers to focus on more important things rather than how a particular button should look.

For developers, the layout process is greatly simplified — most of the interface is built on existing components. With a design system, developers can focus on business logic and those rare cases when a custom user interface is required.

The development of new functions and scenarios for A/B testing becomes fast and cheap. This helps the team to get insights and data about real users faster — the correctness of design decisions is confirmed by quantitative data.

Conclusion#

Not everyone needs a design system. For some companies, it will bring more problems than benefits. And for others, it will become an indispensable working tool.

It is important to remember that the development of a design system is an internal product of the company, which will not bring profit immediately. But in the long run, a design system will help to increase the speed of work, the productivity of the team and improve the quality of products.