Perhaps you’ve heard some whispers in a conference you attended or you’ve heard the words spill out from the mouth of a product manager, I hope so. Maybe you have even heard or read about the well known Material Design System from Google or even Apple’s Human Interface Guidelines. The most famous, controversial, feared, life-saver yet most in-demand two words in the English language are:
Well, you may already know what a design system is, or at the very least have heard the term before or searched the web for what it really means. At a basic level, a Design System is a cohesive set of reusable components representing a brand’s language, serving as an overarching guide for a team to follow as they develop their product(s).
It’s all about how these components can work together, and the rules that guide them.
First, let’s start by explaining some different terminology, you may have heard, so we can figure out how these things all work together.
Non-aesthetic parts of a design. Includes principles, tone and voice, grammar, etc. This tells both the users and the company who you are and what your narrative is.
Overarching guide to what the brand feels like.
The documentation for all the visuals. Includes all of the things that you think a designer would use: typography, icons, colours, illustrations, etc.
Outline interaction patterns, motion/animation, and experience guidelines.
Also called “component library”. Includes forms, form elements, images, navigation, overlays, etc.
Front-end re-usable code that developers use to build a product.
Design systems aren’t all the same, nor do they need to be because every company is different and has different needs, but these are the usual items included. So it’s not just a single style guide that’s been created within a design tool - in that case, you’re missing all of the guidance!
“Wait a minute, are you sure it’s called a “design system”?”
Well, you may have heard many names. Brad Frost calls it atomic design. Airbnb and IBM call it design language. The industry is still circling around the preferred name but they’re basically doing the same thing.
Other titles include such names as:
User interface library
The most common question I get asked by many people that work in digital products is “Why should we use a design system? Is this really for us?”.
While it might feel like you’re adding on another layer within your organisation, design systems can actually help you increase your efficiency. To better understand how this applies to any team, consider these questions:
- “Are you designing a product (or products) that has more than 100 screens? Will your product(s) grow significantly?”
- “Do you want your products to have consistent branding, look and feel, and experience? Does your product currently have 50 shades of grey?”
- “Do you want your product designers, user experience designers, and front end developers to work faster and save time?”
- “Do you have projects where there are lots of handoffs between designers and developers or many designers and developers work on the same project at once?
If the answer is “Yes!” to even one of the above questions, then a design system is probably right for your team! Working at scale, and increasing consistency and efficiency are the biggest benefits to creating and using a design system. It can save you a lot of time and money.
And as John Maeda says in his 2019 report, Design in Tech:
“We’re living in an era where there’s massive design debt all over the tech industry”
and one of the four ways he suggested to solve the issue is:
“Scale” a company’s design function through better managing/leading of designers and shareable design systems.
How timely! (Aren't you sold yet?). I will leave the rest of the three to read it on your own in his report.
So, to sum things up, the larger your team gets, the more important it is to have a design system. Design systems have the power to transform a typical organization into a powerful product design force.
Happy reading and keep on UXing!