Design is more important now than it has ever been. In consequence, design systems have become a massive piece of what makes a company or product successful, especially in the hyper-competitive software market. These organizations have always relied only on user experience as a key differentiator. This demand for better experiences puts immense pressure on designers across the planet. They are compelled to take up more projects and work faster while delivering higher-quality products. This can create problems if there is no standardized design language to pull from, and that is where a design system comes in.
Design systems are all over now and you have probably seen this concept being thrown around ever so repeatedly. A design system is important because it can eliminate things like existing design inconsistencies and improve future workflows for both designers and developers as the company scales up. A design system could be something like a repository of reusable components with clear usage guidelines, shared among designers and developers. It should showcase all existing components with guidelines as to when and how to employ each component like ready-to-use codes.
The Necessity of a Design System
The concept of a design system includes standards for both design and coding, along with components that tie both practices together. You can think of it as a set of instructions and a Lego kit for everyone. If you are a designer or a developer, then this guide is for you.
Design does not scale effortlessly. Efficiency does not emerge from anything. Scaling design through hiring, without putting standards in place, is a fairy tale, not reality. With every new hire, new ideas for color palettes, typography, and patterns appear in the product, growing the inconsistency and increasing maintenance costs a lot. Every new hire increases the design entropy. There is only one way to stop the growth of chaos, which is committing to running a design system process. The gradual growth of a design system equals a gradual increase in consistency and speed of software development. Design scales, but it scales only can with a design system.
The Process of Creating an Effective and Lasting Design System
In this section, we will reveal a standard but efficient process of how to build a design system that works and, most importantly, lasts. We will break the process down into some steps so you can see more clearly what are the things that need to be done without exception in order to start building that system.
1. UI Inventory
You have to start by building a catalog of all the reusable components in your product. This includes patterns, colors, text styles, icons, and even grid systems. Creating an inventory of UI components will reveal inconsistencies in your design language and pave the way for a well-functioning design system.
2. Existing Components
To get a bird’s eye view of all the use cases you need to cater to, it is key to audit existing components in our product. Yes, every single component on every page. This is a crucial step though a boring one. For this, you can take screenshots and use Trello to organize them.
Each list, top to bottom, represents a page on your website. Within each list, different sections of a page are captured as screenshots and organized into cards. Each card is tagged with labels that represent each component present within the section of the page. The labels can be, for example, color-coded based on the type of component. By organizing in this way, you can easily search for specific pages or filter by components using the right panel and see all its current use cases across all pages. It also helps in identifying where there are design inconsistencies.
3. Organizational Buy-In
It is essential to get stakeholders and the design team on board before you start building a design system. You should definitely explain the inconsistencies that you discovered from your inventory building and how they adversely affect the user experience.
4. List Out Components
List down patterns and components you think you would need based on your research. This gives an overview of what needed to be reviewed so you can keep track and plan time accordingly. You can organize components into the following sections based on their functions: Buttons, Data Input, Data Display, Feedback, and Navigation. The list gets revised continuously and ticked off whenever we finish discussing a component. Of course, you can remove or add items, but these ones are rock-solid.
5. Plan a Timeline
Making a timeline helps to keep stakeholders and everyone involved in the design system updated on progress, as well as facilitate resource allocation. Patterns such as Typography, Colours, and Layout are important to discuss first as they laid the foundations on which subsequent components would be based.
With limited time aside from your day-to-day responsibilities, you can have two to three design system discussions weekly. Of course, this is an ideal situation. There can and will be often times when both product designers can be swamped with work and unable to take time out. On top of weekly discussions, you can also plan for the following steps: creating components as symbols on Sketch, designing pages for the design system, and for our frontend engineer to build these pages.
6. Create Design Symbols
As the discussions progress, you can start building your style guide. You can text and layer style libraries, and symbolised each component on Sketch while catering to its states and variations. You can also comb through articles and looked at other UI design kits to compare naming conventions as well as how they created nested symbols, etc, but there really is no best way of organization for everyone, just one that best fits your current workflow. Chances are that as tools get updated along the way, you will need to adjust your workflows accordingly to optimize the usage of these tools.
Bottom Line
If you want to do better as a designer, you need a well-functioning design system. Here is how to make a good one, so leverage this information and you will see the results in no time.
