Design Systems – What are they and why do we use them?

Design systems have grown in popularity over the last few years. They can offer a means for consistent brand communication across multiple mediums and they can, with proper implementation, improve the relationship among designers, developers and product managers.

What exactly is a design system?

A design system isn’t something that can be neatly defined. A quick Google search will show a number of different definitions, some more extensive than others. But just because diverse people have varying ideas on what exactly a design system is, that doesn’t mean there’s not a common thread we can follow.

One thing almost everyone seems to agree on is that a design system is a holistic approach to creating a set of rules or guidelines, accompanied by a library of aesthetic elements, that catalogue a visual language for conveying the essence of an organisation or an individual.

They are a guide to representing that organisation or individual visually. They allow for the development of a consistent visual style when building everything from software and websites to traditional marketing materials and more.

What is an example of a design system?

A great example of a design system is Google’s Material Design. We actually wrote about it recently while discussing Material Design and Javascript Libraries. The Material Design system describes the rules behind the look and feel of digital elements within the Google platform.

While it describes how Google’s user interface (UI) elements look, feel and act, it’s also meant to be a jumping off point for other designers. As described in its introduction, Material Design is “a design system created by Google to help teams build high-quality digital experiences”.

In this way, it’s a visual language for Google’s digital products, but they’ve also made it available for other designers to use as a base, and many do.

What is included in a design system?

A design system can be more or less comprehensive, depending on who’s creating it, but there’s a few items you can expect to see when browsing design systems.

Design Principles

These are the broad strokes of the design system. Including the brand vision, value proposition and imagery, what should never be included and what should always be included to make the message consistent.

UI Components

Here we start with the more mechanical elements. This is how your tick boxes and calendar cards appear. How different header sizes display. How scroll bars look and act. That sort of thing.

UX Guidelines

How does the user experience your digital experiences? What sort of journey should the design system aim to take them on?

Code Standards

What the user sees is one thing, but a design system can also unify things behind the scenes. How should code be structured and implemented?

Resources

This can be anything from inspiration to templates to the building blocks themselves. A resource library can be an expansive thing and truly impactful if well maintained.

How do you start a Design System?

To start a design system you need some sense of a goal in mind. As Jared Spool said, “design is the rendering of intent” and the design system is the blueprint for any good digital product or service.

You can be lean and agile and looking towards an MVP rather than a finalised product, but you have to know which direction you’re going in.

From there it depends on the context you’re working in. Are you part of a larger organisation or beavering away in your own space? If you’re within a company, then collaborate! Share your ideas and invite new ones. Throw lots at the wall and see what sticks.

Once you have an idea of the look and feel and journey of your design system, you need to refine it. Turn it from a beautiful collage into a practical system. Don’t be afraid to start small, even atomic, be confident in your vision and lay out how and when ideas should be used.

Finally, let it live. A design system can be signed off, printed and set in stone, ready to be used as and when. But, the most effective design systems are living documents. They grow and change and adapt as input arrives and evaluation happens.

So here we are again, that’s a quick look into the world of design systems. Has it made you rethink the way you present yourself? Maybe it’s time to get the gang together and get creative!