From three aspects, help you quickly master the complete framework of "design system"

This year, due to the increase in business volume, my company organization has increasingly emphasized the concept of "replicability". This is not a new concept. When it comes to design, it probably comes to the design system.

When I first heard of this concept many years ago, I always thought that the design system was something very high-end and awesome. At that time, Material Design had just come out and Apple's human-computer design guidelines dominated the design circle. Although I mainly worked on Android systems, I still read the IOS Human Interface Guidelines carefully.

Then, there was actually nothing else...

What do you think about design systems?

Regarding the design system, some people think it is similar to metaphysics, some people think it is good but easy to be shelved and left to gather dust, and some people think it is a constraint for designers... In addition, there are many concepts related to it that are often confused: design language, design principles, design specifications, design style, design components...

Figure 1: Design system word cloud

In order to clarify what a design system is, I have classified the above words that often appear in design systems. I think they point out the explanations of design systems from different perspectives. Among these words, some explain the reasons for the existence of design systems: pursuing efficiency, maintaining consistency, avoiding duplication of work, and helping digital products to form integrity. Some explain its composition or related content: design specifications, design language, design principles, design specifications, design style, design components, etc. Some explain the problems that design systems are prone to: metaphysics, constraints, high-end, idealization, etc.

Reason for existence

The reason for its existence, that is, the purpose of building a design system, is that the design system is an overall tool to help us work more efficiently. It is destined that the style, composition and operation of the design system will not remain unchanged. Every company needs to find the most smooth system between the design and development of its own team.

You should know that although the design system sounds cool, creating a good design system is actually very energy-consuming. Therefore, the purpose of the design system must be clear and meet the needs of the current situation.

Why create a design system?

I think it’s a good time to generate a design system only when you or your team has a strong need for the following points.

• Previous design content always needs to be reused quickly
• Design resources need to be freed up so that manpower can focus on more complex and valuable problems.
• Need to maintain consistency across multiple teams or multiple products
• Need to help junior designers quickly reach more advanced requirements

A design system that is not needed will be a set of "metaphysics" that will be shelved and gathered dust in the future.

Components

The word system refers to an organic whole with a specific structure and function composed of interconnected elements. The design system is naturally also a holistic organic collection.

Figure 2: Components of the design system

1. Design principles

Design principles are the guiding ideology and strategic direction for guiding the construction of a design system. They are highly theoretical summaries based on a large amount of practical experience.

The concept of design principles did not emerge just for the design system. The Gestalt theory used from the Gestalt psychology school includes design principles such as proximity, similarity, closure, continuity, etc. There is also the minimalist design principle centered on "do not add entities unless necessary", and the four design principles from Donald Norman: conceptual model, feedback, limited scope, and perceived preset uses.

In order to have a more concrete understanding of the abstract design principles, let’s take a look at the principles of several more famous design systems.

• Apple: Aesthetic integrity, consistency, direct access, feedback, metaphors, user control
• Microsoft: Natural, intuitive and powerful, engaging and immersive
• Google: Material is a metaphor, obvious, graphic and purposeful, meaningful motion

Figure 3: Three design system principles

Suddenly I realized that Apple is the only company that didn’t give its design system a name.

It can be found that although the design principles of the three companies are different, they are almost all refined and optimized from common design principles.

Is it necessary to set your own design principles when building a design system?

I don't think it's necessary.

Although design principles are important, it is also acceptable to follow the existing basic and general design principles to guide the construction of the entire system in the early stages of designing a system. It is better than just randomly picking out some words from the basic and general design principles, simply piling up some high-sounding words, and leaving them there in a vacuous manner, waiting for them to gradually become "metaphysics" in the mouths of others, right?

Because principles are the highly abstract crystallization of design systems, they need to be generated based on a lot of actual design experience. Otherwise, it is difficult to guide the design system to achieve the goal of increasing efficiency.

2. Design style and specifications

Design style is a representative graphic impression formed by this design system. Design specifications are rules and paradigms used to coordinate unity. In the "Mobil Brand Manual" in the 1960s and the "NASA Graphic Usage Specifications" in the 1970s, "colors, fonts, graphics, usage and examples" were already included.

