What is a design system: for whom is it needed and where is it used?

5 min readFeb 14, 2020

What is a design system

Often, this is confused with guides, UI-Kit, or brand books. But a design system is a set of values of a company, its tools, and components that facilitate the creation, testing, visual and technical updating of products, as well as maintaining the uniformity of their interfaces.

Why you needed it

It is often applied to large products that regularly update and launch new services. Banks, holdings, international corporations, government services, etc.

(But also apply to teams of 10 people.)

Why do design systems need teams that rarely have 2 designers working on one project?

With the help of a design system you can solve 3 main problems: standardize the work on projects, accelerate the design and keep the quality while working with different designers.

Standardization helps speed up design. The faster you design a project, the faster it goes into development, the faster a new project will come.

How design-systems help in the work

Benefits to the team

First, the design system saves designers time: with ready-made libraries and patterns, they create and test layouts much faster.

Second, the design system simplifies communication within the team, helps designers and developers to solve the tasks that managers set.

Benefits to consumers

First, the overall approach to UX and UI design makes the product more accessible and understandable to customers.

Secondly, the unified visual style of all projects increases the company’s awareness of the market and raises the quality bar for competitors.

To sum up!

The design system is not a guide, a UI kit and not a brand book. It is the set of components that make up a single design and web development system. The system, in turn, is based on the values and culture of the company.
The design system saves time and resources in developing, testing, or updating components. However, like any tool, the design system itself requires support and updates that will consume team resources. This should be taken into account when assessing financial benefits and risks.
Systematizing knowledge solves the problem with a ready-made library of elements and components. The ability to scale and refine typical solutions has a positive impact on the company’s profits.
The design system allows for a holistic interface and bring the brand products to a single visual language. This helps the company increase customer awareness and loyalty.

Atomic design system

System creation methodology allows you to describe each component in your design system. The concept was developed by web developer Brad Frost, who suggested using chemical terms to describe it. More about its concept can be found here: http://atomicdesign.bradfrost.com/

Atomic design system

Atoms

The smallest element of the design system. Interface atoms include font and color styles, mesh processing, and all shapes that will be used in products.

Molecules

Molecules are relatively simple groups of elements that work as one. For example, search boxes, an input bar, and a button can combine to create a search form molecule for a site.

Organisms

Or blocks. These are relatively complex UI components that consist of groups of molecules and/or atoms and/or other organisms. Organisms form separate sections of the interface.

Templates

They consist of several organisms. These are page-level objects that combine components into a layout and form the basic structure of the content design. As a result, abstract molecules and organisms are given a certain context. A template is a draft that we can show to developers, but not to the client.

Pages

Template “combed” to customer requests. Pages are specific examples of templates. They show how UI looks when combined with real content. Pages are needed to test the effectiveness of the basic design system. This is where the constant refinement of design begins and designers should not be afraid. In this case, it is necessary to reach this stage as quickly as possible.

Advantages of the design system

Standardization of design solutions. Everything is clearly described — it allows you to achieve uniformity at all levels: the same UX and sensations across all platforms. Due to the fixation of the best patterns, there is a standardization of UI — it becomes more convenient to use the application or site.
Quick introduction of a specialist in a live project. Suppose there is one big project with a UI-kit, and another — with a design system. In the first case, the designer is shown separate buttons. His job is to figure out how to combine them with other design elements. Whereas in the second case it gets a ready set of elements. It is only necessary to collect the finished page — and it is, of course, easier.
Design + layout. Each time a designer submits his work to a layout, he should describe the principles by which everything is going: indents, colors, and more. Without a clear system, something is either lost or developers misinterpret the technical task. One of the tasks of the design system is to accelerate the design + layout process. And no broken phone.
Brand awareness. In addition to corporate color, tone of voice and other things, branding can be embedded even at the same level as the button location on the site. And if you are a big player with the federal network of stores, it will be easier to maintain such a design system.
Cost reduction — development speed and cost savings. After creating a design system, new pages are made faster: the designer and the developer do not waste time on buttons that are already made. And to create typical pages will be enough of a trainee designer.