How to create a pattern library and why you should bother

Paul Boag

Ensuring a website is consistent and easy to maintain are two of the biggest headaches faced by larger organisations. Fortunately, a pattern library can help.

Whether working for a large corporation like Nestle, a higher education institution like the University of Strathclyde, or a big charity such as Doctors without Borders, I increasingly find myself suggesting the creation of a pattern library as the solution to the particular problems faced by these larger websites.

But what is a pattern library, why do you need one and how do you go about creating it?

What is a pattern library?

A pattern library is a collection of user interface design elements. The site UI-Patterns describes these user interface design patterns as:

Recurring solutions that solve common design problems.

Still confused? Well, that is not surprising. Web designers like to make things sound more complicated than they are!

Essentially a pattern library is a collection of design elements that appear multiple times on a site. Typical examples might include:

  • Slideshows
  • Navigation
  • Social media features
  • News Listings
  • Related links
  • Carousels

The list could and does go on.

A pattern library, documents all of these ‘patterns’ (also often known as modules) and defines how they behave, what they look like and how they are coded.

A pattern library is a collection of design elements that can be reused across a website.

Examples of Pattern libraries that you might want to check out include:

Of course, pattern libraries do not spontaneously appear, they need creating, and that takes effort. Why then is it worth your time to create a pattern library?

Why you need a pattern library?

Once a website reaches a certain size and complexity (especially if many subsites are involved) the argument for a pattern library are overwhelming. These benefits are three-fold:

A Pattern library ensure a consistent user interface

Big sites are developed by different people over a prolonged period and revised regularly. That almost always leads to a fragmented user interface unless there is something in place to ensure consistency.

You only need to visit any large site to see examples of this. Navigation shifts position, form elements are formatted differently and even typography changes. That happens because it is easier to guess how a button might look than find out how somebody styled it previously. A pattern library changes this by offering a straightforward way to duplicate existing design and functionality on any page of the site.

On larger sites it is easy for inconsistencies to creep in when there isn’t a pattern library to set standards.

A pattern library facilitates reusability

Large organisations often have multiple web teams working across the company reporting into different departments. Often these teams work in isolation and so end up reinventing the wheel at considerable cost.

Having a central pattern library developed in collaboration between all of these web professionals means that the organisation can reuse functionality and design, so keeping costs down.

If one web developer creates a new pattern for a particular requirement in their area of responsibility, this can now be shared with the whole group and is also permanently available for future projects.

Once the majority of patterns are in place creating a new site or subsection becomes a mere matter of combining these patterns, in much the same way you build something out of existing Lego bricks.

A pattern library makes maintenance easier

Having a consistent pattern library that everybody works from makes maintenance easier too. When everybody codes elements, in the same way, it is much easier for a developer to work on somebody else’s code. Also when a new developer comes in, they can get up to speed much quicker by looking at the pattern library.

Hopefully, you can now see the value of building a pattern library. The final question, therefore, becomes – how do you build one?

Examples of how Google's pattern library creates consistency
For a long time Google struggled to ensure consistency across their many products, because they were built by separate teams. Introducing a pattern library helped to address this problem.

Tips for creating a pattern library

As you will have seen from the examples posted above, there is nothing particularly special about a pattern library. It is essentially a collection of elements, their associated code and a few notes.

How you implement a pattern library is entirely up to you. However, I thought it might be useful if I share a few of the things I have discovered about working with pattern libraries.

Think about your pattern library from the start

The temptation is only to document a pattern library once you have built the site. However, this somewhat undermines the point of having a pattern library.

When working on a pattern library, I tend to put the skeleton together before anybody writes a line of code. We create a library featuring wireframes of individual patterns, notes on how that pattern works and other considerations, while still at the prototyping phase. That is helpful for the designer and developer, acting as a functional specification of sorts.

As the developer starts writing code this pattern can then get fleshed out with the final design and associated code. This approach is considerably easier than putting everything together at the end and also allows you to reuse patterns as you build the site.

Sketches of a early pattern library
A pattern library does not require final code and design. Instead start it early when you have nothing but a few wireframes to work with.

Make sure your patterns are responsive

It should go without saying these days, but put careful consideration into how patterns will respond across multiple devices. When showing the visual appearance of a pattern, make sure you demonstrate how it responds at different sizes.

That is not just useful for mobile devices, but also for when you use the pattern in various contexts. For example, a news listing may include a thumbnail when being displayed in the main body of a page but drops the thumbnail when being shown in a narrower side column.

Define the components of a pattern

Many patterns can be made up of multiple components. For example, a news listing could include:

  • A title
  • A description
  • A thumbnail
  • The date
  • The author

When defining a pattern, it is important to list these components and also whether they are required or not. For example, do you need a description on a news listing? If not, what happens to the design if a description is not present?

Careful consideration needs to be given to these various permutations as they can become quite complicated if not thought about carefully.

Describe how your pattern will function

If a pattern library is also going to act as a functional specification for developers, you need to put a lot of thought into how the pattern will work. Where is the data coming from to populate fields? What happens when the user clicks a button or link? How does a carousel operate on a mobile device?

These kinds of practical questions are important when it comes to implementing patterns. Answering these issues also forces the designer and developer to work closely together to come to an agreement, and prevents the designer just throwing a design over the wall.

Ensure your patterns are accessible

In this era of web applications, accessibility is often forgotten. That is why I always include accessibility considerations in my pattern libraries. There will always be a section in a pattern definition where I make notes that a pattern should be keyboard accessible or can be interpreted by a screen reader.

Think about where you keep the code

A lot of pattern libraries display their code inline. However, I don’t believe this is a good idea. I believe there should be a single repository for code that is always kept up to date and that this repository should be in source control. By having code in multiple places, it requires more maintenance, and it would be easy for somebody to use the wrong code snippets for a pattern.

Pattern Libary Creation Tool
A tool like Frontify allows you to to create attractive pattern libraries, while syncing the code with your source repository via the Frontify API.

That said, there are tools like Astrum that allow you to keep code in source control, but still display it in the pattern library. However, you ultimately decided to solve this problem, make sure there is a single definitive source of code for each pattern and keep it up-to-date.

Consider how customisable your pattern library will be

Finally, think about whether patterns can be customised and to what extent. That will depend on how your brand operates. If you have a single consistent brand, then you probably want to offer very little in the way of customisation. However, if like the BBC you run multiple brands, then it will be important that the appearance of patterns can be customised to match the different aesthetics.

Examples of BBC pattern library in action
Although the BBC has a single pattern library those patterns look different between across their different brands.

A pattern library is one of my favourite tools

I have to confess I am a huge fan of pattern libraries. They are something I insist on for the majority of projects I work on with clients. Yes, they do take some work to setup, but ultimately it is worth the effort.

About Frontify

Frontify provides a cloud-based platform to create your own Pattern Library easier than ever. Synchronize your code repository with the Frontify API, enrich your patterns with essential context and make them accessible for non-techies. Try it out – it’s free to use within 14 days.

Follow Frontify on Twitter