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

  

/  30 Sep 2021

Getting back to the great outdoors

Out of Home (OOH) is one of the oldest advertising mediums in the world, and whilst much has changed over recent years with the growth of Digital OOH and innovative creative; there’s still plenty that hasn’t. The channel was seeing continual Y

Read more

What we think

  

/  22 Sep 2021

Is TikTok part of your social strategy?

Love it or hate it, there is no denying that TikTok is a force to be reckoned with. It is the fastest growing social media platform to date and boasts more than 800 million monthly users already. Its popularity in 2020 saw us through numerous lockdow

Read more