What is a design system

What is a design system and why is it so important?

By Dan Williams, Head of Creative at Reckless

4 minute read

Design systems have become a hot topic amongst brand marketers and designers. They’re a great way to bring your brand to life whilst maintaining design consistency and creating a shared vision across teams.

Design systems have become so valuable here at Reckless that we’ve created our own, which we adapt and personalise for different pieces of work. You may be considering doing the same thing, especially if your brand has been evolving for a while and you have various teams working across different projects.

In this blog I’ll explain what a design system is, the benefits of implementing a design system and even, what Lego and user experience (UX) have in common (you read that last bit right…)

What is a design system?

Here’s the perfect definition of a design system from software company Invision:

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

Invision

The purpose of creating a design system is so you can maintain brand consistency across projects. This includes everything from colour palettes and typography to components and spacing. Having one design system brings order to chaos because it enables multiple team members to manage your brand in a way that brings it to life, whilst keeping everything aligned.

Here’s a short video of our design system in action

What are the benefits of a design system?

There are a wide range of benefits to using and maintaining a high-quality design system. For us, we’ve saved time, improved efficiencies and streamlined processes both internally and for our clients.

Here’s a quick overview of the different benefits you could enjoy by implementing your own design system:

Speed up processes

Your design system can contain hundreds of pre-built elements including colours, fonts and icons. Having these in one place allows you to take them straight ‘out of the box’, and use them for wireframing and prototypes. This will save you time and resources remaking common elements over and over again.

Prototyping

Due to the flexible nature of design systems, you’ll be able to quickly prototype ideas, test them with real users and adapt them off the back of your findings.

Eliminate inconsistencies

Design systems allow you to create one central style guide with a set font type, size and weight, as well as brand colours and elements. You can also design different variations for desktop and mobile devices, so your visual language is consistent across all layouts. This is a huge benefit and these changes tend to be quick, simple and easy to implement.

Communication with a common language

You’ll really start to enjoy the benefits once you’ve explained to your team how your design system works and why it’s so important. Explain the functionality, requirements and how the components should behave, so everyone has a shared understanding. Your design system will become your ‘brand guardian’ that keeps everyone on the same page so your brand looks and feels consistent.

Best practice UX

Pre-defining components in your design system helps you ensure a consistent UX across your website too. For example, in our design system, we’ve created a wireframe structure specifically for Shopify, so we can create seamless experiences for each of our clients’ websites.

Here’s an example of some website components we designed for Castle Green Homes.

See how everything looks aligned and on brand? From the colours and icons to shapes and spacing – it all comes together as a result of the pre-defined components.

So, what do Lego and UX have in common?

Well, there tends to be a common misconception that having pre-defined components makes design repetitive, but in our opinion, this is far from the truth. I recently came across a stat which perfectly explains why we feel this way…

How many ways can you combine six 2×4 LEGO bricks of the same colour? The answer is 915,103,766!

Summary

Whilst components are essentially made up of the same fundamental elements, and UX best practices, we still have the freedom to experiment. The component-based design gives us the time and flexibility to create beautiful and interesting experiences within our work by using these building blocks. What does remain consistent is the user experience and a design system is the perfect tool to enable us to do this.

Read more blogs

4 UX tips to boost website sales
4 UX tips to boost website sales
In 2023, nearly a fifth (19%) of global retail sales happened online, and that number...
Web development
Google-phasing-out-third-party-cookies-
Google phasing out third-party cookies: impact and actions
Learn how the phase-out impacts marketing, practical tips and tactics to adapt....
Web development
Email vs push notifications vs in-app messaging: which has the highest engagement?
Email vs push notifications vs in-app messaging: which has the highest engagement?
Which do you think performs the best? ...
Web development
Liverpool-digital-marketing-agency-Reckless
Reckless shortlisted at Prolific North Champions Awards
We're up for Web Development Agency of the Year at the Prolific North Champions Awards!...
Reckless news
Tips for selling on amazon this Christmas
4 tips for selling on Amazon at Christmas
Tried and tested tips for selling on Amazon over the festive season. ...
Online marketplaces
How to increase organic social media engagement
How to overcome the decline in organic social media engagement, plus content ideas....
Social media
3 common social media mistakes to avoid
A staggering 320 million new users joined social media between January 2023 and 2024. With...
Social media
3 signs your website isn't performing and how to fix them
3 signs it's time to update your website content and how to fix them ...
SEO and content, Web development
2024-digital-marketing-predictions
Our 2024 digital marketing predictions
The trends we see shaping the marketing landscape in 2024. ...
Paid media, SEO and content, Social media, Web development
Reckless-Dcypher-Uk-ecommerce-awards
Reckless wins at UK E-commerce Awards
We took home best Beauty, Health and Wellbeing website for DCYPHER...
Reckless news