Pattern Libraries

Published in

Kyan Insights

4 min readJul 19, 2016

(originally published on 23/05/2015)

Pattern libraries as they’ve come to be known are essentially a set of digital brand guidelines. Print designers have been working from brand guidelines since the beginning of time, so this isn’t really a new concept, we take many of the components of a traditional set of guidelines and expand on those with all of the extra elements that form the structure of a website or application.

The biggest hurdle with this process is time. When we’re working on tight budgets and strict deadlines ‘extras’ like this are often viewed as more of a nice-to-have than an essential addition to a project.

However, once you’ve integrated pattern libraries into your workflow, you soon come to realise that they’re invaluable. Put the time in at the beginning and it’ll pay back ten-fold in the long run.

Some examples

Reference point

In a busy work environment, we often end up jumping between projects through the course of a day. If you create a pattern library as you go along, it serves as a very useful reference point when you come back to a project. I view it as a ‘snapshot’ of the visual language I’m trying to create.

When I’m working on a project, I’ll try to get into the mindset of the client and design in a style that I know will work. When you’re in that zone, it’s easy to make decisions very quickly. However, when you’re forced to break that flow and move to another project, a pattern library can be a way of quickly refreshing your memory when you come back to it.

Everything in one place

This one’s often overlooked, but I find that seeing all your whole user interface together in one place can bring issues to the surface early on. You might not have created a design yet where you have an H4 sitting underneath an H2, but at some point it’s likely to happen. If you’ve never tested these together they might not look quite right. Getting the balance right from the very beginning saves a lot of hassle further down the line.

Drag & drop

When you’re working on big websites, it’s sometimes easy to forget what you’ve already designed. I often find that a design I’ve already worked on for one set of components will apply to another with just minor modifications. Once you’ve started to build up a decent user interface library, it’s often possible to drag and drop multiple patterns to form larger more complicated structures.

Collaboration / Hand over

If there’s several designers working on a project in tandem, then a central design library becomes a necessity. The same goes for hand over, if I’m going on holiday and another designer is looking after my project whilst I’m away, it’s going to save that designer a lot of time getting up to speed if they’ve got one library they skim through before working on anything new.

Consistency

A well designed website relies on consistency. It’s the key to good user experience. Meet the users expectations and you’re well on the way to a successful site.

Admittedly, pattern libraries aren’t by any means the perfect solution but they’re certainly a huge help. The web industry has changed so rapidly that the software we use has struggled to keep up and we’re using tools that were never really designed for what we’re doing.

That said, it is improving — Adobe seem to be gradually adapting Photoshop to address our web related requirements, then there’s applications such as Sketch, that are taking a whole new approach.

Look out for a second part to this post where I’ll talk about the tools we have at our disposal. As designers, should we be simply producing flat designs for our pattern libraries and leaving the front end work to the development team or should we be getting our hands dirty? Also expect a Pattern Library ‘blue print’ that you can use as a reference point when beginning a project.