Some time ago, there was a discussion about this book in the wechat group of members. Everyone seemed very interested in this book, but worried about the 200 pages in English. Since this is a Design book worth reading, and everyone is so interested in it, I decided to spend some time weekly talking about Design System based on this book. I hope I can provide you with some help in reading this book, and also give myself the opportunity to study more deeply.
One disclaimer: this weekly series is not a translation of “Design Systems”, but rather a collection of reading notes and lessons learned based on the structure of the book. It is still recommended that you read the original book, the contents of the weekly can be used as an understanding aid.
Book purchase link here >>
Ten years ago, most of the designs of Internet products did not have the concept of System. They were done page by page by hand, and the overall efficiency and consistency could not be guaranteed. It wasn’t until the advent of Yahoo DPL (Design Pattern Library) that people began to pay more attention to this problem.
The size of the business will also affect the difference in the team’s investment in the System. Maybe people have not been exposed to the Design System. Design Pattern, Design Component, Design Language, Design Guideline, etc. Even though these concepts are not very clear, they are more or less affected in the design process.
If we do a Google Trends search for these keywords, you will find that “Design System” is the most popular. Everyone wants to know what the Design System is, hoping to use it to improve the overall quality and efficiency of their products.
Different teams have their own definition of the Design System according to their size and business requirements, which is why we find that the content of each System is different. In my understanding, since it is called System, it should be more complete and systematic, so I will define it as an overall solution to solve the production of digital products, including design, content, engineering and other aspects.
“Material Design is a unified system that combines theory, resources, And tools for crafting digital experiences. “As you can see from their website, it’s a complex system engineering of ideas, a complete world view. Of course, Material Design is different from the Design System we need to do due to its System particularity, which will be explained in detail later.
In order to understand and create our own Design System, we need to go back to understand the relationships and differences between the concepts mentioned above. In the first installment of the Design System project, we’ll start with these concepts.
Based on my own understanding, I have organized these concepts into the following chart. I want to give you a conceptual overview, and then we’ll break it down.
Design Principles
All systems arise to solve a set of problems, which can be either a business form (such as online shopping) or an operational form of behavior (such as data management). There are common problems and requirements behind them, which also put forward clear requirements for the Design System.
Principles can be thought of as a set of rules that are at the heart of how we Design and develop products, and the starting point for an effective Design System. To solve problems in the user experience and steer business, development, and design in the right direction.
Each company (team) may produce different Principles due to the nature of its business. Take IBM’s Carbon Design as an example. Their Design Principles are:
- It is essential that we (should)
- This country is not inclusive.
- Be consistent
- The Boundary is gray.
- The English dictionary is delightful.
This is what IBM defines and requires in terms of the overall product experience of its cloud products, and what they want to convey to users. As a basic principle of design, it will be embedded in its product, design, development, copywriting and a series of scenarios, become the “soul” of the product.
Again, take a look at the much-mentioned Lightning Design System, which serves Salesforce’s SaaS service. For their products, Lightning also proposes its own Design Principles:
- Clarity
- EFFICIENCY.
- Consistency (Consistency)
- Beauty.
Obviously, as a SaaS platform product, efficiency and consistency is one of the core competencies of their product. In order to ensure that the platform and third-party ISVs can provide customers with efficient and high quality services, they have adopted “clarity, efficiency and consistency” as the core Principles of their products.
The keywords “clear” and “consistent” of Internet products are almost always mentioned, which is also one of the most fundamental goals of user experience design. However, as the market’s demand for the depth of the industry continues to grow, people’s demand for the characteristics of the industry is becoming more and more obvious, and it is even written into the Design Principles as the conceptual foundation of product Design, just like the previous two cases.
Of course, we can’t talk about the Design System without talking about Material Design. Its Principles are more abstract in comparison, and in addition to its own unique design worldview, it is a lower-level set of “services”.
In comparison, its “business” is more extensive. Based on Material Design, you can develop an e-commerce application, a social networking and financial products. Therefore, its Principles need to be more “deep”.
Design Component & Pattern, Language, Develop Library, Guideline As well as the differences between them and how to cooperate with the Design System, it becomes the super engine of product progress and development.
Design System is a new series of PinDesign Weekly, based on book notes and lessons learned within the framework of the book “Design Systems”. I hope to share my feelings and experience with you to help you read.
Join PinDesign to receive the full text of this issue’s theme “What is Design System?” and the first two weekly issues.
Click to receive a 50 yuan coupon for PinDesign membership program
