How to create a design system to unite your collaborators and cultivate consistency

There are over a billion websites on the internet, often containing hundreds of web pages within them, and this number is increasing every day. Alongside this growth, the speed and scale of which these UI screens need to be created is also increasing.

This need for speed means organisations and agencies need tools in place to help streamline their design processes and harness continuity between collaborators, or things can easily get out of control. Cue the design system.

So, what is a design system?

A design system is a comprehensive library, consisting of styles, components, rules and patterns designed to be reused time and time again, but multiple teams to create cohesive digital experiences.

They ensure visual consistency, facilitate design at speed and scale, and boost efficiency by streamlining monotonous design and build tasks.

Why are design systems important?

Design systems are undoubtedly a valuable tool for any design and development team when executed well.

The design system goals are to:

They create visual consistency across all digital products and platforms

An organisation’s digital presence or website can grow and develop, often needing to be worked on by multiple different people and parties. A design system unifies these digital experiences by giving all the different parties access to the same elements to use and reuse in their UI screens, it gets them all singing from the same hymn sheet you might say. Without an effective design system, these experiences can easily get fragmented.

Make designing and building faster and more cost-effective

By having this set of reusable assets to hand and ready to apply, there’s no need to start from scratch each time or create the same component over and over. That means projects can be designed and delivered quicker than if a design system wan’t available. Everyone’s happy.

Free up designers to focus on more complex problems

Considering all the basic design decisions like “what font should I use for headlines” are already made and ready to use, UI/UX design resources have more time available to focus on the more complex UX problems, such as user-journeys.

Align internal teams for better collaboration

As a design system acts as the ‘Bible’ of the user interface, miscommunication or confusion is massively reduced between teams of varying responsibilities. There’s total transparency of what should be used, where and when. If a website needs a new form, bingo, the design system will tell you how it should be structured and how the inputs should appear. No unnecessary debates or questions.

Facilitate evolution

Design systems are an evolving entity, they consistently grow and develop as an organisation’s online presence develops. If for example, an organisation goes through a change to their branding and identity, a design system will really help speed up how that change is implemented online, update the design system first and you’re halfway there!

Design systems vs brand guidelines

Whilst they share a similar purpose, to ensure consistency, design systems aren’t the same as brand guidelines. A design system will, however, be determined by brand guidelines.

Brand guidelines are the toolkit to police how designers, marketers and staff communicate a brand and its values, both visually and verbally across all media channels. They are developed to help the people who use them portray the feeling that the brand wants its audience to experience.

Whereas a design system is a much more practical tool focused on how that brand is experienced online, through a shared library of components and styles for designers and developers to use to ensure a brand’s digital presence is consistent. Brand guidelines might say what font should be used, but a design system will go further, making rules about what size and where that font should be used.

A design system is a bit like those building toys ‘K’NEX’. A kit with a select number of pieces, but infinite ways to put them together.

What makes a successful design system?

A design system framework needs two key areas to be successful.

1. UI library

This is the repository in which your UI elements are kept and managed, this is split into three areas:

Styles

The style guide is the design system documentation which generally focuses more on the branding elements such as colours, typography or illustration, providing specific guidance on how and where they should be used. Accessiblity is a key consideration for any good design system and these styles will have been testing against accessibility guidelines, making sure the brand experience works for people of all abilities. This area of the design system is informed by and works alongside brand guidelines, which can help support content, through tone of voice or brand messaging.

Components

The components are a suite of various reusable UI elements, ready for a designer or developer to use to build up consistent UI screens. These come in two forms:

• UI Kit
  For designers, this is a file created using a design system software, such as Adobe Xd or Figma, and contains a library of pre-designed components and styles ready to ‘drag and drop’ into UI screen designs. Need a text input? Bosh, it’s there!
• Component library
  For developers and collaborators, the component library is an online framework which houses all of the pre-built UI elements with visual examples and code snippets ready to copy and paste. These components will already be rigorously tested and come with guidelines on how these components should be implemented. So there’s better consistency in how websites and user experiences are being developed.

Patterns

Patterns are the design system architecture for how individual UI elements are grouped together for specific user-focused tasks, layouts or templates. Examples include content structures such as forms, or layouts and templates like mastheads or cards. Generally patterns will include a visual example of these groupings, but also explain what the components used are for and when they should be used. Like components, patterns are designed to be re-used time and time again.

2. Design system team

