Back to Insights

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

What do LEGO and UX have in common?
Design systems!

Design Systems have become THE hot topic amongst designers and, here at Reckless, we see design systems as an invaluable tool for us to utilise and implement into our work. So much so, that we have invested time into creating our own Reckless design system that we can adapt and personalise for all of our work.

This may seem like a familiar scenario. If your brand has been growing and evolving for a long time, with different teams working on different projects, your visual identity is constantly playing catch up. A design system solves this problem by bringing order to chaos! Design systems play a key part, especially when scale, efficiency and consistency are vital. It provides teams with a more structured way to build solutions for problems.

What is a design system?

“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

What are the benefits of a design system?

There is a wide range of benefits to using and maintaining a high-quality design system. We’ve already found that the benefits of implementing a design system can save time, improve efficiency and streamline the design process.


Speed Up Process

Our design system was lovingly crafted to contain hundreds of pre-built elements. This includes colours, fonts and icons that we can use ‘out of the box’ to wireframe and prototype solutions to problems, rather than spending time remaking common elements. This gives us more time to concentrate on what really matters which is solving problems for our clients and their customers.


Prototyping

Due to the flexible nature of the design system, we can quickly prototype ideas, test them with real users and adapt them off the back of our findings.


Eliminate Inconsistencies

We set things like type size, weight and font as well as brand colours and element styles in one central style guide. The styled components we develop are designed to work across multiple devices.  This allows us to use the same components for both desktop and mobile which ensures the visual language is consistent across all visual layouts. This is a HUGE benefit of the design system because the changes are quick, simple and easy to implement across multiple locations. The design system becomes your brand guardian for anyone working with your brand.


Communication with a Common Language

We use the components in our design system to communicate easily between teams. Once we have communicated the functionality, requirements and how the components should behave, it ensures all teams have a shared understanding.


Best Practice UX

Because we pre-define the initial components in the design system, we already have the best UX practices in place across all of our work. This is a HUGE benefit when dealing with e-commerce sites such as Shopify. Within our design system, we have a wireframe structure in place, specifically for Shopify, so we can create a seamless experience across our Shopify e-commerce sites.


What are the benefits of component design?

We have been using design systems at Reckless for over 12 months now. The benefits of component-based design within our work has been extremely well received by both the wider team and our clients. There is a misconception that component design makes work repetitive but this is not the case.

I recently came across an example with LEGO which demonstrates this concept perfectly…

How many ways can you combine six 2×4 LEGO bricks of the same colour?

The answer… 915,103,765!

Summary

Whilst components are essentially made up of the same fundamental elements, and UX best practice, we still have the freedom to experiment. 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.

Daniel Williams | Head of Creative