What is a design system and why should I be using one?

A designer working on sketches both with paper and pens and a computer

What is a design system?

A design system is not one single deliverable but rather a collection of deliverables which can be updated / changed as the clients needs change. It should evolve constantly with the product, technology and company. We’re big fans of design systems because they give our clients the flexibility and freedom to implement consistent updates to their website or product in the future. Essentially we’re giving them the tools to do more themselves.

What’s the difference between a design system and a style guide or pattern library?

On the surface, they might look similar but actually, there are key differences to be aware of. A design system isn’t just a collection of assets and components you use to build a digital product. In its fullest form, it’s much more than a pattern library which is often nothing more than a sketch file containing a bunch of different content designs which can be assembled any way you like.

Just because the pieces are all consistent doesn’t mean the end result will be. The end result must be more than just the sum of its parts - it has to have structure and represent the overall design. That’s what a design system does - it contains different blocks and elements which are designed to fit together and be reused in new and different ways to always form a complete, consistent picture.

What should it contain?

Acting as a comprehensive brand guideline tool for designers and developers, a design system should always contain:

  • Patterns
  • Components
  • Guidelines (rules around font, colour scheme etc)

It should also contain more abstract information such as:

  • Brand values
  • Mindset
  • Shared beliefs
  • Manifesto (if applicable)

Design systems are good because they ensure that everyone is working from the same starting point and using the same information. As an agency which doesn’t offer development, we find that this makes for a smooth hand over from design to build, whether that’s to another agency or an in-house dev team. Here are some examples from the BBC design system which is readily available online. We link to it later on.

Spacing and layout guidelines from the BBC design system
A grid view of part of the BBC design system online


Key components of a design system

Purpose and shared values

Before starting to put anything together, it’s important to align teams around a clear set of shared goals. This helps building a vision and making sure everyone looks in the same direction. These goals will evolve and change with time and this is completely normal. If changes happen they should be communicated to all parties.

Values could for example be a manifesto that the company follows. Here, we follow a set of six guiding principles in everything we do - this would be our manifesto.

Natural Interaction six guiding principles


Got a design project in mind?

We specialise in user centred design for ecommerce and software products.

Find out more

Design principles

It’s important to remember that ‘design principles’ are more than just the visual aspect of a project. They are the guiding principles which help teams reach the purpose of the product thanks to the design.

Brand identity

The identity should be in line with the strategy and the objectives of the brand. When thinking about the brand you need to consider all the different elements which will be used. I’ve listed the common ones below : -

  • Colours
  • Icons
  • Fonts
  • Spaces
  • Shapes
  • Photos
  • Animations
  • Illustrations
  • Tone of voice
  • Sounds (if applicable)

These brand elements need rules which will be “the grammar” of the design system. This will explain how it all fits together and are guidelines which show good examples of their use.

Components

Components are at the heart of the design system. Everything mentioned above will help you create the components (usually in Sketch or XD) and ensure they are always consistent.

Conclusion

A good design system will ensure that the money you have invested at the research and design stage pays off in the long run. You will be able to refer back to it when adding any new content or making any decisions. Anyone who has used the BBC website knows they have a consistent design across all of the pages (including news, sport, weather etc).

This is an example of a design system, in this case BBC GEL (Global Experience Language). It contains a list of their components, brand language and ‘How to’ guides.

The design patterns guidance on the BBC GEL design system


Another very simple example of a Design System but consistent is the Government's own Gov.uk site.

The contents section of the Gov.UK design system showing the areas covered, including typography, colour and form elements

Having a good design system is something you can be proud of as an organisation. It goes beyond a simple asset library / brand guidelines and it grows and works with you as your company develops. And hey, guess what? We can help - get in touch and find out more.

Benton reading a blog post

Keep reading...

Sign up for our monthly newsletter to hear our thoughts and opinions on the latest UX trends in tech, design and research.