Lecture 7 min.
A design system is a set of components, rules, guidelines and tools for improving the quality and speed of product development, as well as for the effective maintenance of existing products. In English, the term "design language" is most often used for design systems, and it also defines the main difference from a design system: a design language can be used outside the sphere of digital products. One example of such a "visual language" is the recognizable styling of BMW cars (the headlights, the radiator grille). A visual language defines the basic foundations for creating products and solutions.
Today specialists identify the following main components of a design system:
Probably the best-known example is Google's Material Design system, on which many Android applications are built.
A design system usually includes several large sections. The set of sections may vary depending on the company and the number of products it has. The larger the company, the more complete and carefully thought-out a design system it needs. Here is what they may include:
The systematization of design aims to arrive, through the creation of interrelated basic elements, at a single field of interconnected products and solutions. In other words, design systems help create a convenient ecosystem of products that is understandable to developers and users.
The difference between a library of ready-made elements and a design system is fundamentally important: the latter is distinguished by an exceptionally detailed elaboration of all the nuances. A striking example of a large, well-thought-out design system is IBM's Design Language , which describes all possible ways of developing its concept in digital products and presents the philosophy of the system to the community. IBM records the special role of the design system in the structure of the relationships "user–product", "client–company", "developer–product" and "employee–company".
Using design systems provides a number of definite advantages:
The foundations of design standardization began to appear with the development of the "Swiss style", which took shape in 1927 thanks to Jan Tschichold . Tschichold introduced not only the key concepts of simplicity, conciseness and ease of perception, but also clearly outlined the limits of acceptable use of individual elements in graphic design. The designer is also credited with introducing the modular grid, a system actively used in web development, printing and the creation of design system elements.
The first approaches to creating design systems appeared in the 1960s, when the modular approach began to be applied in programming. The idea of modularity had been developing since the late 1950s and gradually went beyond the sphere of programming, covering adjacent fields.
Another important factor was the rapid development of graphic design and the demand for establishing stable principles of corporate identity. The manual for the New York City subway is often cited as an example; it describes in detail the use of all navigation elements, typography, symbols and graphic elements.
The idea of creating something new on the basis of developments in the art world was promoted by Karl Gerstner and Sol LeWitt. The concept of creating art by means of algorithms occupied a central place in the work of serial artists. Sol LeWitt was probably the best-known serial artist. For LeWitt himself, the true work of art was the algorithm, not the final product. In the modern sense, he was one of those designers who experiment with design systems.
The explosive growth of technical solutions and the appearance of new programming languages, libraries and frameworks required large companies to standardize their approaches to development. From that moment, design systems became an integral part of large projects, serving as the basis of the process of developing and scaling digital products.
At the moment there are several hundred large design systems in the world. The leaders in creating and developing the field are large IT companies (Apple, Microsoft, Google), banks and financial organizations (Tinkoff Bank, Alfa Bank, Sparebank 1, VISA), software producers (Atlassian, Mozilla, IBM), design studios (Chulakov, AIC), and FMCG manufacturers (Royal Canin).
The creation of design systems is often associated with Brad Frost's "atomic design" methodology . Atomic design, used mainly for web design, has 5 levels of development:
Following the methodology level by level brings clarity to the process of assembling both individual parts of a product and the solution as a whole. For creating design systems using the atomic design method, enthusiasts built a tool called Pattern Lab.
Specialists developing complex design systems are helped by applications such as Sketch, Framer and Figma. Various frameworks, SDKs and libraries (AngularJS, Flutter, React) also play a large role.
The development of government design systems can be seen as a logical continuation of the digitalization of the "citizen – state" relationship. Today Italy , Australia , the United Kingdom , Singapore , the USA and Estonia[10] have their own design systems for developing services and products.
The Russian government design system is being developed on the commission of the Ministry of Digital Development, Communications and Mass Media, but it has no officially confirmed final version of the visual and graphic design or of the rules for using the fonts and elements of the system.
Atomic design is a design methodology in which you describe a design at five levels of components:
Many design systems receive their own names, which reflect the essence of their philosophy and visual language:
Comments