What is a UI design system?

In this post, 93digital’s own digital designer Fenella introduces the concept of ‘design systems’ and what purpose they serve.

---

There is an increase in companies updating their design process by integrating their own design systems when designing digital products. Airbnb, Uber, and IBM are some of the companies who have created UI design systems that enable designers to experiment with ideas and allow more focus on the user experiences as opposed to the visual elements of design such as typefaces, padding, and colour.

What is a UI design system?

A design system is a collection of elements that can be combined and reused to build different digital products. It consists of user interface (UI) components and a style guide including typefaces, colour, and padding. Using a system provides rules, constraints, and principles for designing a digital product.

A UI design system is a big box of UI Lego pieces that can be assembled in near-infinite ways. All the pieces may be consistent, but that doesn’t mean the assembled results will be.

Emmet Connolly, Director of Product Design at Intercom

Why is it necessary?

Emmet Connolly, Director of Product Design at Intercom, describes a UI design system as “a big box of UI Lego pieces that can be assembled in near-infinite ways. All the pieces may be consistent, but that doesn’t mean the assembled results will be. Your product is more than just a pile of reusable UI elements. It has structure and meaning. It’s not a generic web page, it’s the embodiment of a system of concepts.” 

Implementing styles and components consistently, from patterns and solutions proven to work successfully, allows the designer to allocate more time to the user experience aspect of the design. Done by using the design system in the following ways:

• Finding the right component, pattern or style option quicker
• Components or patterns can be reused in the same or a different digital product
• The design system creates a sense of guidance for the creators of the product – it informs the designer how to use a component correctly
• Components within a design system are updated regularly

Another advantage of using a design system is the ability to reuse components. This achieves a consistent look and feel between the brand and the product itself. Consequently, the user experience improves and you can begin to see growth in product value.

A design system is a ‘shared language’ between the designer and the developer. It enables the teams to collaborate more effectively. Creating a design system can require a fair amount of time and resource to begin with, but is worth it in the long run.

What makes a good design system?

• Natural – A design system should fit the culture of the team and be a natural part of the design process. It should gradually evolve over time with the development of the team’s products.

• Flexible – There should be enough flexibility in the design system to enable the designer to contribute freely to the design of the product but stay within the framework of the system.

• Consistent – The different designs within a system should contain consistency throughout. Proven in the design of a product as to whether it works coherently or not.

• Up to date – A design system should be kept updated and well documented for each team member of the creative process to use.

• Robust – When the design system is applied, there should be minimal flaws in the design of the final product.

• Effective – Using a design system should result in making the design process more cost-effective.

Conclusion

A design system is proven to be a good investment of time. Although some argue that it can kill the creative process, it is significant in the development of the process, long-term. It allows more time for prioritisation of user experience design with a focus on solving the clients problems.

Incorporating a design system into the process provides designers and developers with reusable components. This saves time and achieves a sense of consistency between the product and the brand.