Design system. Definition of a concept



In the Russian design community, an opinion has been formed and is increasingly being encountered that the hype that has arisen in recent years around design systems is nothing more than a bubble inflated around a long-standing topic, and the authors involved in this matter speculate on old concepts.

One of the most common misconceptions is an overly narrow understanding of the term “design system”, when it is taken for any one of the constituent elements, for example, a visual language or design templates.


www.facebook.com/nikita.melnikov/posts/1809068045779433
Regularly in my speeches I touch upon the definition of concepts and talk about what is really understood as a design system in our time.

However, disputes continue, which means that the point has not yet been set.

I am seriously worried that this uncertainty can negatively affect our industry, it simply slows down us, so I take the liberty of trying in this article to clearly define what a modern design system is, why it exists in such a way and what perhaps more important than how it differs from the static guidelines of the past. For convenience, part of the note will be framed in the format of answers to frequently asked questions.



Where do the legs grow from


The ability to transfer experience and knowledge was one of the impetus for the development of mankind, however, a formalized system for this did not exist for a very long time. Everything happened quite spontaneously, literally word of mouth.

The centers of knowledge were, as a rule, libraries and places of worship, where not only information was stored, but also training took place.


bit.ly/dsdefinition-img-1
A great example of a true reform in the systematization of knowledge is the invention of the musical notation system by Guido Aretinsky in the Middle Ages, which later evolved into what we use now. She allowed to significantly simplify the process of training singers, and reduce it from 10 years to 2!



A huge impetus to the development of the transfer of experience, of course, gave the invention of printing. Even the printing process itself can be considered a good example, because he demanded very strict adherence to the principles.


bit.ly/dsdefinition-img-3
The more complex and multifaceted the system, the more significant the accuracy of the transfer of experience. Therefore, a huge technological breakthrough of the 20th century required to improve the way we formalize knowledge and control the result.

In the mid-1950s, with the active growth of commercial graphic design for corporations, the concept of visual brand identity emerged (the word “design system” appears at about the same time).

A classic (and closest to our topic) example is an exceptionally detailed instruction for the New York subway, which thoroughly explains all the details of creating graphics, principles of navigation, etc.


bit.ly/dsdefinition-img-5
With such documents of varying degrees of detail, designers had to work (to this day), doing something for companies offline. Perhaps this is the reason for the fact that very often visual design guidelines and corporate identity guides are understood as a design system as a whole.



In order not to drag out the story, I’ll immediately turn to the last decade, when the absolutely incredible growth and development of technological startups took place.

Unprecedented market dynamics and features of the digital environment required a new look at the issue of consistency and scalability of solutions. For new companies, this has become one of the key factors for successful growth.

Unfortunately, previously existing guidelines could not meet the new requirements, because they were a static artifact and assumed the passage of any design solution through the chain: “guideline → layout → layout → implementation”. Yura Vetrov in one of the articles The “UX strategy” cycle indicated what problems it was causing: at each stage of the chain, parts are lost and bugs are generated, it becomes extremely difficult to 100% implement the plan ... Only by transferring the reference design from static documentation to the implementation level, you can shorten the chain to “ Guideline = Design = Layout → Implementation ”, which means getting rid of a bunch of hemorrhoids for implementing, improving and supporting products.

So, technology companies needed an appropriate solution at the intersection of design and technology.

An ideal example of such a solution would be the Bootrstap library, which allowed young startups to quickly build landing pages with adaptability and a simple library of components out of the box - that's what you need!



However, this was only the technical part. Necessary, but not enough to be called a "design system."



The last milestone on the way to design systems in their modern sense I want to highlight the emergence of the Atomic Design methodology .


bit.ly/dsdefinition-img-4
There is a concept of modular design when we consider our process in the context of abstract layers, levels. This facilitates the perception of an integrated design process and splits it into understandable components.

Atomic design, of course, was not the first and personally I can not call myself a supporter of the Brad Frost paradigm, because he chose rather specific metaphors for describing layers, however, it cannot be denied that this particular methodology became the most famous example, which generally popularized the direction.



As promised at the very beginning, the part devoted to the definition of the concept of a design system, for the convenience of perception, will be submitted in the format of questions and answers.

Questions and answers


What is a design system in a nutshell?


As a comprehensive definition, I would suggest the following:

Дизайн-система — это целостный визуальный язык и его техническое отражение в виде библиотеки компонентов на едином репозитории, а также сопутствующих дизайнерских шаблонов.



What does a real design system consist of?


To be called such, a design system must include four necessary elements:

  1. Visual language
  2. Component Library in Code
  3. Design Tool Templates
  4. Design system team



