Our approach to design systems

Design systems enable businesses to scale at pace. They empower teams by giving them a set structure to follow when building, helping them to overcome their product problems.

So having a design system in place that lets you reuse the same elements over and over again, providing users with visual consistency and a better digital journey is pivotal to achieving online growth.

A design system is a collection of reusable components that is defined by clear standards, that can be assembled to allow you to build any number of applications. It streamlines the process of building new pages on a website, and enables visual content to be created faster as the same components are utilised in multiple places.

Here are 6B’s top tips for making your design system work for your business.

Analysing and auditing current design systems

To better understand the design system you want to implement, you should start by reviewing and analysing your current approach to design. What design process does your company follow? What tools are currently used by your company for design? Only once you have answered these questions will you be able to decide on the level of design maturity you want to introduce.

Before you start building a design system, you need to oversee an audit of your existing approach. This will be key to helping you to identify any duplication, which will save your team time building an existing element from scratch that exists already. A UI audit will highlight inconsistencies and identify principal UI properties such as colours and fonts that will inform the content of your components.

Create a consistent visual design language

Chances are your business already has a set of established brand guidelines. The visual design language you decide on for your design system should be harmonious with these guidelines. It needs to adhere to the same rules you’ve set for colour, typography and imagery, as well as dictating guidelines for sizing and spacing. All of these design components will be visible on screen, so you need to think carefully about their role in your digital product:

  • Colour: pick a range of primary colours that represent your brand, with different tints and shades, as well as the use of white and black to give designers more options.
  • Typography: choose from two fonts, one for headings and body copy, and a monospace font to be used for code.
  • Sizing and spacing: A4-based scale is the recommended scale to use as it is standardly used for iOS, Android and web browser size formats.
  • Imagery: set imagery guidelines for images, illustrations and icons, and stick to them.

Designers and developers work in tandem

The design system you build will only be as good as the team you assemble to build it. Your team needs to be a marriage of slick design and cutting-edge tech, someone with good UX skills and UI-savvy designer to complement those skills.

The key thing to remember is that design and development both serve the same purpose – they are a means to help you solve problems in your design system. Nurturing collaboration will help you to marry the latest build approaches and technologies with a user focused design that looks great and is easy to navigate.

The more people you involve in the creation of your design system, the easier it will be to fuse the design library, which contains a repository of UI elements, and the documentation, which contains the code and is linked to the design library.

Expect hurdles and how to adapt to them

Much like any digital project, taking your idea from concept through to build will bring about its own challenges. Perhaps the design system will uncover accessibility issues as colour pairings have not been considered for visual impairments and don’t meet WCAG AA standards. These issues are bound to crop up and are entirely normal, what’s important is that your team keeps lines of communication open and has pragmatic conversations to resolve them.

Two things you can do prior to building to try and minimise these problems is to define the structure of elements and decide on a governance strategy. Try to replace single-use case components with ones that are reusable and scalable, ensuring they are modular, composable and customisable. Also, because these systems are dynamic and always evolving, you need to define how changes will be approved in your design system.

Find the right tools for the job

As the demand for design systems have increased with companies like Uber and Airbnb making use of the streamlined process, there has been a surge in tools to meet this demand. Axure, Sketch and Adobe XD are all popular, but at 6B we use Figma, which pushes a design system first approach and allows designers to build UI libraries that sync via the cloud.

We use Figma in conjunction with online brand guideline platforms that are useful for storing assets and are easy to update. Every project begins with setting up colours, fonts, sizing and spacing, so the design that follows sticks to those design principles. All of the components can be aligned with code to help with developer handoff, and we can access the design system through the Figma app which allows us to make tweaks across the entire design in one simple click.

Not sure where to start with approaching your design system?

At 6B create design systems that help streamline the creation of new content pages for organisations in various industries across the public and private sectors.

If you would like to know more about the tools, structures and strategies that we use, get in touch with us today.

Talk to us today

Looking to accelerate your next digital project?

Do you want to work for us or do you have an idea in mind where 6B can help?