Okay, but what actually is a design system?

Most of us will interact with multiple design systems every day without realising it, with some of the biggest brands using them as the building blocks for their digital products and applications.

To us at HOME, they’ve become an integral part of our DX team’s makeup; but to others it may just be a technology buzzword. So, we’re breaking down what a design system actually is and why they are so valuable for brands.

What is a design system?

To understand what a design system is, let’s unpick what a system is. We can define a system as a group of interacting elements that act according to a set of rules to form a unified whole.

Take our solar system for example, to put it simply we have eight planets (sorry Pluto) that are bound by many rules. But gravity keeps them all orbiting around the sun.

InVision’s handbook defines a design system as:

“A collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.”

Using our solar system example, the ‘reusable components’ refer to our planets. These are ‘guided by clear standards’ – meaning gravity. This is just one solar system, there are many more out there in space, and we can see these as our different applications or products.

Design systems are descendant of the traditional brand guidelines. But, they’re more complex, containing design elements, code, guides, and documentation to name just a few, with teams integrating them even deeper into their workflow.

Why a design system?

There are many benefits of a design system, here are a few reasons why we like them…

• Consistency

Much like a traditional set of guidelines, design systems help brands stay consistent by having a shared set of principles and rules – a visual language to build components.

These principles make it easier to create consistency with shared components and code across multiple products and platforms.

• Efficiency and scale

Design systems allow teams to be more efficient getting new products and features to market quicker. With an agile workflow and ready-to-go design and development components, digital products can scale at a much quicker rate, saving time and money.

• Improved UX and usability

Consistent UI patterns help to make digital products a lot more intuitive and predicable to use, creating positive experiences for users and keeping them coming back.

What might you find in a design system?

Though a design system can take many forms, and each one is crafted to the needs of the individual business, there are often many common items present in a design system. Here are five:

• Visual language – style guide

At the core of any design system is visual language. This includes things like logos, colour, typography, spacing and layout. It also expands into graphical elements such as icons, illustrations, and imagery.

• A UI (user interface) pattern library or UI Kit

A collection of design components; reusable building blocks that designers use to create the user interface for their products and applications. This usually exists as or a series of Figma or Sketch documents. The DX team at HOME have recently made the switch from Sketch to Figma. Keep an eye out for more content around this, as we’ll be sharing our tips for which platform is best for which kind of work.

• Development components, resources and tools

Much like a pattern library, development components are the code-based building blocks for development engineering teams to construct products and applications. Additional development tools resources are often integrated into a design system to help them along the way.

• Content guides

This includes things like tone of voice, grammar and mechanics, language, and naming conventions.

• Documentation and standards

You can’t have all the building blocks for a design system without clear instructions on how to use it. A design system manual for things like brand, experience, accessibility, best practices and component documentation is a must have.

Design systems we like

There are many great design systems to find on the web that are a useful source of inspiration and learning, helping us all create better user experiences.

Some of the biggest and best are Google Material Design and Apples Human Interface Guidelines, but we wanted to share a few of our favourite examples that you may not have seen before…

1. Gov.uk

We like it because It’s comprehensive and resourceful with accessibility at its core.

2. Audi

We like it because it’s bold and futuristic and is a reminder to us that UI can look different and feel cool.

3. Royal Canin

We’re immensely proud of the design system we created for Royal Canin. Royal Canin had over 50 brand websites across multiple platforms, all different in terms of style and experience.

We created consistency across each site, helping many teams save time and money on delivering projects.

 

If you want to know more about design systems or want to have a chat about how a design system could help your brand, drop us a line at tellmemore@homeagency.co.uk.

Written by:

Kieran Link Senior UI Designer

Category:

What we think

Date:

21/06/2021

You may also like

What we think

  

/  15 Jul 2021

Do you know your UI from your UX?

Do you know your UI from your UX? And your UX from your DX? There are so many acronyms thrown around in the industry, especially when it comes to Digital Experience. So, we’re going to break down some of our most used acronyms and what they each me

Read more

What we think

  

/  08 Jul 2021

How to make purpose more than a vanity project

Shortly before the Pandemic put a stop to such gatherings, I attended The Grocer’s 2020 conference, which was all about Brand Purpose. I arrived cynical. It was very hard not to, as in my years as a strategist, more than half of the businesses I’

Read more