Design System | How to establish a design system for business characteristics

Home > Sci-Tech

Design System | How to establish a design system for business characteristics

2021-11-26 00:13:04 16 ℃

Editing Lead: Generality and Business Treatment The process of building design systems seems to have always been a contradiction. Our ideal design system is a sustainable design system that can be won by the development of the business. This paper expresses the author's related thinking about the design system, it is recommended to read designers who are interested in similar business.

When you mention the design system, what do you think? Component? Methodology? Or is it a page template?

In the "Design System" book written in Alla Kholmatova, the author is defined in the design system:

"Design System" refers to a series of organized ordered design patterns and practical methods for serving digital product designs.

"Mode" refers to any reusable interface composition element, including buttons, text boxes, icons, color, fonts, and reused functional flow and interaction behavior, etc.

"Practice" is about how to create, refine, use and share these modes in the design team.

First, what is the excellent design system?

At present, in terms of design system, many teams have explored their own style, comprehensive view, and foreign design systems have undergone long-term development and precipitation, overall maturity and perfection are higher than domestic. For example, let's take a look at IBM's Carbon Design System.

Carbon Design has formed a set of design systems from the five aspects of principles, components, patterns, shared assets, and data visualization. In accordance with the definition of "Design System", we can classify the principles, components, and mode as "mode"; The shared asset and data visualization are classified as "practice".

In principle, Carbon Design specifies the basis of colors, motivation, ICON, copy, illustrations, etc., although these rules are not specific components, but can be tone of the overall design system, which is equivalent to playing a solid system. Foundation, and the active part of the invention is easily ignored by many people, but it can indeed reflect the overall detailed and preciseness.

All of the components should be more familiar, usually components constitute the element of the minimum functional particle size of the page, with interactive specification, form a set of detachable component assets.

The mode part is considered a core highlight of Carbon Design. Each "mode" has an overview, theoretical source, usage method, case derivation, etc. Summary of a set of asset libraries that have both theory and actual asset, very rigorous and scientific.

Only employees can be used in sharing assets, so they don't show your specific content, but you can speculate that this piece should be a shared resource pool of IBM's different business, and this resource pool has a specific person to maintain and review, guarantee the iteration of shared assets. And update.

Visual graphic. As a separate field, Carbon Design is aligned with separate integration and enumeration.

Of course, in addition to IBM's Carbon Design, there are also many excellent design systems, such as ants Ant Design, Atlassian Atlassesian Design, Microsoft Microsoft Design, Google's Material Design, SAP's Fiori Design, we will not be included here. NS.

Second, how to effectively carry out the design assets

In the chemistry world, all objects are composed of atoms, atomic combination constituent molecules, molecular combinations constitute organic substances, eventually forming a universe.