The UI team are the people who manage and update the design system. Here at Honcho, our design system team consists of a UI/UX designer and a front-end developer. The designer is responsible for the creation of the design system’s styles and components, building up the UI kit of reusable assets. The developer’s responsibility is to build the component library, ready to be accessed for all team members who work with that client.

The team are the ‘guardians’ of the design system, so as and when the design system evolves, they keep it up-to-date.

How to create a design system

When considering how to design a design system, we have a tried and tested method for success. We create our design systems between the web design and web development phases.

Step 1. Design system strategy

We identify and plan the design system requirements by taking an inventory of the UI elements and styles featured in the organisation’s web pages, then we prepare a design system checklist. If it’s is a brand new site that we’ve designed, we’ll have already created much of the UI Kit elements within the design, so we simply start with what we have and assess what else we need. If we’re creating a design system for an established website, it requires some more design system research by trawling through the UI screens, noting down what elements are used, assessing any crossovers and considering what else is needed.

Step 2. Library creation

Next in our design system workflow is to create the elements on our checklist as both a UI kit and a component library.

Component design and UI kit

Typically we don’t create a design system from scratch, since one point of a design system is to streamline resources, we start with our own template containing all the essentials we need to get going. Of course, to initially create this template took some time, but it was well worth it. Using Adobe Xd, all the standard UI components and styles are all in there, ready to be adapted with in-line with new visuals and brand guidelines. We constantly improve and update the template with every project, so it keeps getting bigger, better and more comprehensive.

Our baseline design system template includes the following elements:

Styles

• Colours
• Typography for mobile and desktop - defining the design system hierarchy
• Padding and spacing
• Themes
• Image assets (including favicon, apple touch and OG images)

Components

• Primary and secondary buttons
• Text links
• Form elements (such as inputs checkboxes and radio buttons)
• Tags
• Wells
• Warnings
• Cookie policy pop-ups
• Skip to main content bars (a design system accessibility must have)
• Icons

Patterns

• Mastheads
• Navigation for mobile and desktop
• Cards

All of these elements need to highlight all user interactions, so we visualise the following states:

• Standard (enabled)
• Hover
• Active (click)
• Focus
• Disabled

This template is just a springboard to get us going, as every project varies, there is always a degree of customisation needed, adding in new patterns and styles that are unique to that client.

Component library build

The UI kit then gets handed over to a developer to build out the components in HTML and CSS. They work closely with the designer for quality assurance, making sure all interactions are covered and have the right feel. These elements get housed in our bespoke design system framework, displaying visual examples and providing the code snippets.

Step 3. Implementation

We use the design system as a single source of truth when we’re developing or need to create new UI screen designs. Since the elements are already created and agreed upon, this really helps streamline the QA phase, no more confusion and no more inconsistencies.

Step 4. Learn, evolve and grow

As websites grow, so do our design system, they’re designed to be flexible, adaptive and remain comprehensive. The same goes for our template, with every design system we make, we learn from the last.

Conclusion

Design systems are a critical tool to help streamline and optimise design and development resources. They consist of reusable styles, patterns and components to ensure cohesive and consistent digital brand experiences across multiple pages, products and platforms.

Design system examples

The world’s top companies use design systems, here’s our top 5 favourites to wet your whistle:

• Adobe Spectrum
• Apple Human Interface Guidelines
• Mailchimp
• The Guardian
• Google Material Design

We created a comprehensive design system along with a slick new product design for industry-leading vehicle service plan provider EMaC.

Glossary of design system terms

Design systems can be complex beasts, and you'd be forgiven for being unsure of the language used around them. If you’ve got some design system questions, give us a shout and we’d be happy to talk you through them, in the meantime, here are some of the most common terms to get you up to speed.

Component

A reusable user interface element used to create patterns and build up UI screen designs.

UI kit

The visual representation of coded components for designers to create UI screens without the need for code, typically created with design software such as Abode Xd or Figma.

Component library

A collection of styles, components and patterns, housed in an online framework with code snippets.

Pattern

A pattern is a reusable flow, content structure or layout, such as a form, which are made up of groupings of UI components. They explain what components to use, where they should be used and what their purposes are.

Design language

The combination of distinguishable visual properties of a design system, such as colour, typography and illustration.

Design system graveyard

A library of components that are either out of date or no longer being used.

Version control

A way of tracking changes and updates to a design system.