How to choose a design system

ByeWind — Tue, 15 Aug 2023 00:23:18 +0000

Choosing a design system is not an easy task. The design system is like a foundation. The higher the building is, the more difficult it is to adjust the foundation. The difficulty and workload of changing the design system will increase with the development of the business.

One: What conditions should the design system meet

1. Versatility

I believe that product developers want to be able to release their products on multiple operating systems and do so with the least amount of work.

Therefore, the design system must be compatible with all major operating systems. For example, MacOS, Windows, Linux, iPad, iOS, Android, automotive, (watch), (Apple Vision).

It is necessary to use the same design system for the following reasons.

Reduce design and development workload.
Reduce the cost of post-maintenance. The product is upgraded, but it does not mean that users will also upgrade, so developers need to maintain multiple major versions at the same time.

2. Consistency

Each operating system has a consistent UI and interaction, and each type of product has a consistent UI and interaction. Maintaining the consistency of UI and interaction is an important driving force to promote the application of the design system. This helps to reduce the learning cost of users.

The higher the user's learning cost, the lower the user's willingness to use the product. In other words, the simpler the product, the easier it is for the user to try it out.

3. Scalability

The product will not remain unchanged from development to completion. Every excellent product has experienced long-term iterations. Therefore, if the design system is not scalable, the workload of adjusting the product will be very large.
For example, we originally designed a product with 4 first-level navigations. With the development of the product, the product has more and more functions. At this time, we need 5 or 6 first-level navigations, and later, we need second-level navigation and even three-level navigation. Now is the time to test the scalability.

4. Ease of use

The design system is also a product, and the simpler the product, the easier it is for users to try it out.

Two: What are the design systems that meet the above conditions?

First of all, no design system can be perfect in all these aspects, but we can always choose excellent design systems.

Apple Design System

Apple's design system

In the Apple ecosystem, Apple's design system has good versatility, consistency, scalability, and ease of use. However, Apple's design system on the desktop side will be different from Windows, and Apple's design system on the mobile side will also be There are some differences with android.

Material Design

Google's design system

This design system is mostly used on Android. The features on the desktop side are not obvious, and it is close to other design systems. On the mobile side, Material Design and iOS will have some differences.

Fluent Design System

Microsoft Design System

This design system is mostly used on the desktop. There are relatively few non-Microsoft products using this design system.

SnowUI

My design system

The original intention of the design is to create a design system that satisfies versatility, consistency, scalability, and ease of use, and can be applied to different operating systems, different terminals, and different types of products.

Apple, Google, and Microsoft have different understandings of product design. They are not willing to change their design logic to conform to the design logic of different operating systems. SnowUI is relatively open in this regard, respecting and following their design logic.

Other Design Systems

In addition, there are some design systems from other companies, such as Atlassian Design System, Lightning Design System, LINE Design System, Ant Design, etc. These design systems usually only support the same type of products. For example, Ant Design only supports mid- and back-end products.

Three: How to choose a design system

First of all, it is natural to choose a design system that can satisfy versatility, consistency, scalability, and ease of use.

Secondly, it is very important for new products to look new, especially in the IT industry. Because people always favor newer technologies.

Therefore, the UI of the design system should make the product look like a new product, and the UI should be simple so that users are willing to experience it.

Four: Finally, ask yourself a few more questions

1. When you see a design system

Is this design system complete, and is there an interactive guide?

Is this design system still maintained?

Can desktop, mobile, and different terminals use this design system?

Can different types of products use this design system?

2. When you see cool design

Can these designs be used on different operating systems and different types of products?

Will these animations affect the user's understanding of this feature?

Are these interactions consistent with those of other features?

3. When you see a design system with dozens of colors

How to use these colors, is there a usage specification?

How long does it take to learn how to use colors?

If I give the design draft to other designers, do they understand the logic and rules of my use of color?

About Me

Product UX/UI designer, 16 years of design experience, worked in Tencent and Alibaba, Now build SnowUI.

✺ SnowUI: snow.byewind.com

✺ Works: dribbble.com/byewind

Follow me: Twitter / Instagram / Dribbble / Figma

Which front-end framework should the dashboard system use?

ByeWind — Wed, 02 Nov 2022 17:04:07 +0000

Hello everyone, I am a Product UX/UI Designer, and now I want to develop the dashboard I designed into a dashboard system.

I learned that the current popular front-end frameworks are React, Vue, tailwindcss, etc., as well as products such as bootstrap.

My purpose is to develop the dashboard I designed into a product for sale, but I don't know which front-end framework to use, or a bootstrap theme. I don't know which programmers prefer it, and the current fashion trends, so I hope to get some help in this community.

The purpose of my design of this product is to make this UI framework serve both the middle and back-end systems and the front-end website.

Also, I designed the dashboard like this...

My designs are available here.

Forem: ByeWind