Design System: When, Why, and How?
What is the design system?
A design system is a set of visual and behavioral brand traits, tools, and components that makes it easier to create, test, update products, and ensure consistency in their interfaces. In terms of interface design, this is a constantly updated library of UI elements and UX rules developed for this product, taking into account all its features.
Why do you need a design system?
As mentioned above, the design system makes it easier and faster to solve design tasks and support products. Its most important functions are -
- Ensure design consistency (uniform and predictable behavior of all its parts), which will increase its comfort for the user.
- Accelerate the process of introducing new functions by using patterns
- Reduce the number of errors in the design development
- To reduce the cost of mistakes in design development, which means a painless increase in the number of tests and experiments and an increase in design quality.
- Provide easy teamwork for designers
- Ensure effective transfer and accumulation of knowledge about project design
- Improve the understanding of the development team and designers
- Creation of clear and convenient documentation right in the process of designing.
Design System Development Plan
So, you have decided on this step. Where to begin? First, decide when to start.
When?
The design system will make you start creating BETWEEN the visual style stage and its scaling stage and continue throughout the product's entire lifecycle. This happens in stages. Basic atoms and molecules appear first of all — colors, icons, buttons, input fields, forms. The most successful solution would be to create a design system from 1–3 of the most complex and component-loaded pages.
The main mistake of some designers is to create DS, where there is no design solution yet. The first thing you should do is an attractive design, and then get to work with some layout structure.
If you start making DS from 0, it will limit your creativity, tie hand, and foot without a design solution. If you decide to do DS after all 126 pages of the application are ready, you will spend an incredible amount of time reworking ready-made screens of the same type. Remember that the main task of DS is to save the designer’s time and reduce the number of mistakes in the future, and not vice versa.
Amendment. 99% of projects do not need an absolutely non-standard set of basic elements (atoms &moleculs). Therefore, I often build my design solution directly on a ready-made set of icons, buttons, etc. — this does not affect my level of creativity.
What to do?
The design system is built according to the atomic design (by Brad Frost) and includes 5 layout organization levels — atoms, molecules, organisms, and templates.
Atoms & Rules
Any DS is built on basic elements — atoms and their behavior (rules). It includes:
- Typography System
- Colors
- Spaces
- Shapes (Border radius, etc.)
- Shadows
- Icons
- Images/Illustrations
The typography system
Typography influences design as much as color. You can design without images with great typography that is nice to look at, and you can kill even the most beautiful designs with typography. The font solution has four aspects:
- Selection of the font pair
- Scaling font styles
- Number of styles
- Correct combination and layout
It is important to create a single system of styles, limited in number and harmonious. We often take the type system Google Material Design as a basis. Material Design
It is great for web development, android development, and cross-platform solutions.
Apple has its own standard: Typography — Visual Design — iOS — Human Interface Guidelines — Apple Developer.
Thus, the choice will depend on the platform for which the development is going.
How much do you need?
My favorite formula at work is the Formula Design Material 2–3–13
- 2 typefaces (font pair)
- 3 faces in each style
- 13 styles
Font Pairs
Why a couple? Because the use of more than 2 headsets in one product design makes it uncomfortable. In the case of very complex and information oversaturated systems, it is recommended to stop at one.
There are tons of services for matching font pairs. Some of them
Each designer has his own “winners” — these are 10–12 favorite fonts, in which he performs all his layouts.
Colors
The most important thing for DS — we define the following set of colors -
- Background & Text — 60%
- Primary — up to 30%
- Secondary — around 10%
- Also, depending on the selected scheme (2 colors are too few in some cases; you can read about it), 10% of the color space can be redistributed between 3 or even more colors — the System Colors.
- Notification — reserved red, yellow, and green colors.
Next, for each selected color, you need to create its gradations, at least 3 — they will be needed for subtle gradation of the interface.
Never use pure gray for your product! It is made from Primary color, less often from Secondary or a color combined with Primary. Cold shades are preferred.
Grades of such a “gray” may need up to 10 shades. These are 3 dark (for text), 3 medium (for inactive buttons, icons, and text labels), 3 light (for the same purposes on a dark background), and the fourth “very light” background color of the plates.
Shape effects
Effects include the following properties
- Shadow (4 parameters — density, blur, distance in 2 coordinates, color)
- Transparency of objects (in%)
- Stroke (width, inner or outer)
The shadows (according to the design material) have a special role — they reflect the object's position in the 3rd dimension — the coordinate axis zed. The shadows (according to the concept of the design material) have a special role — they reflect the object's position in the 3rd dimension — the coordinate axis z.
It is necessary to describe all possible types of shadows, strokes, and transparencies and add them to the reserved styles.
At this stage, I put everything possible in the styles, and then, when creating pages, I adhere to the main rule of the design system.
All objects in the layout required are marked with a style — color, text style, and effective style.
This allows me to minimize the time spent finding and cleaning the layout from “random” colors, fonts, styles and replacing them.
Icons
Drawing custom icons is expensive and painstaking work, so I usually look for a ready-made set at the start of any project, which I supplement if necessary. Thus, I postpone the creation of new icons until the final stage of the design work.
Now, all that is required is to decide on the desired ** icon style **, find as complete a set as possible, and start using it. It is also essential to keep all the icons in one place to easily replace them or supplement the set. Therefore, I immediately use libraries of ready-made icons named by name — they are easy to use.
Icon Fonts
It is very convenient to use a library of font icons instead of a library of shape icons. Their advantage is convenience, both in design and development. Instead of a set of icons in the layout, you have only 1 component of the “font icon” type. The disadvantage is that such a library is technically easier to extend.
Layouts —Greeds, Margins, and Paddings
It is also important to describe all possible sizes of elements, their outer and inner margins, which will be found in your layout. I advocate the rule “Multiples of 4” — when all possible indents are divisible by 4. And for tiny elements — multiples of 2. You also describe them in the form of a table and illustrative examples.
Images & Illustrations
These objects are also Atoms. I recommend that you show and describe several images and illustrations that you will use as a reference when creating your layout. Then you can give this guide to an illustrator or photographer (or a content manager who will select illustrations and photos for the site/application so that he will rely on them as an example.
The guide may include
- image sizes
- examples of their use
- full valid color palette (it is often wider than the UI palette)
- visual style — the use of lines, fills, etc.
Border radius
The rounding system also belongs to atoms. Several fillet sizes can be used in your design. It’s important to describe them all in one place and stick to them throughout your layout. I often create a special shape component for this, which I use as a base element when building buttons, plates, and other rectangular objects.
Molecules & Organisms
Molecules are a more complex level of organization of interface elements. 2 or more atoms combine to form a molecule.
The most obvious example of a molecule is a button. It consists of “visible” atoms:
- Shape
- Text Lable
- Icon
And their properties such as:
- Text style
- Colour
- Indentation
- Fillets
- Shadows
An organism is a UI element consisting of at least one molecule and an atom, or only molecules. A good example is the search field.
Thus, all UI elements refer to either molecules or organisms.
A complete list of all possible UI elements can be viewed in the guidelines, for example, Material Design.
Important! Don’t try to recreate all possible UI elements in your DS at once. Better to compliment the set as you work with the layout. Try as much as possible to minimize the number of patterns used if they are not needed.
For example, if you are using an underline input field in one place, think twice. Is it worth it to also enter solid? This may be necessary, but keep it informed, not spontaneous.
Remember that expanding and complicating a DS is always easier than cutting back. The second thing that is important to do when creating a DS is to describe all possible states of each UI element and use only them. Figma has released the “Variants” update — the most convenient way to describe the states of components.
Templates
Templates are representations of the final design without real data. In essence, these are repeating structures of atoms, molecules, and organisms: banners, UI cards, tables, and even entire pages. In practice, 99% of complex products are composed of them. The more repetitive patterns an interface includes, the easier it is for the user to understand and use it intuitively without thinking.
Pages
A page is an application of a template. In an ideal design, each typical page of a site (or application) is described by a template, and all its variations are described by inheritance of this template. However, today this can significantly complicate the work with the design. Therefore, usually in DS, they are limited to creating templates for individual blocks.
As a result, you get a set of ready-made elements that the designer uses, like bricks and guidelines, to put together new architectural solutions.
What if you don’t make a design system?
I’ll share here with you a few terrible stories that I saw with my own eyes.
The story of one transfer of the project
A designer was replaced on the project. However, instead of immediately implementing new features, the designer has been collecting 50 shades of gray, purple, and green across the entire layout for a month (!). It also studied an incredibly large collection of various buttons, sliders, and input fields. Finds a lot of mistakes and redundant solutions. All of them demanded revision, without which it was impossible to continue the work. The trouble is added because all these solutions have already been put into the code, and now the developers face the same path. The company loses a month of the project’s life and about $ 10,000 for the simple “putting things in order.”
Conclusions: It’s better to maintain order and eliminate redundancy first using a design system instead of expensive and risky general cleaning when it starts to threaten the product’s life.
The story of one scaling
One project developed rapidly, and 4 designers were hired to develop it at once. The lead designer has compiled the key solutions used in the current product in a guideline. The designers said, “Okay!” and went to work. A month later, they created more than 60 new screens, dissimilar to each other, and even more unlike the original product. If they had a design system at their disposal, it would be absolutely easy for them to keep consistent fonts, indents, icons, and patterns. But she’s not there.
Conclusion: the design system will accurately convey your developments and painlessly follow the developed rules. It will allow you to hire any number of new designers and easily show them what objects have already been made and how they work. This won’t limit their creativity, but it will help keep the design consistent. Just eliminate the human factor.
The story of one mistake
One designer had already done a lot of work and then realized that it would be nice to change the layout’s typography. The current one was very shallow and complicated the user experience. He then calculated how long it would take to implement this solution (he did not have a design system and would have to change everything manually). And I decided not even to start.
Conclusion: whatever you do, the design system is your insurance company in case of a bad decision. And, believe me, everyone has them.
And there are hundreds of such stories. One designer has not done projects for a long time, and the volume of developments cannot be contained by one head. They work on products in groups; some people replace others, some ideas — others. That is why design systems are now such a necessary tool.
I hope this article was helpful to you. To know more about how we work or to hire us, please use the calendar to schedule a call.
