A Design System is a set of design guidelines, principles and a UI Toolkit specifically planned for a business. It is intended to manage design at scale using reusable components and patterns. The diagram below depicts its main features:
Source: www.uxpin.com
People often use the terms Style Guide and Pattern Library interchangeably for Design Systems; which is technically inaccurate. Style Guides and Pattern Libraries are sub-components of a Design System.
Need for a Design System
It’s a common belief that there is no need for a Design System if we are building a small application with a few screens, which is completely untrue. As we discovered above, a Design System enforces design rules for designers and developers to follow, which helps bring consistency to the product. It's not a throwaway. It’s something that will stay till the product is alive. People associated with the project would come and go, but this documentation will remain forever.
Here’s one such use case:
Consider an app in its initial stages where the designers were asked to create a popup dialogue asking for user confirmation whether s/he wants to log out or not. Here is an example of a popup menu asking for the same.
Several such popups are made in the first few iterations in various modules. Then came another requirement where a set of questions were asked, and users had to select one of the following options. Soon after this, a new designer was onboarded, and s/he developed another popup that looked like this:
This escalated quickly as there was no consistency and one too many implementations for a popup.
Whenever new popups are designed, many such questions arise.
If the user has to dismiss the popup, will s/he ignore it through the cross button on the top right corner? Or should there be a cancel button? The cancel button was suitable for the Logout Popup but clubbing it with options seemed irrelevant.
Also, it would have been better if the options would be in the form of Radio Selection.
How many buttons should be displayed per row? In some pop-ups, there were two buttons stacked vertically, and in some stacked horizontally to reduce the button area.
In some cases, the content description can be quite lengthy, requiring the designer to put constraints on limiting the popup height. Hence, it is decided that the height must be 2/3rd of the screen height.
When the designers review the application, they suggest it should be extended and clipped after the edges of the screen were hit, which was done in the next iteration as the project end date is nearing.
Further, the designers were asked to embed some input texts in the next iteration, which meant the keyboard would now overlap with the popup – meaning the entire design had to be revamped.
Had there been some guidelines or rules addressing these concerns from the beginning, the rework could have been avoided. Components are the heart of the application and should be reusable. Changing code for reusable components is a gateway for bugs to seep in.
Advantages of a Design System
A Design System is a one-stop solution for all the people involved in building an application. Hence it does not concern just designers and developers. For example, if the product manager or the business analyst is aware of the project’s Design System, they can clearly visualise what the proposed system will look like.
The Design System and guidelines also contain a UI toolkit. A UI toolkit is a set of reusable UI components which are really beneficial. For instance, it becomes way easier for the designers to create new screens by simply dragging and dropping them into their mockups. Also, it enables the developers to focus more on the functionality rather than tweaking the UI repeatedly.
A consistent and limited set of fonts and colours restricts new designers/developers from coming up with new styles. As a result, there is an overall visual consistency in the app.
Since the Design System is a guideline for implementation, if the app is further created for a new platform, the UI and UX are built keeping the rules in mind. Thus, the app looks and behaves the same on all platforms.
Steps to build a Design System
There is a good deal of opinion about the effectiveness of a Design System. However, it is not easy to build one overnight. Organisations may postpone it until they wish to unify the entire ecosystem comprising multiple products. In such scenarios, it is better to use components from existing apps. And hence the necessity to have a Design System in place to ensure consistency.
Following are steps to building a Design System for the above mentioned scenario:
1.Record Inconsistencies: Firstly, figure out whether reusing or tweaking the existing components could work rather than building everything from scratch. Identify all inconsistencies in the pre-created parts.
2. Getting the organisation's support: Once you have the entire list, start with identifying the number of persons and days it would take to generalise the components and extract app-specific data. Arrive at statistics on how this unification would eventually cut down work on our multiple apps. Derive a plan that divides the complete project into smaller parts and test these rigorously to avoid hampering existing deliveries.3. Building the colour palette: Look out for the inconsistencies in the colour palette. Even though the colours are visually similar, technically there are slight variations in the colour codes. Remove all the redundant codes. Try bringing the count of shades to as low as you can, and then keep variations of those key colours.
4. Building the typographic scale: A font combines font family, weight, line height, and other properties. Try applying these variations to as many segments as you can. Create a standard set of components and build a fixed set of font styles. As a matter of course, there should be a max of 8-10 styles used throughout the app, and it's pretty sufficient for almost every use case, be it heading, caption, subheadings. Too many styles bloat up the font library.
5. Implementing the icons library and other styles: There are a lot of assets throughout any app. While shipping the components in the form of a framework, bundling assets are complex, especially if each app has a different icon. Create a standard set of icons that can be added to the Design Library. For example, instead of using 3 separate icons for 3 different settings, try replacing it with a single COG icon and the settings name, which serves your purpose. Consequently, the app size will also reduce.
Try coming up with your own UI toolkit to import multiple quality apps in the library. Furthermore, any bug fixes or design changes are easily reflected in all apps.
Design Tokens
Whenever a Design System is constructed Design Tokens are used extensively.
As per Adobe “Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design: a colour as a RGB value, an opacity as a number, an animation ease as Bezier coordinates. They’re used in place of hard-coded values in order to ensure flexibility and unity across all product experiences.
Design tokens are directly integrated into component libraries and UI kits. They cover the various options of platform scales, colour themes, component states, and more.”
There are even several tools out there that can consume these Design Tokens and generate code for the targeted platform. This comes as a great relief to developers as they do not have to contemplate how to categorise colours, fonts. The designers can design these tokens and the developers can use the generated code in their preferred language. This eventually bridges the gap between Designers and Developers.
There are several tools and platforms for creating and publishing these so that it is available to all. These strategies will be discussed comprehensively in Part-2 (coming soon).
Some Design System Available (Catalog)
Design System is a concept that helps bring consistency to product development. Popular products or platforms have published their own Design System. Below is the list of some of the most popular and available Design Systems-
4.Apple Human Interface Guidelines
These brands have just about thought of all the corner cases to make their products look and feel consistent as well as appealing.
Conclusion
A Design System is a wholesome platform with a set of deliverables that helps companies develop various products. Once built, the Design System should be maintained and improved just like any other product, keeping designers, developers, managers at the heart of its approach. The more involved people are, the more effective the system will be, which will eventually lead to better products.