This article aims to expose you to the benefits of design systems and how you can create one for your business.
What is a design system?
A design system is much more than a normal UI kit or a style guide. It is a single source of truth that establishes rules of interaction and visual narration.
First of all, let's have a look at how a design system differs from pattern libraries or style sheets: Altogether UI kits, style sheets, toolkits, and design principles build the entire design system. So, a design system is much more than only the typography, colour code, and font size. A good design system is reusable, well-documented (also for the front-end developers later) to speed up the design process and to save costs at the end of the day.
Why does a design system simplify your life?
“A design system isn’t a project, it’s a product serving other products” - Nathan Curtis
Presently, many companies possess a more developed design language, while others are still at the start of implementation. Still, every companies’ design systems have similar benefits. Let’s quickly take a look at them.
A design system that satisfies the needs of all platforms causes product alignment. It allows companies to ensure that their product remains constant on iOS, Android, and the web application. Moreover, if you are working with more than one designer on an application you both are aligned on all design aspects to keep it consistent.
Design systems usually offer a shared library of reusable guidelines and components. With that, building products becomes very swift. Thus, you and your design team get more time to invest in other aspects, for example, UX problems. Also, companies can put more attention on understanding users and their needs.
The more designers you have or are working on a product, the more chaos can come up. Design is not scalable easily and everyone has his own ideas for spacing, colour palettes, and typographies. Hence, one of the primary purposes of a design system is to increase the efficiency of the product development process which comes along with better cost-effectiveness.
Now, let's have a look at what you need to build your own design system.
Eight essential steps on how to create a design system
1. Find the pain points you and your team are facing
Imagine you and another designer are working together on an extensive trading platform that allows trading foreign currency as well as making transactions after a trade was accepted. You are designing the trading module and your teammate is taking over the transaction module. Without a design system, you are probably facing the problem that spacing, buttons, and colours are not consistent. Instead, you have many different types of buttons that all behave similarly. Probably your client will not be really satisfied with that inconsistency, because the "look and feel" of the designs is not really a complete thing. And at the latest, the developer has to deal with that as well. Developing a new but similar button every once in a while can be really time-consuming for him. Of course, there are many more pain points you could find. Thus, you might have a lively discussion with your team about that.
2. Find solutions to solve your pain points
When you know what problems you are facing, you can start solving them. Based on our example above, we would need a catalogue of all the reusable components in our product. So, the first step is building an inventory of all patterns, colours, text styles, grid systems, icons, and assets used in the design. Setting up an inventory can take a while but it clearly displays all the inconsistencies you currently have.
3. Sell your design system
When you have started with your design system you should invite your shareholders, the rest of the team, and the frontend developers to obtain their opinion about it. In the beginning, you can present to them the key pain points and inconsistencies you found. To increase their awareness it is recommendable to explain what disadvantages come along for the user experience and/or the software development process. Then you can show them your design system and how it could solve all the points mentioned above. Be prepared for questions that might come up. For such a presentation it might be useful to not fully elaborate a design system. If it is not approved, you have invested a lot of time for nothing. Hence, after the approval, the next step is to build a full design system with your team.
4. Set up the guidelines of your design system
Specifying design guidelines can be useful to assure that everyone is on the same page and you all share the same values. When discussing them keep questions in mind like "What issues does the system have to solve?" "How do new features contribute positively to the system?" "What design language do you choose - a playful or clean look?" "Do you use symmetrical or asymmetrical design layout elements?"
Let's have a look at the following key elements:
Build a colour palette
Colours have a huge impact on the UI design of an application or website. Primary and secondary colours are used to represent the brand or product and therefore strategic parts of UI design. Every primary colour should have a secondary one associated. Keep these things in mind when discussing the colour palette.
Agree on a common typography
It is always a good idea to start with a consistent type scale. Type attributes are controlled by values that are customized for the type family, font, case, size, and tracking. Therefore, consider the font and its size, weight, line height, and the different use cases (button text, headline, etc.).
Find common icons
To standardize the icons you would like to use for your application or website, you can find an icon library you want to use. This assures that you are always using the same icon style. If you would like to create your own icon set and are interested in more information about designing beautiful icons, check out our article: https://fintory.com/en/blog/understanding-the-principles-of-icon-design-for-user-interfaces
Standardise your style properties
Standardised style properties like spacing or grids contribute a lot to solve problems of inconsistency. You can align on a common spacing between input fields or common button heights.
So, after you agreed on common principles, communicate the key decisions and your guidelines to the rest of the company. It might make sense to set up a design handbook or a wiki page so that everyone has access to it at any time.
We at Fintory are currently working on a design handbook that has included all the single topics mentioned above. If you are interested in a design system for your mobile or web application, do not be shy to contact us at any time. We are here to help.