What is a design system?
A design system is a library of design elements and guidelines that can be reused to build any digital product such as a website, mobile app, or software.
It consists of a definite set of digital assets, design principles, documents, code snippets, articles, screenshots, examples, and components for designers to reuse, rebuild and adhere to. A design system is generally part of a UX/UI kit with documentation, instructions, coding, and language guidelines.
According to Emmet Connolly, product design director at Intercom, most design systems are pattern libraries with many UI pieces to be assembled, and they each have meaning and structure.
Why do you need a design system?
Creates a consistent user experience
The most obvious need for a design system is you want to maintain the same design look and feel across all your products. Your customers expect to get the same user experience and learning curve when they use your brand, no matter the medium. By doing this, you’re more likely to increase brand loyalty, gaining customers who are less likely to switch to your competitors because they are so used to your products.
Allows rapid design and development
Designers can instantly design products when they have reusable components with established principles and guidelines. Using design systems also lets you scale your products easily and reduce inconsistencies. Testing concepts and prototypes will be faster when you have design elements that you can easily adapt and reuse.
Document best practices and standards
A design system is also a documentation of the best standards and practices in your company. They help new and experienced designers to better understand and discover your philosophies, and industry-best principles of UI, UX, and product design.
What’s the difference between a design system, pattern library and style guide?
A style guide is a low-level guide that defines the style of your product such as typography, colour palette, icons, margins, etc. Meanwhile, a pattern library has combinations of reusable design components such as page layouts, gallery, menu, etc.
A design system is bigger than that and would have a pattern library, style guide, and other items such as technical specs, code, documentation, and design principles. In this regard, it is a universal UI/UX guideline for all the products under your brand, and not just one product.
What are examples of a good design system?
The biggest players in the market, like Uber, Atlassian, Airbnb, Dropbox, Shopify, Apple, and Audi are heavily investing in their design systems. It’s a modern approach to product design – putting design and development at the core.
Airbnb
Anyone who has used Airbnb to book a vacation trip is no stranger to how simple, fast, and easy it is to use the service and how visually attractive it is. Airbnb’s design system functions in parallel with streamlined product design that takes the chaos out of booking. Its world-class design system lets the company share its assets with the public, along with the story of how it came to be.
Atlassian
As a company offering a range of digital products, its design system maintains consistency and simplicity for users. It’s something all design systems can aspire to be. Have a look at the landing page and you’ll see why people are in love with the Atlassian design system. It’s well documented, comprehensive, and visually appealing for the market it serves.
Uber
Uber’s Base Web is a design system for their web products. It is open source and is used by other companies such as Sprinklr, Broadcom and Everbase. Their unique design philosophy covers a huge variety of components and coherent guidelines, which can be easily reused. Some of the best design system features include logo, brand architecture, colour, composition, iconography, illustration, motion, photography, tone of voice, and typography.
Apple
There’s a reason Apple has a lot of fans, and one of them is their design system. A simple, and intentional design is at the heart of the company’s design philosophy. The Apple’s Human Interface Guidelines is a comprehensive set of downloadable templates and guidelines for developers and designers to design third party apps for macOS, iOS, watchOS, and vOS.
How to build a good design system?
A well-crafted product design system creates a single source of truth. The following steps are a general guideline on how to create your design system if you already have a product.
- Conduct a visual audit of your product(s).
- Develop a visual design language consisting of discernible components of your digital product.
- Develop a UI/pattern library by collecting all parts and pieces of UI currently in production.
- Document every component, their relationships, architecture, and guiding philosophies.
- Host your design system on an internal website for everyone to access. Alternatively, you can share it to the public, especially if you’re running on open source.
Conclusion
The most important thing to remember is that your design system should be for users. To design the best products, you must have the right features and tools, and the right user experience for the right people. Designing for consumers would be different than designing for businesses. Therefore, get to know your target audience, research their challenges, and, finally, empathise to create a product that solves those problems.
