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

PPC agency Liverpool Reckless
What is paid media?
How to manage and measure success, plus examples and FAQs...
Paid media
Event recap: The Marketing Social Liverpool
Head of Marketing and Performance Matt Tilling was invited to speak in Liverpool about UX optimisati...
Reckless news
Liverpool-digital-marketing-agency-reckless
Reckless expands to Liverpool following four new hires
We've taken up office space in Avenue HQ to accelerate growth plans....
Reckless news
What is Google Consent Mode V2 and why do you need it for targeted ads?
Here's exactly what Google Consent Mode is and why updating to the new version is crucial for serving targeted ads...
Web development
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
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
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
Google and CloudFlare survive biggest cyber attack
The 2-minute attack generated more requests than the total number of article views for all of Wikipedia in September....
Web development
How to reduce e-commerce shipping costs
How to reduce e-commerce shipping costs
How to cut shipping costs without compromising quality of service...
Online marketplaces, Web development