The elements of a design pattern library

"A pattern library is a tool to capture, collect and share design patterns and guidelines for their usage" (Alla Kholmatova (2017) | Design Systems: A practical guide to creating design languages for digital products.)

For us, a pattern library is an essential tool to provide consistency for designers and developers as well as end users. It allows your teams the time to focus on thinking, innovating and delivering amazing designs, rather than redesigning the wheel over and over again - in a slightly different shape or size.

Ever since Google pioneered Material Design, design teams have been keen to embrace a comprehensive set of design guidelines. Style guides have of course been around for a lot longer than Material Design, but it's only in more recent years they have evolved from a simple collection of branded assets to a design system with guidelines for usage.

Brad Frost's excellent atomic design principles provide a philosophy to encourage design teams to think about design elements as building blocks (atoms like a button), which can be combined into components (molecules like a search) and even into modules (organisms like a header).

Rather than designing something new and unique every time, teams can take advantage of efficiencies and maintain consistency in their work by using a pattern library built on these principles.

At Webcredible we create pattern libraries and style guides all the time for our clients, not only when we are delivering website build documentation but also with our retained clients who need a hand maintaining their design system over time.

At Webcredible we create pattern libraries and style guides all the time for our clients, not only when we are delivering website build documentation but also with our retained clients who need a hand maintaining their design system over time.

So how exactly do we define these various terms and what are the good practices that top design teams from Airbnb to Spotify are adopting?

Design principles

A good pattern library will be underlined with an agreed set of principles. It is crucial that the users of the library co-create the principles. The shared understanding is as important as the documentation.

Material Design has just 3 principles, which are unique to them

Top tips for creating design principles

  • Unique - Good principles should offer a perspective and represent your company, brand or design ethos. If your principle is something every design team would strive for it probably isn't that useful. 'Make it easy to use' is a given...
  • Specific - Rather than saying something like 'Simple' use a term like 'No needless parts'. This gives the team a much clearer steer on what you mean.
  • Not too many - 3-5 is plenty and consistent with many top design teams approach.
  • Memorable - Related to the above ideally the team should be able to recall the principles without referring to the documentation or it won't be embedded in their head. Spotify cleverly came up with TUNE (Tone, usable, necessary, emotive) so they can review work and ask if it's in TUNE?

You can run a co-creation workshop with your team to establish your first set of principles, which we do with many of our clients.

Style guide

This is often what is confused with a pattern library but is just one element. This includes all the styles such as typography, colours, layout grid, imagery and even animation.

Future Learn has a style guide, which includes rules for usage

It's always important to have something like this that represents your brand consistently but just having the assets won't force your team to use it in the right way.

Top tips

  • Type sizes names - rather than saying H1, say Page Title, so designers and developers know what they are supposed to be used for.
  • Colour names - Consider naming colours for the intended use. So you might refer to red as 'attention' for example. You can also put your colours on a spectrum, particularly when pairing with buttons (e.g. Loud to whisper)
  • Animation - Use videos or animated gifs to demonstrate examples.

Functional components

These are the functional building blocks, which can be lifted and re-used in your designs, such as buttons, tables, light boxes, accordions, etc.

Eurostar divides out its components using atomic principles and provides code snippets.

Many design teams such as Eurostar use atomic principles to separate out their components into atoms and molecules.

Ultimately it is down to what works best for you, but you may want to consider organising and labelling functionally. For example components for navigation and others for content presentation. Future Learn is a great example of following this approach.

You will want to specify the layout in different responsive sizes and any interaction states.

Top tips

  • Name functionally - Consider using more meaningful names for components that suggest intended use. Future Learn for example uses 'Spotlight' rather than 'Hero'.
  • Alternative components - You can cross reference your components and provide alternatives. For example, for a lightbox, you might have "See also: help tooltips".
  • Code snippets - If your developers have adopted your library then you can provide a snippet so they can lift code and rapidly implement.

Rules of use

Like a style guide, just having a set of assets is not going to encourage good design. You need a system of rules on how to apply in context.

Personally, I think Material Design, whilst impressive, may have gone too far here. You want the team to actually engage in writing and reading the guidelines, which 1000s of words is not going to encourage.

But you should at the least provide a clear description of what the purpose of each component is and when to use it.

Shopify has a clear set of guidelines to accompany each component

Top tips

  • Usage - You may want to provide some guidance on how frequently to use certain elements and in what context. For example, there should only be one primary button per page to represent the main action
  • Dos and don'ts - Provide a clear list of dos and don'ts, which you can illustrate with screenshots. For example, in a lightbox it could be 'do close light boxes using the cross or the background space', but 'don't initiate a lightbox without deliberate user action'
  • Sizing - Unless you have made it so you can just lift straight into code, consider using some rules to show margins and other dimension parameters

Maintenance guidelines

The pattern library isn't going to maintain itself and you are always going to come up with new contexts that require new elements or adaption of existing ones.

The best libraries provide some guidance on how to maintain, for example how to describe components giving a clear purpose and even a boilerplate to make a new one.

You will also need an agreed workflow to stop the library becoming a free for all with multiple versions. Different teams are stricter than others in their governance such as Airbnb, where code and design are always in sync and a steering group own the library.

The latest version of Sketch allows you to have shared libraries to reduce diversion from the Master at least for designers.

How should you create your pattern library?

Like any digital product, the answer is what works best for your users, who are typically going to be your design team and developers.

You can start by creating your library in a tool like Sketch and use Invision to create a prototype of the guideline website.

If you're working in a collaborative product development environment you may want to replace or replicate with code, which allows the design and development teams to grab code snippets for implementing patterns. More time consuming to create but probably more efficient in the long run.

We have seen both work for our clients at Webcredible. The important thing is to start somewhere, learn and evolve. The pattern library shouldn't be a static deliverable as it often is in big web build projects. It's an ongoing project, which hopefully will mean designers can spend less time creating assets and more time solving real user problems.

If you need help developing a pattern library or just want to learn more get in touch - hello@webcredible.com

Like what you see?

How exciting, let's get started

Get in touch

Phone

+44 (0)20 7423 6320

Address

133 Park Street
London
SE1 9ED
United Kingdom






Thank you for your comment. It has been submitted for approval.

Comment Again?

Leave a comment

Please enter your name.
Sorry, this email address is not valid.
Please enter your comment.

Course basket x

Course

Price per place

Add another courseCheckout

Pay now by credit card or later by invoice (invoice payments only possible if all courses are 3+ weeks in advance)