What is a visual language?




Visual language is a paradigm that defines how we create product interfaces, the basis-basis.

Holistic visual language includes:

  • philosophy and a set of principles on the basis of which we make decisions;
  • formulated guidelines for working on products with good and bad examples;
  • An exhaustive set of variables that contain colors, typography, dimensional system, modular grid, etc.

Examples of a holistic visual language include Shopify's Polaris and IBM .



What is a component library?




A library of components in code is a technical implementation of everything that was laid down in your visual language. All the necessary logic is literally “sewn” into the components, they become the main reflection of your system.

The obvious advantage of using the library is that it greatly simplifies the maintenance of product consistency and a stable level of design quality.

A good library includes:

  • a set of token variables that reflect styles (ideally, these tokens should be alienated for use by teams with different technological bases);
  • a complete set of basic components (buttons, inputs, etc.);
  • ready-made embedded blocks (popups, forms, caps, etc.);

An example of such a library as part of a system is AtlasKit from Atlassian.

You can learn more about the benefits of working with the library in one of the articles of the UX Strategy series by Yuri Vetrov.



What are design templates in a design system?




Despite the fact that the only significant reflection of your system is the components in the code (i.e., what your users directly see), designers should be able to freely prototype using all the necessary elements. In an ideal picture of the world, designers have a prototyping environment using combat components and real data, however, this is quite difficult to achieve. It is sufficient to have an up-to-date and supported template (or group of templates) for any design tool you use.

You can read more about how templates are arranged in the Mail.Ru Portal team here .

Important to remember that design templates are only part of the design system and by themselves, without reference to the component library, they are only static artifacts.



I heard the definition of "a single source of truth." What is it and why is it needed?




It is critical that there exists (and is maintained up to date) a resource where the design system with all its components will be fully reflected. This resource will be your single source of truth about the system - a place with which you can regularly check in the process.

The existence of such a resource dramatically simplifies the interaction around the design system, as All participants in the process have at hand a single point where you can turn for answers to all common questions. This is especially clearly felt when interacting with outsourcing - just then you understand how easily everything is described!

For the Mail.Ru Portal Team, Paradigm is the “One Source of Truth” .



Does the design system need a team?




The design system team is the last component of our definition. Like any other serious long-term project, the design system should have its ideologists who will lay and will support the philosophy and basic principles, managers who will make the project happen, and artists who will work on it with their hands. It often happens that these roles are combined and mixed. At a certain level of maturity a company can create a dedicated system team, but as a rule, work is carried out in parallel with the main activity. The most important thing is that in principle there are people who regularly and systematically remove attention to the project. Only in this case he has a chance to find life.

You can read useful information about the design team of the design system from the main ideologist of this topic - Nathan Curtis.



I don’t understand: how is the design system different from the guideline?



bit.ly/dsdefinition-img-7
Guideline in the traditional sense - a static document that fixes the rules for working with the visual style of the company. A design system may include this information, but it is much broader. Guideline is just one of the elements of the system.

Unlike the classic static guideline, the design system is “live”, i.e. not only described, but implemented in the component library. Thus, in the design system (unlike the guideline) there is a dynamic link between the original rules and the implementation. The guideline can be updated without being sure that this change will affect anything. In a design system, changes can be rolled out to the entire product chain.



We put together the coolest UI Kit in Sketch / Figma / etc. and actively use it in our work. Can we say that we have a design system?




We can say that you have taken a step towards the unification of design. Ideally, this process does not begin with graphic artifacts, but with the recognition and articulation of the principles that guide you in product design. Without this, unification will only occur on a visual level.

It is also important to remember that the UI Kit itself, outside the system, is nothing more than a static image of elements that will inevitably become obsolete and in no way reflect reality. To avoid this, your UI Kit should be implemented as "live" components in the code used on real products.

In other words, from a scheme in which your design is in no way connected with the final result, you need to come to the one when your design is “sewn” into the component library and the result is predictable.



Conclusion


Considering design systems in a historical context and dissecting the concept itself, I would like to note two key thoughts:

  • The need to formalize complex knowledge for the transfer of experience has existed for a long time, however, what has changed is purely technical capabilities for this, as well as the fundamental needs of society (in particular, the boom of startups).
  • The main mistake made in the perception of the term “design system” is that a system begins to understand one of its elements described above. However, the puzzle develops only and exclusively when you begin to look at it as a combination of these parts.

Many thanks to Yura Vetrov, Slava Yashkov and Gevorg Glechyan for help with editing and wise advice.