Having recently posted a piece about MVPs and prototypes, we find ourselves on a rather fun mission to educate, share and disambiguate some of the trove of technical terminology that’s out there on the interweb. Generally, our busy clients have more than enough to think about without having to turn to Google every five minutes to decipher the digital dialect.
So, what exactly is a design system? In lay terms, a design system is a set of rules that determines how a web application looks and (to some extent) behaves. It’s about aesthetics and semantics working together to provide a consistent user experience.
What does a documented design system look like?
Design systems must be well documented. Otherwise, they’re just ‘hope’. Typically, a design system will itself look like it’s been built to a strict design system! It will be clearly laid out, comprehensive, and will contain examples of each scenario.
Since it’s better to show than to describe, here are some publicly available design systems. No doubt many others exist for internal use, behind the virtual castle walls of companies around the world.
- IBM’s Carbon Design System http://www.carbondesignsystem.com/
- Quickbooks’ Design System https://designsystem.quickbooks.com/
- Material https://material.io/
- UK government https://design-system.service.gov.uk/
Why design systems are great for developers
Developers love (or will learn to love) design systems, because a good design system removes the need for them to think too hard about what to do. They can focus on the rocket science, instead of having to make decisions about how to style a dialogue box, or alert message. What’s more, the system they’re building will look great, right off the proverbial bat.
Why design systems are great for users
Guess what? It’s pretty much the same reason as for developers. It reduces the need for users to have to think too hard about what to do. If a screen is laid out consistently, with clear, semantic styling to apportion the right meaning to buttons, headers, navigation elements and other interaction points, it is much easier to use. Simple things – such as always having the save and cancel buttons the same way around in a warning box – can mean the difference between success and failure.
Why design systems are great for platform vendors
Established SaaS vendors who allow third parties to develop add-ons, extensions and supplementary tools will have established some sort of design system. This serves to protect their brand and prevent supplier solutions from turning up in shabby kit, which lets the team down.
I’m a business person, not a techie. Why should I care?
This all sounds a bit techie, so why should you care about design systems?
Well, because in understanding what a design system is, you’ve just understood how to dramatically increase the chances of delivering a high quality, easy to use professional digital system, with a consistent visual design language. That should be reason enough.
If your enterprise has a system already, then great. We can work with that. If you’d like us to work with you to establish and document a design system from scratch, we can help with that too.
A word of caution!
In the interest of balance, we shouldn’t overlook some possible downsides, so make sure you consider the following…
i) for some, having multiple systems all using exactly the same design system (for example, within an enterprise environment), may result in ‘application blindness’. Users may be disorientated and find it hard to distinguish one application from another. There are some neat ways to handle this, that won’t undo or violate your hard work.
ii) building out a design system is no small undertaking. It’s a project in itself. Furthermore, what you’ll end up with is a product, which will in itself need nurturing, policing and evolving.
As always, if you’re still not sure what we’re on about, or if you’d like some advice on design systems, then get in touch – we love hearing from you!