Critical building blocks: why your app needs a pattern library

You wouldn't design a house without first establishing how many bedrooms it should have. You shouldn't design software without knowing what components make up the interfaces.

What is a pattern library?

A pattern library is a collection of reusable interface elements used in an application. It guides the design and maintenance of the project.

Why is a pattern library useful?

1. A pattern library encourages consistency

Reference the pattern library when creating new interfaces so you don't create a new pattern that isn't needed. Additionally, you should remove patterns you aren't using any more to keep the library lean.

2. A pattern library gets new team members up to speed quickly

A new team member has enough to learn without having to search through the application to find what markup to use for tab component or what button to use in a given situation. The pattern library gets them up to speed on the application.

3. A pattern library helps with prototyping new features

Once the pattern library is mature, many interfaces can be assembled using patterns from the library. This means you can pull new interfaces together quickly for prototyping or development.

4. A pattern library is a great tool for a redesign

Brad Frost suggests creating an interface inventory as an early step in a redesign. This can be a very useful tool in making decisions about what the app consists of, and where we can make optimisations (e.g. combining similar elements, removing unnecessary elements). This interface inventory forms the basis of what to include in the pattern library.

What goes into a pattern library?

Here's just a few things that can be part of your app's pattern library:

• Colour palette: brand colours, action colours
• Button styles: collection of the various buttons used in the application, with explanation on which to use for a given scenario
• Form elements: label styles, inputs showing various "states" such as empty, filled, error etc
• Navigation elements: tabs, breadcrumbs, accordions etc
• Notifications: elements which provide user feedback such as alerts

Of course, there are many other elements that can be part of a pattern library, but the key takeaway is that you should only include what you actually use (or plan to use) in the app. Anything superfluous is overhead that requires maintenance.

What should a pattern contain?

Each pattern in your library should include the following:

• Name: how we refer to this pattern as a team
• Description: what the pattern is used for, and what relationships it has with other patterns
• Visual examples: so users can see how it looks when used in an interface
• Code examples: show examples of the code the pattern uses so developers can copy and paste code snippets
• Describe variations: perhaps the pattern is full width on mobile, but a narrow column on large screens – this should be documented

A pattern should be accessible and, like all good interface elements, should be responsive.

A pattern library needs sustenance to survive

When your team designs a new user interface, refer to the pattern library to see if you already have components to use. If not, perhaps you need to establish a new pattern, or maybe it's a variation of an existing pattern. Regardless of what you decide, the pattern library should be updated to be an accurate reflection of the current state of the app.

Keep feeding your pattern library and it will remain a strong element of your application.

Example pattern libraries

Take a look at a few examples for inspiration:

• Mailchimp
• Mapbox
• Lonely Planet