In general, design systems is a systematic approach to creating and maintaining consistent user interfaces which coherently communicate the brand values and empower user experience.
Similarly to physical things, such as sewing a dress, a web application can be created not in a factory but by an amateur. To do this, a person certainly needs some skills but a systematic approach can be out of use. The situation changes if the volume of the subject increases up to the industrial level. In the same manner, when developing and maintaining larger websites, in the long run, there is a need of methods and tooling which ensure the quality of the output and consistency of elements across different items, decrease the costs of the production and empower in-team and cross-teams collaboration. In programming and management, such systematic approaches are actively produced and adopted by the web community. Currently, similar methodologies are being created for the design part.
Design systems are meant to standardise and simplify the process of interface design and development, they bring new approaches and form their own ecosystem. Currently, design systems are a separate domain in the area of making web and mobile applications, they are interesting to apply in practice and study from a scientific perspective. However, there is no solid understanding of the concepts and terms forming the design systems. This issue has already been addressed in the professional literature. For example, Alla Kholmatova outlines that “there isn’t a standard definition of “design system” within the web community, and people use the term in different ways” (Kholmatova, 2017). Moreover, the specific entities, which form the design system concept, are often understood in different ways. Sometimes, authors even use the same term to address different subclasses. Such inconsistency in terms makes “hard for newcomers and experts alike to get the crux of the problems we are solving” (Federman, 2017).
To solve the term inconsistency and provide structured professional language, this article focuses on the vocabulary used in the design systems domain by observing a range of materials on the topic, from both academic and popular sources. By categorizing and summarizing information in the selected materials, the article outlines the key concept of design systems in the context of user interface development, introduces the main entities and observes their different interpretations in the literature. Based on the summary of these interpretations, the design system sub-concepts are organized into a hierarchical schema and are given most suitable names.
Material selection and methods
This review article observes both popular and academic sources related to the topic. Academic sources were selected by their relevance to User Interface Design domain and by presence of keywords “pattern”, “style guide” and overall applicability. Popular sources were selected from highly cited public articles and blog posts by authors who often speak on the topic at professional conferences or frequently publish materials related to the topic. These popular sources also include articles and blog posts which try to provide their own categorisation and outline the building blocks of the concept.
The gathered materials were examined on the presence and description of concepts and sub-concepts related to the design systems. Their representation is categorised and summarised below.
Problems to solve
In the design for the web, the following problems occur most frequently:
- Inconsistent user interfaces
- Large costs of design
- Low-level multidisciplinary collaboration
- Non-efficient design-team work
1. Inconsistent user interfaces
It still often happens that user interface (UI) elements are not consistent across some websites or applications. There are multiple reasons behind that, such as 1) similar elements being created by different designers and developers experiencing lack of in-team communication, or 2) the same elements being implemented more than one time, sometimes even by the same person, because of lack of documentation for existing solutions, or 3) new design solutions being made without aligning with existing ones, and many other reasons. All of those lead to badly done websites and applications which fail to communicate the brand and provide a good user experience.
2. Large costs of design
Mostly, the reason for user interface inconsistency mentioned above is creating same or similar things again and again without references to the work already done. Besides bad results, it also costs a lot.
3. Low-level multidisciplinary collaboration
Web products are created by multidisciplinary teams which include designers, developers, copywriters, managers, etc. On one hand, they all are working on the same product. On the other hand, each of these disciplines has its own fashion barely interconnected with the others. To achieve a good level of collaboration, such team needs to follow special working approaches and use appropriate and efficient tooling.
4. Non-efficient design-team work
In larger products, many designers work on the same product. This case brings the collaboration problem even down to a single-disciplinary team. This becomes especially visible on the scale. Rapidly growing companies need to scale their design teams fastly and even place them in multiple locations. Ensuring the design consistency and quality when experiencing such growth is a great challenge. At the same time, the products themselves have to be created “in a scalable and repeatable way” (Saarinen, 2016).
1. The concept of design systems
Design systems is a systematic approach that offers solutions to the problems presented above.
Since design systems are a yet evolving concept, the sources use different terms when addressing them. Some authors tend to observe design systems from a perspective of a technical solution and interpret them as collections of reusable UI components:
“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.” (Fanguy, 2017) “A design system is a collection of reusable components to tie whole products together” (Baskanderi, 2018)
At the same time, other authors call such collections “component libraries” or “pattern libraries” and describe them only as a part of a design system. They interpret the design systems concept as more complex but have difficulties to give a straightforward definition for them. Saarinen (2016) focuses on the processes formed by design systems: “design systems are more systematic ways to guide and leverage our collective efforts” (Saarinen, 20016). Braga partly supports this interpretation but also makes it wider by including the tools: “Design systems are basically a combination of tools and processes that will help our teams working better together” (Braga, 2017). Authors of the iconic “Design Systems Handbook” introduce a design system through its function saying that it “unites product teams around a common visual language” (Suarez, Anne, Sylor-Miller, Mounter, and Stanfield, 2017). Thus, they see design systems as a set of approaches for collaborative work, design tools for providing user-friendly and brand-supportive interfaces, sets of methods and frameworks to bridge the gap between design and development and practical solutions for saving the costs.
The wide interpretation of design systems includes some sub concepts; together they build a whole ecosystem. There have already been attempts to outline the ecosystem as a schema but due to lack of consistency in terms, the schemas by different authors vary.
Continue reading in my blog: http://varya.me/blog/design-systems-review/