A Simple Guide to Design Systems

What is a design system and why should you even care about it?

The short answer – because design systems save you both time and money.

The problem with bespoke design

Bespoke design is slow, inconsistent, and increasingly difficult to maintain. Design systems enable teams to build better, faster, stronger products in a shorter amount of time by making design reusable. Even with more money thrown in and more hands on the job, the reality is that bespoke design simply doesn’t scale, but reusability makes scale possible.

The concept of design systems has been around for quite some time. However, only recently have companies given them any attention as they realised their designs weren’t scaling as quickly as their businesses. With demand for good user experience, internal teams acknowledge this and build software with clean, consistent and thoughtful designs through human-centred and systemic approaches.

Lego - the ultimate design system
Lego – the ultimate design system

However, there still seems to be a lot of confusion around design systems, from clients, teams and even the designers themselves sometimes. There are so many different ideas and opinions on the internet about what a design system is and what it should be. One thing they do all agree on is the common goal – organisation.

There’s no right and wrong way to create a design system. All products are unique and have different requirements and outcomes. Design systems should be flexible enough to work on any project.

Let’s unpack what goes into a design system and how it all works together to give designers and organisations better products.

What’s in a Design System?

This is the complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve a set of standards. It contains but is not limited by:

Component library – What are the UI patterns and code components needed to build products coherently across devices?

Style guide – Another subclass in the design system, this static documentation describes the design system itself: how products should look and feel, use cases for UI patterns, correct typographic scales, etc.

  • Written content – How should the product’s interface copy look and feel?
  • Visual properties – What should the “skin” of the product look and feel like?
  • Product principles – What is the purpose and soul behind all the products?
Design components
Design components

A style guide on its own becomes outdated since documentation requires maintenance. A pattern library lacks the instructions and principles for coherent implementation. The design system ties everything together.

Design systems provide consistent, robust design patterns that can benefit the internal teams more than they’re credited for. It increases communication and understanding between disciplines, especially designers and developers.

The component-based mindset

For designers, they can break down the user interface into small parts rather than the web page as one entity, like Brad Frost’s Atomic Design. This component-based mindset allows teams to easily define and change components, much like Lego blocks. For developers, they can build and reuse these components which are easy to maintain and update. Aside from current teams, design systems provide a great onboarding experience for new hires. They serve as resources for new designers and developers to become familiar with – and locate patterns to use.

Frost's Atomic Design
Frost’s Atomic Design

More and more businesses are investing in digital solutions to either improve or fix their service, and they are very quickly learning that a good customer experience plays a big role in the success of their new digital products. Sign up rates are higher than ever but so are drop off rates. If your product is hard to use and confusing, there are another five products ready to replace it. That’s why it is so important to have a strong, consistent and powerful customer experience that allows the user to feel confident and comfortable using your product.

As the world moves faster, design systems will be the only way to keep up.

Why not drop into our Farringdon studio for a cup of tea? We’d love to hear about your digital challenges and tell you more about how we develop products for our clients with maximum efficiency by using design systems.