2022 is the year of Design Systems
Reasons you (and your company) should use Design System for your next digital product
Nowadays web applications are integral parts of our lives. There is an app for everything we need: bank transactions, shopping, bureaucracy, medical services, etc…
In the last decades, the usage of the internet has changed and so have web applications.
Today, crucial parts of web pages are the UI (User Interface) and the UX (User Experience). It does mean that companies are more interested in how their site looks and how a user interacts with it.
Several years ago, before the internet became so popular, the UI and UX of websites weren’t as important as they are today. Companies were more interested in how a site worked than in how it looked.
But then the internet became widespread and companies started to develop more elaborate apps at UI and UX levels, and users slowly began to get used to it. So, more and more companies started to follow this trend, to keep up with the demand. Nowadays, apps with bad UI would get no attention from users, because now they are used to apps with simple, comprehensible interfaces.
Thereafter companies developed a lot of different “strategies” to simplify and improve web applications development.
An important breakthrough has been the introduction of the Design System.
What is a Design System?
There are many definitions of what a Design System is. The one I like the most, because I think goes directly to the point, is:
A design system is a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications.
Design Systems also include:
• color palettes
• icons libraries
• typography styles
This allows a developer to compose components in different ways, building consistent applications, almost effortless.
In particular, over the last few years, remote work has spread widely, both for Covid-19 and the diffusion of collaborations between teams located in different cities or countries.
So, Design System is a great help in these situations, when communication between teams is limited, because following the same standards rules and using the same components, prevents the need to talk often with the rest of the team.
Also, developers should use reusable components, avoiding building new ones, for an important reason: to reduce the time of coding.
Sparkbox: a case study
A Sparkbox study had confirmed that Design Systems improve developer efficiency and design consistency.
In this case study, the Sparkbox team tested eight developers to code a form, at first from scratch and then with a famous Design System: IBM’s Carbon Design System.
They noticed that Carbon made the coding of the form 47% faster than coding it from scratch (2 hours versus 4.5 hours).
It does mean that the usage of a Design System in the development of large web applications would significantly reduce the development time and costs, avoiding inconsistency.
It all started with the Atomic Model
Design System is an evolution, or rather a derivate and elaborated side-effect, of the UI design based on Brad Frost’s Atomic Model.
The main concept of this model is breaking down interfaces into smaller components, such as organisms, molecules and atoms.
The five levels in an atomic design are:
- atoms: the basic building blocks of matter, such as buttons, labels, input
- molecules: a set of atoms. For example, input form (a combination of two atoms: a button and an input)
- organisms: a group of molecules that form a section of an interface, such as the top bar
- templates: sets of organisms that form pages.
So, you can build a web application, starting from simple and reusable components and then putting them together to create more complex ones. In this way, the process is easier and also faster.
(Source: https://bradfrost.com/blog/post/atomic-web-design/)
Famous Design Systems
Since the concept of Design System was introduced, some of the most famous companies made their own Design System. Here are some examples:
- Microsoft developed Fluent UI, a collection of UX frameworks for building apps for different platforms such as macOS, iOS, Windows, and Android. Sources: https://developer.microsoft.com/en-us/fluentui#/
- Google introduced Material Design, its Design System designed for Android, in 2014. It helps developers to build applications for Android, iOS and web.
Sources: https://material.io/ - IBM developed Carbon, an open source Design System with design tools and resources. Its purpose is to help build complex Design Systems. Carbon is available for React, Svelte, Vue.js, and Web Components. Sources: https://www.carbondesignsystem.com/
Main advantages of Design Systems
It brings order into your product:
Design Systems make your product more consistent. In fact, using reusable components is great because you don’t need to re-write the code of components every time you use them. So you avoid mistakes and inconsistency due to different styles in the code. Every element will have a unified style and this leads to a product with a great User Interface.
It helps you to code faster but maintain quality :
With components ready to use, you’ll save time while coding, because you don’t need to build them over and over. All you have to do is put existing components together to create your pages. This also means that developers can focus on more complex problems, avoiding disorder and bugs due to hasty development.
It increases business value:
A McKinsey & Company’s report confirmed the correlation between Design and business value. This study reveals that design-led companies have more than 50% higher revenue and 32% higher Total Shareholder Return (TSR) compared with other companies.
(Source: https://www.mckinsey.com/business-functions/mckinsey-design/our-insights/the-business-value-of-design)
Good documentation:
Design System guarantees good documentation of the product. For example, this is important because it allows new developers in the team, to learn faster about the system.
To maintain brand personality:
Brands that don’t follow good style guides while developing different apps, end up with inconsistent products. Apps are different from each other and customers may not associate them with the same brand.
Google, Apple, Microsoft, and other important companies, follow the same style while developing their apps. You can easily associate two apps to the same company just by looking at the style, without any direct reference to the brand. Also, a new app of one of these companies would be easy to use from their customers, because users already know what an icon means, how pages are structured, where the settings might be, etc…
So, following style guides is important because it will be easier for customers to navigate in an application similar to one they already use, and also they can recognize if different apps belong to the same brand or not.
More and more companies are focusing on the UI and UX of their products and Design Systems are a good choice to achieve good results, saving resources.
You can create your own library and guidelines with the help of tools such as Figma or Sketch, and Storybook. Building a new Design System might seem difficult but with consolidated ideas, good knowledge of the domain and what the customer wants, you can build a product that reflects the identity of the company and what it wants to communicate.
Else, if you are new in the world of design, using Design Systems from other companies (Carbon, Material Design, etc…) could help you to explore and learn how it works, in order to create your own ideas on how you want your product looks like.
Take a cue, but create your own
There are many low-level libraries to help you build your own Design System. Rather than customizing pre-built Design Systems, you could find it easier or more straightforward to start almost from scratch by making leverage on libraries that helps you with low-level components like:
- ReachUI: it is defined as “Reach UI is an accessible foundation for React applications and design systems.”
The main goals are: accessible, composable and stylable.
(Read more at: https://gist.github.com/ryanflorence/e5c794e6093d16a69fa88d2112a292f7) - RadixUI: it is a low-level UI component library focused on accessibility, customization and developer experience.
(Source: https://github.com/radix-ui/primitives) - HeadlessUI: this is a library with unstyled, fully accessible components, designed to be integrated with Tailwind CSS.
(Source: https://headlessui.dev/)
I hope you found this article helpful and that it helped you to understand the benefits of a Design System.
If you liked it, please give me a follow!
