Before going forward! First, understand what is design system?

A design system is the single source of truth, which groups all the elements that allow teams to design and develop a product that can be assembled together to build any number of application and design system include things like.

1. Design Principle 
2. Design Token
3. UX guidelines
4. Development Guidelines
5. UI Patterns 

—- Remember UI kits is not a design system, It can be a part of a design system 

Know the difference

What’s the difference between a style guide and a design system?

The design system is more complex than a Style Guide and style guide is a simple collection of colors, typography and other elements which can help to identify the brand.

Most design systems is really just pattern Libraries: a big box of UI Lego pieces that can be assembled in near-infinite ways. Your product is just a pile of reusable UI elements. It has structure and meaning.

According to Atomic Designs

There are so many benefits to creating a design system like

1. Design System promotes UI consistency, allowing a user to get done what they need to get done
2. Allows for faster production
3. Allows for generating higher quality design 
4. Established shareable vocabulary between disciplines and different products
5. Make things easier to test UI
6. It provides a future-friendly foundation to grow and involve the system over time 

Focus on the right clients

How to sell a design system?

1. Before providing a solution, understand do we really need a design system? If yes then why do they need?
2. There are many types of client, you can offer them a design system

– Who are running the business in the last several years (2-5 years)

– Who are trying to extend their business

– Who have multiple digital products and now they are struggling with designs.

• Don’t try to sell design system to startup, reason first they just begin and they didn’t scale their business so it is very hard to sell, into problems and challenges.
• Lastly, understand the design system is a way to solve the design+business problems but you should find the right clients and right companies

How to define a design system

Understand the design system is not about working in isolation it’s all about collaboration!

If you are working individually, you may start from creating style guides and It’s a good start for an individual designer.

1. Color (Brand, gradients, accents)
2. Typography 
3. Spacing
4. Accessibility colors
5. Content

And then you can start building UI components.

Building UI components Example

1. Buttons
2. Models
3. Forms elements
4. Data Tables
5. On-off switches
6. Dialogs
7. Toolbars
8. Checkboxes
9. Dropdown menus 
10. Sliders
11. Steppers 

Conclusion –

In this blog, I have written a How to build a design system and difference between a style guide and a design system? And mentioned UI components like Buttons, Models Forms Elements, etc. Being an user research consultant you should have knowledge of design system.

Oodles Studio
The post How to build a design system appeared first on Oodles Studio.