Today the design system is one of the main tools in any team of designers and developers. It defines how every reusable design element in a product looks like, from icons to page templates. The design system will help you simplify the creation of new layouts, page development, common understanding of the product components, and improve the usability of the product.
How design system could harm your product
But the design system is not a universal tool that will fit any product without changes. They come in different shapes and sizes, depending on the strategy of the product they were designed for. Before investing time and resources in creating and maintaining a design system, think about what specific purpose you need it for. This will save you many headaches later on. Never start building a system just because it's modern and trendy or because Google does it.
If you start it too early
When your product is just developing at the MVP stage, its strategy and objectives often change, and creating a design system would be a waste of time. It will not keep up with the development of the product and instantly lose relevance. It will take more time to support it, which is always lacking in the early stages of the product. In this case, there are other things more important than creating a design system.
If you start too late
When the product is an ancient zoo of design from different eras, the design system will help to collect all the elements in one place to understand the scale. But such a large library will be difficult to use, the flexibility of development and simplicity of design will disappear - all the advantages from which everything is started will disappear. Perhaps this is the case when a product redesign will save the day?
If you use a ready-made solution
The design system should be an individual solution adapted to the needs of the users. Popular design systems are not publicly available to be 100% used in your own product. The best way to use them is to learn from the experience of other teams. Look at the types of interactions, the hierarchy of components, how the documentation works. By looking at someone's internal design system, you can learn how to create your own and not copy someone else's work.
How to properly work with a design system
When creating a design system, keep two things in mind that you must decide.
- The design system must ensure consistent user experience and improve the quality of the product design.
- The component system should help organize an orderly and predictable development process and reduce the time it takes to create layouts using components and templates.
This should influence the success of your design system, not the beauty of shadows and gradients. The goal of a design system is to scale the work of the entire team in order to create products faster.
Arrange on shelves
A popular design system approach is the atomic principle, which describes the simplest UI elements (text, color, or spacing) as atoms, and the larger components as molecules (button or input form) made up of atoms. The idea is that as the system evolves, this approach leads to the creation of grouped components (organisms) and then to whole layouts, pages, or templates.
Adjust the flexibility of your library components and do not create too complex nesting, especially if the component is rarely used in the product. But don't go to the other extreme and create a whole zoo of slightly different elements.
Assemble a team
A good design system must be clear to the development team.
In a small team, it's easy to maintain consistency in components and templates. But as the team grows, knowledge about the use of components can change or be forgotten. This is why it is important to maintain up-to-date documentation for all components. You need someone to oversee the design system to protect it from destruction but not limit the creative process of creating a product.
It is very important for team members to feel that they are free to make changes. A design system is a tool for empowering creativity, not a set of rules not to be broken. Don't forget that one of the goals of the system is to improve team processes.
If the team has a complete library and up-to-date documentation on it. Every designer, programmer, analyst, or manager can form their thoughts and assemble a finished design from components without worrying about the details.
Where to begin
How the design system will look will depend on the product interface that solves the user's needs. Many designers make the mistake of starting their design system by creating buttons and components instead of focusing on building scripts. Only start creating a unified design language when you already have knowledge of user behavior and product objectives. Don't just draw pages or screens - create functions that people will use.
Start with the simplest and most obvious property - color. You will need a dominant color for a product brand that you need to build on to create a palette.
Also, take care of the colors for success messages and errors, these are common patterns in product design (usually green and red).
Don't use pure black #000000 for text, it's hard to read. Dilute it with a shade of color that matches the brand's main color.
The same advice applies to gray tones. Designers often don't use the #CCCCCC or # F0F0F0 grays. They give strain on users' eyes and seem lifeless. Most interfaces will require the following gray colors:
- Light gray for the page background;
- A slightly darker color for borders and dividers;
- Gray color for help text.
Try to start from one single font and pair it with another if you need to. Too many fonts are difficult to fit together on one page and difficult to use with a component approach.
Even if you use the same font everywhere, try to combine headings and body text harmoniously. Headings should be in contrast to each other but should not distract from the main text. You will need the following styles:
- Two or three main headings to define the hierarchy of text on the page;
- Multiple subheadings;
- Styling main text and body text;
- Text for captions, buttons, and footnotes.
To define text components, you will need to define styles for font size, letter spacing, and leading. For large headings, reduce the space between letters and lines to keep them from going apart. For smaller text, vice versa - let it breathe on the page.
Shadows and corner radius
Often, designers don’t include shadows in their design system and treat them as a visual device. But a haphazard approach to shadows leads to inconsistency in the user interface. Depending on their density, shadows add perspective to the interface, create visual hierarchy, and help the user focus on the essentials.
Try giving the shadows a functional meaning:
- Apply light shadows to elements with which you can interact;
- Create shadows when hovering over interactive elements;
- Add drop shadow to elements that float on top of the main interface;
- Focus the user's attention on the windows with large shadows. The larger the object, the more pronounced its shadow should be.
Corner radius can also be brought into the design system and used for components of different sizes and functionality. Small radius works well for smaller elements, medium radius for buttons and input fields, and the largest radius for cards, modals, and large components.
The rounding radius also sets the mood of the product. The rounded elements feel friendlier, while the angular interface gives the product some seriousness.
Buttons and icons
Buttons are probably the most important elements of a design system. They determine what actions users will take. Therefore, the appearance of the buttons should make it clear that it is easy to find, clickable, and what action it allows you to perform.
Don't forget about button states such as hover, focus, and inactive. Define them once and reuse them throughout the product.
Icons should be consistent (for example, have a fill or be outline) and harmoniously blend in line width with the fonts they are next to. Pay attention to the radius of the icons, their fillet angles, and correlate them with the lines of your fonts.
When you have defined the style of each of the small independent elements, such as colors, buttons, and fonts, you can start creating components - blocks consisting of ready-made ones. For example, a simple form will consist of the available elements: form header, input field headers, input fields, text within them, and form buttons. The process of creating components itself is not as creative as coming up with combinations of font pairs, but it significantly speeds up the process of building a design library of elements and the development of new functional blocks of products.
Components can be composed of lower-level components. So you have complex whole pages, completely consisting of ready-made blocks.
The easiest and cheapest way to place components on a page is to use a grid in multiples of 8px. Then the indents between them will obey the system (8, 16, 24, 32, 48, etc.), make a harmonious composition of the components, and help the development of other pages.
Do it Right
For creating design systems, Sketch has become a popular application among designers. It allows for reuse of styles and out-of-the-box symbols, which speeds up the design workflow based on the design system. You can learn more about Sketch's tools for organizing a design system in the following article: Sketch Tools for Managing a Design System.
We also post a useful list of ready-made design systems for inspiration:
- Adele. A collection of open-source design systems
- Material Design
- Fluent Design System
- Atlassian Design System
A design system is a useful tool when used correctly. Spending a little more time defining all of your components will save you a lot of time down the road. But don't get hung up on the idea that your design system is an entity in a vacuum by itself. It should be part of the product team's workflow.