In the first phase, we mainly introduced the composition of Design System and the definition of these concepts. I’ll continue to expand on these concepts over the next few weeks, but today we’ll start with Design Principle.

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.

Design Principle

The Chinese translation of Design Principle is Design Principle. In the last issue we defined Principles as a set of rules, guidelines, and design considerations. It is the starting point for us to build a Design System, which is used to solve problems in business and user experience and guide Design to advance in the established direction.

Principle’s most important goal is to ensure that everyone involved in product design has a common and clear goal, and take this as the standard to judge every decision in the process of product promotion. In other words, Principle is the starting point of the whole product design, which should be understood and integrated into the design process, such as Component and Pattern.

Differences between Principles

If you follow Design systems, you’ve probably seen a lot of examples. Material Design, Lightning, Carbon, MailChimp… These different Design principles proposed by Design Systems seem to have many similarities, but also many differences. Which one is right? Which one is right for you?

In fact, there is no absolute answer to this question, just as the Design Principle mentioned above is generated to solve the problems of current products. There’s an important message here, what is this product?

Under normal circumstances, we are considering to formulate corresponding principles for the products we serve. Therefore, the principles proposed by each Design System on the network have reference significance, but may not be suitable for ourselves. What we really need is to look at these cases to understand how they were derived and how they came to be.

Generally SPEAKING, I divide Design Principle into two categories: business and abstract. Visa, SAP, Material Design, Fluent.

On the right is SAP’s Fiori Design, which emphasizes role-based, enjoyable, consistent, simple and adaptive. If you know anything about SAP’s business (or even its users), you should understand how important these keywords are to SAP users. These keywords are very closely related to SAP’s business characteristics, and even if they fail to do so, their users will not be willing to continue to choose their products.

By contrast, Material Design’s Principles are abstract and seem to make sense but don’t seem to say anything. As an operating system-level language, it was more about providing ground, but not knowing what the next new product would be. What they need more is to give the whole environment a complete worldview, one that can withstand scrutiny.

Material Design Design System is very important, we need to learn and study it, but most of the Design is based on its platform (iOS is the same). The study of Principles should focus more on these business-specific types. After all, it’s hard (and not necessary) to create a worldview, but it’s imperative to get a product right.

How to judge a Design Principles

There aren’t many abstract Principles out there, and most of them have a complete worldview that can stand up to scrutiny. So we will focus on business Principles.

01. Source services

Since they are business, they are bound to have differences. Visa and SAP both have their own complete Principles, but they differ significantly due to the nature of the business.

Visa (pictured right) introduced the concept of “Design Everywhere” in its newly released Design Systems. As an international product, how to quickly and safely complete payment and fund management operations on different devices of global users is their most important goal and direction. SAP, as a provider of internal enterprise solutions, is more focused on the goals of roles, consistency of operations, etc.

There is nothing wrong with simple, effective and lightweight, which are common keywords. No one would question these general rules in product design, and this is what every product should do. But a good Principles first needs to serve the pain points of the business and its users, from a problem solving perspective.

02. Practical and feasible

As mentioned earlier, the purpose of Principles is to provide practical guidance for problem solving and can be used as a basis for product design decisions. So we can’t just derive the output, it’s also very important that the ruler works. There is a very vivid case in the book, we might as well bring it up again to share.

The key word “simplicity” certainly sounds right, but how do you define it? Based on it we can say two different things: Make it simple and No needless parts.

“Make it Simple” sounds so good that no one can say it’s wrong. Simplicity and ease of use should be the goal of every product, but it seems unclear. How simple is simple? How do we measure it?

In contrast, “No early parts” are more “powerful”. Each element (from large to small) should have a purpose and serve to solve a user’s problem. If you can’t explain the positive effects of this element on the product, then it probably shouldn’t be on the screen.

The question “is this easy?” may have different answers for each person, which makes the whole judgment less objective. Instead, “Is this necessary?” It is easier to judge and can be applied to every element on the interface.

We need Principles to be meaningful, so it should not just be a nice keyword, but a practical way to express what it means and provide actionable input into the design process.

03. Prioritize

Principles we come across usually have four or five keywords that represent the goals of the product in different dimensions. But there should also be a priority difference between these standards. What if there is a conflict between efficiency and aesthetics on an interface? A good Principles should also provide the answer at this point.

The best example is Salesforce’s Lightning Design System. The Principle of Lightning is clear, efficient, consistent and beautiful, but they define the priorities for these four keywords, and beauty cannot surpass efficiency, consistency and clarity, and even become their absolute first keywords.

The goal of Principles is to unify ideas and make decisions more efficient, but the complexity of a business often leads to a lot of unpredictability. Just as there should be no more than two core CTAs on a page, Principles need to be prioritized, and the most important one needs to be secured first when there is a “conflict”.

04. Easy to remember

Ask people on your team what Principles they have in mind. If no one can remember it or if it’s wrong then there’s something wrong with our definition. To impress everyone, first Principles should be based on the business and the problem that everyone can relate to. Secondly, we need to use it frequently in our daily discussions and decisions.

Airbnb’s Principles are Unified, Universal, Iconic, Conversational. This principle is deeply embedded in every design. Each time a new component is designed, they bring these keywords into the design to see if their design meets the requirements of Principles.

“When we design a new component, We want to make sure it addresses all four of those. If we didn’t have a set of principles it would be difficult to Agree on things. We want to make sure each piece lives up to it.”

— Roy Stanfield, Principal Interaction Designer, Airbnb

Human memory is limited, usually a group of more than 4 keywords will be difficult to remember. So we need to keep it to three to five as much as possible and make sure it’s easy to remember. Spotify has an interesting thing going for it: Their Principles are TUNE (Tone, Usable, Necessary, Emotive), which fits their business and is very memorable.

Earlier we talked about what Principles are and how to define what is good or bad. We can try to understand and break up your business or your competitors. In the rest of the article we will continue to discuss how to go about creating Design Principles that fit your business.

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 Principle?” and the first two weekly issues as gifts.

Click to receive a 50 yuan coupon for PinDesign membership program

Design System review:

  1. What is the Design System