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

  

/  28 Jan 2022

2022 Trends Forecast: DX & Project Management

2022 is here, and with a new year comes new trends, because in our industry, nothing stays the same for long. But that’s why we love it - new technologies, platforms and methodologiess are always evolving and we enjoy the process of learning and ad

Read more

What we think

  

/  18 Jan 2022

2022 Trends Forecast: Digital Media

2022 is here, and with a new year comes new trends, because in our industry, nothing stays the same for long. But that’s why we love it - new technologies, platforms and methodologies are always evolving and we enjoy the process of learning and ada

Read more