What are design systems and why are they such a big deal in the world of digital services? We'll get you up to speed on the topic.
What are design systems and why are they such a big deal in the world of digital services? Would your business benefit from having one? We'll get you up to speed on the topic.
These days, most companies’ products exist in an increasingly colourful collection of different platforms, operated by an ever-changing set of people with different areas of expertise.Even in simpler cases, a company might have an application, a website and a set of marketing materials. Bigger companies might have to incorporate a dizzying amount of services built and maintained by a large staff.
So how does one manage to keep all this together without descending into madness and chaos?
Design systems are here to help.
Simply put, design systems are a collection of reusable components combined with clear instructions on how to use them in various situations. These components can be anything from visual assets and color palettes to UI components – or even things like recommended tone of voice for various situations.Ideally, a design system works in such a way that everyone working on the project will be able to easily create new content while being sure that everything stays consistent to the users and is easy to maintain.
Each design system is different because the goal is always to create the most consistent, fluid and easily maintainable system for the project at hand.
A great design system always features flexible and easily scalable documentation that let everyone in on not only how to do things, but also why they are done in a certain way in this particular company.
In the words of Github’s Diana Mounter, design systems are characterized by “rules, constraints, and principles, implemented by design and code”. Watch her eye-opening talk on the topic below:
Each design system is different because the goal is always to create the most consistent, fluid and easily maintainable system for the project at hand. But of course, there are certain high-level elements that most design systems have in common.
Visual language includes things like style, typography, the correct use of colour palette, layout, illustrations etc. The documentation should include clear instructions on how and when these should be applied in the product, and how they should be handled in different mediums.
Example: IBM's Design Language
Voice and tone for both the overall design and specific situations greatly dictate the feeling the users are left with. Does the vibe need to be formal or playful? In both visual design and copy texts, consistency is vital – regardless of whether you have 10 or 100 people working on the content.
Example: Mailchimp's Voice And Tone
Components are usually user interface elements, that can be used in different parts of the product. In web-based products, this might mean copying a few lines of HTML to implement the component. When the basics are documented well enough, the team can utilize the components and rest easy knowing that everything is done using the same logic.
Example: Google's Material Design components
Patterns define how common interaction patterns should work in your product. An example of this would be the way errors are displayed to the user.
Example: Google's Material Design patterns
“Having a shared Design System creates transparency so that everyone in the organization can see how design operates and what its intended direction is. Also, briefing new partners is more efficient, since the relevant content is readily available and it does not need to be created over and over again in an ad-hoc manner.
Design system needs to become an integral part of the working practices. This way, the team can work more efficiently and the Design System does not end up being an isolated documentation effort – which is typically doomed to become outdated and obsolete very quickly.”
— Mikko Ahlström, Suunto Oy
Benefits you might experience when using a design system:
A design system is also a great overview of your product elements, and it builds a more holistic view of how everything is connected.
Building a working design system also requires understanding its weaknesses.A design system is not:
Building a working design system takes time and patience, and most of all: utilizing it must be built into the company's culture. This can take time. A design system that is not actively used or maintained is not a very good investment.
A design system should also be built considering the organization and the individuals using it, so mapping out the biggest problems as the starting point is a good way to go. Building a design system can be incremental, or it can be a huge undertaking that involves a lot of people.
Building a working design system takes time and patience, and most of all: utilizing it must be built into the company's culture.
It is crucial to remember that the goal is not to build a design system and then forget about it. Rather, the mission is to find practical solutions to practical problems - and document the solutions well enough for them to be useful later as well.
However you decide to do it, design systems benefit from being built by a team that understands all of its aspects and how to combine it as a whole. This is true whether you decide to build one with your existing employees, hire new talent or hire a company to help you do so.
Do you need a design system – or need help deciding if you need one? Drop us a line!