The three-layer and one-ring structure of the design system
The following is my proposal of a VGLT-MO three-layer and one-ring structure to help you understand the design system.
Vision & Principles, which serve as a reference for design decisions and guide the way forward.
Guidelines, including Style Guideline, Patterns Guideline, Content Guideline, and more conveyed through text and images.
Libraries & Tools, including Components Libraries, Toolkits, Collaborative Tools, etc. that can be used directly.
Surrounding these three layers of consumer email list content is the management structure (Management Structure) and the organizational process (Organization Process), which promotes the entire design system to become a living ecosystem.
I have participated in the construction consumer email list process of the design system of a well-known domestic company, and encountered many difficulties, but I also gained more knowledge and learned how to do it and how to do it, which further contributed to this article; therefore, I tried to Build the general structure of the design system, and explain its value and how to build the design system later in the article.
2. Principles of Design System
System rules affect system behavior, and a stable design architecture promotes a stable design system. Regarding the principles of design systems, I summarize them into the following four principles:
1) Formally, universal but flexible
The design system exists independently of the existing business. It is constructed and managed with predictable rules, and guides the direction of consistency, rather than everyone opening their own brains.
But the rules are not restrictions. When the guidance is not enough to convey a better user experience, the design system is iterated in real time through the design of the system mechanism.
Designers can prototype and iterate faster, and thus have more flexibility to think about solutions to meet needs.
2) Relationship, integration but interoperability
Integrate design and development, link design and implementation code, and effectively combine experience design with landing development; but through independent module design and the design of relationships between modules, with good mechanisms and collaborative tools to help users Use it more smoothly.
3) Organizationally, open sharing and cross-domain synchronization
Through the design of the organizational process, the components, design patterns, content strategies, etc. based on modular design thinking can be reused by as many people as possible, so as to improve the knowledge reuse rate; Sync and flow among engineers, product managers, marketers, and more.
4) In terms of results, synergy and consistency
Through a good development experience and the standardized guidance of design and development, a wide range of development and design can well match the user's mental model and the needs of multi-device and multi-platform, bringing high-quality and unified product value communication and user experience realization.
In addition to creating higher usability (Usability), it can also create higher accessibility (Accessibility), so that the experience in products such as handicapped groups, various devices with low configuration, international differences in laws and cultures, etc. It is also easier to agree on a second iteration (these are often less considered things).
3. Differences between different design systems
Different organizations and products have different design systems.
Design systems have different scales (Kholmatova, 2017), which can be simply divided into platform-level design systems (such as Apple's Human-Computer Interaction Guide HIG, Microsoft's Fluent Design System FDS) and company-level design systems (such as Atlassian's Atlassian Design System) ADS; Salesforce's Lightning Design System LDS, Adobe's Spectrum), such as Ant Financial's Ant Design, etc.).
The degree of openness of design systems varies, and some design systems are not open to the outside world (such as Airbnb's design language system DLS), while Microsoft's fluent design system is open to the whole process.