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.
“A design system offers a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive,”
Looking for a web design agency for your design system?
Get in touch to chat about your design system requirements.
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.
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.
“I think we lose sight of the real value of a design system when we focus too much on the components. The components are the trees. The design system is the forest.”
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:
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.
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 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:
- Typography for mobile and desktop - defining the design system hierarchy
- Padding and spacing
- Image assets (including favicon, apple touch and OG images)
- Primary and secondary buttons
- Text links
- Form elements (such as inputs checkboxes and radio buttons)
- Skip to main content bars (a design system accessibility must have)
- Navigation for mobile and desktop
All of these elements need to highlight all user interactions, so we visualise the following states:
- Standard (enabled)
- Active (click)
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.
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:
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.
A reusable user interface element used to create patterns and build up UI screen designs.
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.
A collection of styles, components and patterns, housed in an online framework with code snippets.
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.
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.
A way of tracking changes and updates to a design system.
Looking for a design system specialist?
Get in touch to see how we can help create a design system that unites your collaborators and cultivates consistency.
Mole has been working in the design industry for over 13 years, and in that time gained a wealth of experience creating powerful brands