Design system - a set of components, rules, regulations and tools to improve the quality and speed of product development, as well as the effective support of existing ones. In English, the term “ design language ” is most often used to designate design systems, also defining its main difference from the design system - the ability to use it outside the scope of digital products. One example of such a “visual language” is the recognizable design of BMW cars (headlights, grille). The visual language defines the basic foundations for creating products and solutions.
Today, as the main components of the design system, experts distinguish:
- Guidelines and Style Guide
- Frameworks
- UI- kits, templates
- UX Pattern Sets
- Ready component libraries
- Documentation, rules, recommendations
Content
Design Tasks
Systematization of design is called upon through the creation of interconnected basic elements to come to a single field of interconnected products and solutions. In other words, design systems help create a convenient ecosystem of products that developers and users will understand.
The difference between the library of ready-made elements and the design system is fundamentally important, the latter is distinguished by an exceptional detailed study of all the nuances. A striking example of a large thought-out design system is the IBM Design Language [1] , which describes all the possible options for developing its concept in digital products and introduces the system philosophy to the community. IBM captures the special role of the design system in the structure of the “user – product”, “client – company”, “developer – product”, “employee – company” relationships.
The use of design systems provides a number of certain advantages:
- Standardization of solutions
- Project independence from team composition
- Simplification of product transfer through the stages of “research - design - development”
- Reduced support, product development and launch costs
The origins of design systems
The foundations of design standardization began to appear along with the development of the “Swiss style”, which took shape in 1927 thanks to Jan Chihold [2] . Chikhold introduced not only the key concepts of simplicity, conciseness and ease of perception, but also clearly outlined the limits of the permissibility of using individual elements in graphic design. Also, the merit of the designer is the introduction of a modular grid - a system actively used in web development, printing and creating elements of design systems.
The first approaches to creating design systems appeared in the 60s of the last century, when a modular system began to be used in programming. The idea of modularity has evolved since the late 1950s and gradually went beyond the scope of programming , encompassing related areas.
Another important fact was the rapid development of graphic design and a request for the formation of sustainable principles of corporate identity. Instructions for the New York Metro [3] , which describes in detail the use of all navigation elements, typography , symbols and graphic elements, are often cited as examples.
The idea of creating a new one based on developments in the art world was promoted by Karl Gerstner and Saul Levitt . Central to the work of serial artists was the concept of creating art using algorithms. Saul Levitt was probably the most famous serial artist. For Levitt himself, the real work of art was an algorithm, not a final product. In the modern sense, he was one of those designers who experiment with design systems.
Modern design systems
The explosive growth of technical solutions, the emergence of new programming languages , libraries, frameworks required large companies to standardize development approaches. From this moment, design systems have become an integral part of large projects as the basis of the development and scaling of digital products.
At the moment, there are several hundred large design systems in the world. The leaders in the creation and development of the direction are large IT companies ( Apple , Microsoft , Google ), banks and financial organizations ( Tinkoff Bank , Alfa Bank , Spare Bank 1, VISA ), software manufacturers ( Atlassian , Mozilla , IBM ), design Studios (Chulakov, AIC), FMCG manufacturers ( Royal Canin ).
Atomic Design Methodology
Creation of design systems is often associated with the methodology of "atomic design" by Brad Frost [4] . Atomic design, used mainly for web design, has 5 levels of development:
- Atoms - html tags
- Molecules - the simplest elements interconnected (feedback form from a button and input field)
- Organisms - separate sections of the interface (menu, navigation section)
- Templates - typical solutions for pages (product card)
- Pages - templates that use content
The methodology of following the levels allows you to clarify the assembly process of both individual parts of the product, and the whole solution. To create design systems by the method of atomic design, the enthusiast created the Pattern Lab tool.
Tools for the development of design systems
Applications such as Sketch , Framer, Figma help specialists to develop complex design systems. Various frameworks, SDKs and libraries ( AngularJS , Flutter , React ) also play a large role.
Government Design Systems
The development of state-owned design systems can be seen as a logical continuation of the digitalization of the “citizen-state” relationship. Today, Italy [5] , Australia [6] , Great Britain [7] , Singapore [8] , USA [9] , Estonia [10] have their own design systems for developing services and products.
The Russian state design system is being developed by order of the Ministry of Digital Development, Communications and Mass Media , but does not have an officially confirmed final version of visual and graphic design and the rules for using fonts and system elements.
Interesting Facts
Many design systems get their own names that reflect the essence of philosophy and visual language:
- Bootstrap - Twitter framework and design system
- Carbon - IBM Design System
- Fluent - Microsoft Design System
- Gel - BBC Design System
- Lightning - Salesforces Design System
- Material - Google's design system
- Nachos - Trello Design System
- Paradigm - Mail.RU design system
- Photon - Firefox Design System
- Polaris - Shopify Design System
- Ratio - Rambler Design System
- Solid - BuzzFeed Design System
Links
Literature
- Alla Kholmatova. Design Systems. - Smashing Magazine, 2017 .-- 288 p. - ISBN 978-3-945749-58-6 .
Notes
- ↑ Home . www.ibm.com. Date of treatment March 8, 2019.
- ↑ Ava Douglas. Jan Tschichold (neopr.) . www.historygraphicdesign.com. Date of treatment March 8, 2019.
- ↑ NYCTA Graphics Standards Manual Compact Edition . Standards Manual. Date of treatment March 8, 2019.
- ↑ Atomic Design . Brad Frost (June 10, 2013). Date of treatment March 8, 2019.
- ↑ Team Digitale e AgID. Designers Italia (Italian) . Designers Italia (10 febbraio 2019). Date of treatment March 8, 2019.
- ↑ Digital Transformation Agency. Homepage Australian Government Design System. Date of treatment March 8, 2019.
- ↑ Home . design-system.service.gov.uk. Date of treatment March 8, 2019.
- ↑ Singapore Government Digital Services around a common UI language and user experience .
- ↑ US Web Design System: A design system for the federal government . designsystem.digital.gov. Date of treatment March 8, 2019.
- ↑ Imagery - Brand Estonia (English) (unopened) ? . estonia.eu. Date of treatment March 8, 2019.