2013 front-end engineer Brad Frost proposed atomic design theory in "Atomic Design", and uses this theory to interface design, it is said that he is inspirated from chemistry, atoms (atoms) combined, forming molecules ( Molecules, further combined with the formation of organisms, according to his theory, the design system mainly includes 5 levels: atom, molecule, tissue, template, page.

Last year, the Pixel design system inside the team has accumulated many basic components and general rules. When defining how to use this set of design systems, we try to restructuring and classify all the design assets in both hands to make it easy for others. Designers or developers understand.

We found that Brad Frost's atomic design theory, which is more helpful for designing the material classification of the system itself, so attempts to classify design materials in accordance with the following ideas:

Atom: the most basic element constituting the design system.

Such as: color card, font size, icon, rounded, spacing, etc.

Molecule: The basic component constituting the page.

Such as: Button, pop-up window, search box, form, pop-up window, etc.

Organization: blocks consisting of base components.

Such as: list operation block, list display block, form block, data filtering block, detailed location block.

Template: Page template made of blocks.

Such as: Details page, list page, table sheet, exception page.

Page: Scene case with business logic.

Such as: Resource Management Scene, Message Notification Scene, Permission Management Scene.

This way we can make all design assets, which are valid from small to large. Designers can easily do design with blocks.

At the same time, the front-end engineer can also put all the assets in line with all the assets, while reducing repetitability development, more guarantees the unity of the entire team's design style and interactive action, avoiding different designers and engineers Personal habits "problems caused by differences.

Third, establish a design system belonging to a business characteristic

In the above step, we uniformly collate and organize all designed materials. We have thought of these materials, plus common rules, and designers can use this design system to collaborate.

But after a period of implementation for a period of time, we still find some problems:

If a novice designer uses the above assets in strict accordance with the material, it will develop the habit of finding case set from the asset library. Of course, there is no problem in most daily business, but once the business special scene, or some Innovative functional needs, designers will fall into the inertial thinking of "there is no such case in our design system".

At the same time, due to atomic-molecular-organization-page hierarchical structure, it is over-reliable "construction" thinking, and lost as a designer "sensibility" advantage, it is easy to cause all pages, no highlights.

In the article published by Corinna in 2018, Corinna is not mentioned in the article, which also mentioned the limitations of atomic design in landing. He mentioned that the relationship between excessive dependency layers will lead to the whole The system will become extremely complicated and difficult to maintain, once started, subsequent iterations and heavy constitutions will be very high.

So we started to ask yourself, we spend energy to do design systems, what is the original intention?

Thinking about it, in essence, still solve the pain point of the business team:

Meeting business rapid development and iteration Quick Responsive Different users Different users Different users design and development, improve efficiency help business make more bright spots and innovations, enhance business competitive design systems can be parallel in multiple teams, and Unaffected by each other

These pain points, our current design system is already satisfied, but to solve 4 and 5, it also needs to optimize the original design system to make it more adapt to business properties.

If our design system is more than a restaurant, then we have now have the raw materials of the vegetable and the use of raw materials, and also made a few home-made home, and we have to do it later, how to use the existing Materials, develop new recipes based on different guests.

In order to adapt different products and services, our current Pixel design system is mainly under the system of basic components, in the field of PaAS and SaaS, and in the two major fields, according to the characteristics, users, The product form is divided into different business domains, ensuring that everyone can switch different themes in a set of basic system specifications, and retain their own business characteristics.

How do you help your business make more bright spots and innovations, improve your business competitiveness?

In the monitoring operation and mainfield, according to the business attribute of the business platform, we divide this business into the three major directions of "supervisor" "control", each direction, the target, the user is different, through research and Analysis, we try to define a keyword in each direction.

The monitoring platform, its goal is to monitor the operation of the business, the keyword is [Visual]; application operation and maintenance platform, its core goal is flexible to handle a large number of change operations, keywords are [efficiency]; safety engineering platform, core It is to ensure the safety and stability of business, and the keyword is [Safety].

Next, we focus on "visual", and optimize the pages of some traditional "lists - details" layers, we have several visual scenarios, respectively, corresponding to monitoring, arranging, arrangement and operation and maintenance scenes, respectively. Business logic, link architecture, or workflow performs visual topology.

Finally, we have found that these "new recipes" are different, and the facing business scenarios also have a great difference, but it can be refined in the design.

So we defined the "atomic components", and the different states and patterns were clearly clarified, as well as which styles were supported, which styles need to comply with specifications, and split the business scene, We also got the following "Arrangement Scenery". Based on this scene library, when you encounter similar scenes, the designer will no longer entangle the need to use from the fixed recipe, but more from the perspective of the designer. How to create more "recipes" based on this library.

Similarly, we have also got the topology scene, advanced operating scenario, etc., which are basically based on business characteristics - summary - split

How do you coupling these scenes with previous design systems?

We have tried another classification, with the "General-Business" and "Case-Rules" two axes of coordinate axis out of the four quadrants, and the experience in the business is regular, caselated, documentation The form falls into these four quadrants. This gives a design system with a versatility and business characteristics. In this design system with business attributes, it is not limited to "Design Materials" and "Design Rules", which adds rules or materials such as "Collaborative Process" "Business Model". We hope to use this Splitting four quadrants, enabling novice designers to understand the business design system in all directions, while ensuring the design and unity, it can also ensure the continuous iteration and innovation of the design system.

Fourth, summary

The above is a little thinking in the construction of the design system. In the process of building design systems, versatility and business customization seem to have always been a contradiction.

Our ideal design system is neither a template that only considers generality, nor a thousand people who have a personalized skin, but can be based on the development of the business, and a sustainable design system for mutual benefit. In this process, there will be more bumps waiting for us to face, welcome to more similar experience to communicate with us.


This article is published by @Alibaba Cloud TXD to everyone is a product manager. Reprinted is prohibited without permission.

The title is from Pixabay, based on the CC0 protocol.