Figure 4: Design specifications

Having a design style and design specifications does not necessarily allow products using this design system to establish a unified brand tone. Only when the design system has a certain recognizable design style and carries out long-term design output under the guidance of design specifications, can the products using this design system form a unified brand tone.

3. Design components and patterns

In design systems, the most familiar and commonly used ones should be design components, that is, UI kits, including input boxes, buttons, text, links, drop-down menus, etc. They are the smallest elements that make up the interface and the commonly used collections of these elements.

Figure 5: UI kits

Design patterns are more complex than elements. They are some basic and common interaction methods used to complete tasks. They are small design solutions that can solve problems. For example, Confirmation and acknowledgement in Material design provides a series of design solutions for machines to confirm to users before performing operations.

Figure 6: Design pattern

To put it simply, design components are some elements that are mainly used by designers, and design patterns are some interaction methods that are mainly used by R&D engineers. Since the two are very similar, they are now more often viewed together.

In 2013, front-end engineer Brad Forst applied atomic theory to interface design and formed a design system. Design components were further expanded to form a higher-level collection than when the concept of design patterns first appeared. For example, several complete pages and the interactions they contain can also become a component of a design system.

Of course, due to the different needs, scenarios, and positioning of each product, the larger the synthetic component will be, the more complex it will be.

4. Content assets

In some definitions of design systems, content assets may be considered part of the design specifications, but what I want to emphasize here is that they are part of the resources.

Since the design system is an organic whole, while it continues to serve various product lines, it will also need to be constantly filled with different content, such as icons, fonts, illustrations, models, etc. used in the application. These contents should also become part of the design system when accumulated. If other applications or products need them, they can be directly used, thereby improving overall work efficiency.

The more common content assets include icon libraries, font libraries, and sound effect libraries, which provide a variety of icons, fonts, and sound effects for different products or applications. As illustration styles and three-dimensional styles continue to exist, there will inevitably be illustration libraries and model libraries belonging to a certain design system, as well as collections of texts that are frequently used in products.

5. Tools and processes

These two parts are mainly for the specific environment in which the design system is applicable. I think the content of the design system needs to be included under the requirement of collaboration. For example, if Blue Lake is used for automatic annotation, the team should use Blue Lake uniformly, instead of some people using Blue Lake and some people using Mockplus.

6. Design language and guidelines

There are two other concepts that are often mentioned but not included in the design system diagram I just drew.

Design language: Language is a symbolic system that enables mutual communication. Anthropologist Saussure believed that language can reflect the stable laws behind the ever-changing speech activities. Therefore, I think the design language here should be equivalent to design specifications, which is another expression of design specifications.

Design Guidelines: According to the Chinese translation, I think it is a document that explains and introduces the design department and is not included in the design system.

Frequently asked questions

Finally, the metaphysics, theorization, dust, and castles in the air that appear in the word cloud of the design system are some of the problems that are easy to encounter when creating a design system, especially the most practical design components, which are the first to bear the brunt. I organized a review workshop for the designers in our team before, and everyone raised more than 20 questions about the design components of the design system alone.

Figure 9: Design component review workshop

In general, there are three common problems in designing systems:

1. Definitional issues

The design system, from the big framework definition to the definition of specific design components, is not something that can be accomplished overnight. It starts from scratch, and every update and iteration needs to be both critical and effective for the current team. Critical means that the content currently defined by the design system is frequently used by the subsequent product lines, and effective means that the content determined by these definitions can be completed using existing resources, that is, it can be completed and achieved with the existing team's capabilities, time and equipment.

2. Usability issues

Unclear directories, incomplete documentation, and incomplete resources are all problems when using the system. If you treat the design system as a product and make it easy for users (designers or developers) to use, it will not be shelved.

3. Collaboration issues

Not knowing about updates, not receiving feedback, not understanding the user's situation... The problem of collaboration has given rise to cloud service functions of design software such as Blue Lake, Mockplus, Moktober, Codesign, and many other cloud services on the market.

Although there are many excellent design systems on the market for reference, as mentioned in the reason for existence, since it is intended to help our own team work more efficiently, we still need to make changes based on actual conditions.