Original link: https://editor.leonh.space/2023/design-system/
This article selects a few of my favorite UI kits, some are CSS UI frameworks in the jQuery era, some are UI kits in the modern front-end era such as Svelte; some are complete design systems, and some are UI components that don’t talk about concepts library.
When it comes to UI kits, it’s hard not to mention these big guys, Bootstrap, Material Design, Tailwind, they are like uniforms, you can always see the familiar style between page jumps, there is no problem with the uniform itself, it’s just me I like the niche uniforms and a little more freshness.
For web pages, I can roughly divide them into design-type websites and data-type applications . For design -type websites , the design sense they pursue may not be satisfied by a UI kit. For data-type applications like ERP, focus on The most important thing is the development speed and richness of components. After all, the user’s demand for fancy forms is difficult to estimate. Under such a premise, a UI kit that is both beautiful and rich in components is particularly important.
For data-based applications, the adoption of UI kits or more complete design systems has become the mainstream trend. Major mainstream brands have also paid more attention to UI/UX after applying web applications, and have successively launched their own design systems in the past few years. , respectively IBM’s Carbon , Microsoft’s Fluent , Red Hat’s PatternFly , Salesforce’s Lightning , SAP’s Fiori and Oracle’s Redwood .
IBM Carbon Design System
Microsoft Fluent Design System
Red Hat Pattern Fly
Salesforce Lightning Design System
SAP Fiori
Oracle Redwood
Whether to use the UI kits from the previous major manufacturers depends on the project requirements and personal likes and dislikes. Here are some UI kits that I like.
UI kit selection
Tocas UI
Tocus UI has a clear style contrast, simple and elegant, it is a UI kit that can be matched with any front-end framework, it is worth mentioning that Tocus UI is a domestic product in Taiwan, if you like it, you can support it.
Formantic-UI
Formantic-UI is also a UI kit that can be matched with any front-end framework. It features rich components and a neutral appearance, which is very suitable as the basis for your own UI.
Glass UI
Glass UI is actually not a complete UI kit. It is currently only a CSS generator that helps us generate frosted glass effects. It is included in the selection because it is beautiful and practical.
Naive UI
Naive UI is a Vue.js UI kit, rich in components, easy to use, and the main color is green.
Element Plus
Element Plus is also a UI kit for Vue.js. It is very similar to Naive UI in terms of website files, component types, and design styles, except that the main color of Element Plus is blue.
Prime
Prime is a cross-ecological UI suite, including PrimeFaces for Java, and then PrimeVue for Vue.js and PrimeReact for React, which seem to be used by many people abroad.
Flowbite
Flowbite is a UI kit based on Tailwind. It is also cross-ecological. It can be used with front-end frameworks such as Svelte, Vue.js, and React, and can also be used with any HTML template system. The types of components are also quite rich.
Ant Design
Ant Design comes from Ant Financial. It should be the most well-known and widely used design system in China. Ant Design is also cross-ecological. In addition to the original React suite, there is also a Vue suite maintained by the community. There are many types of components. There are also many resources on the road.
IBM Carbon Design System
Carbon is definitely the most complete and systematic design system in the world today. Almost all UI/UX elements, including color matching, layout, and interaction, explain in detail how to do it and why. It can be used as a model of design system , and Carbon is also cross-ecological. There are native React UI suites, as well as various UI suites such as Svelte and Vue.js. In terms of design resources, there are also Figma, XD, etc.
AWS Cloudscape Design System
Cloudscpe is a UI suite derived from AWS’s own web UI. Considering the richness of the AWS web UI itself, Cloudscape can also meet the needs of most data-based applications.
Blueprint.js
Blueprint.js is a React UI kit with an experience closer to traditional desktop applications. Its component spacing is smaller, and more content can be filled in the same area, but it also means that it is not so friendly to the operation of mobile devices. Blueprint .js itself makes it clear that it is not mobile-first design.
Arwes
Arwes is a highly technical and stylized React UI suite, which is still under development. Currently, the components are not very rich, and it may satisfy some users who love Chinese-style large-screen BI.
Use the design system to seamlessly connect design and development
If you are like me, the main development field is data-based applications, and you also agree with the concept of not reinventing the wheel , then you should really seriously consider using existing UI kits or design systems on the project. The benefits they bring are multiple. :
- For the development side, you don’t need to spend time trying to improve the UI/UX details of some front-end components, and you can put more effort into business logic.
- For the design side, you don’t need to spend a lot of time planning the appearance and behavior of a single UI component, and you can focus more on higher-level UI flow and data flow.
- For the user side, what they feel is a consistent experience, and there will be no feeling of assembled goods.
With the blessing of these advantages, it brings faster development efficiency and better quality.
Another advantage at the business level is that we can complete a data-based application project in a shorter time than a team that does not know how to use the existing design system, when others are still engraving forms in the old way 20 years ago , we are already thinking about a higher level of UI flow, no matter from the trend of big factories or from our own advantages, using existing design systems or UI kits is already the new normal, we should embrace the new normal, for those who are still stuck The only result of the classicists who did it 20 years ago is to be surpassed. It is up to you whether you want to go to space or continue to kill pigs.
This article is transferred from: https://editor.leonh.space/2023/design-system/
This site is only for collection, and the copyright belongs to the original author.