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.