What is a pattern library?
Libraries are lovely things. You hear the word “library” and you just immediately feel warm and supported. Libraries are organised and environmentally sustainable, because they’re all about sharing and reusing. Pattern libraries are exactly the same.
A pattern library is an organised collection of components, also known as user interface elements. Components are the interactive building blocks that together create the interface for the website/app/digital platform — including buttons, text fields, banners, and tabs. In a pattern library, every component has a consistent look, feel, and functionality. They can then be used to build many interfaces and tools.
We love them. We’ve made them for lots of our clients, including ACC, Kiwibank, NZ Customs, NZTA, and NZ Red Cross. We also made the New Zealand Government Design System with the Department of Internal Affairs, which has a pattern library as part of it. Design systems are different from pattern libraries in that they can cover everything needed to build the website or product — standards, documentation, style guide, principles, as well as the pattern library.
5 reasons we love pattern libraries
1. They ensure consistency in user experience and brand
Designing components that follow brand guidelines ensures the user experience and brand is consistent across all products and tools that use the pattern library.
Consistency is important because it makes things easier to use, as users only have to understand how your components work once. Consistency therefore also builds trust — your users get to feel confident, early on, that they know how the elements on your website work. Nothing unexpected is going to happen.
If there is an issue with functionality, or if any updates are needed, the component can be updated in the library, and it will update everywhere else that it’s used — so the experience will stay consistent. Making changes in just one place also saves time and cost, which brings us on to our second favourite thing...
2. They save time and cost
Pattern libraries make the creation process of any new product faster and more efficient, as all the components only need to be designed and built once. Then you can spend more time working on new and important things, rather than constantly reinventing the wheel, or, in this case, the component.
If you have a large team of designers and developers, pattern libraries also save time by getting everyone on the same page, quickly. They’re a great way to avoid awkward stakeholder conversations about which shade of pink you’re using.
Also, when you have consistent code in your components, they load a lot faster, speeding up your website.
3. They make prototyping and iterating fast and easy
Having a pattern library ready to go means you can build and prototype quickly, so you can test and iterate. This helps move the conversation from abstract to concrete — everyone can look at something together, and discuss how it works.
Testing and iterating with real people is a key part of our human-centred design approach, and pattern libraries make several rounds of testing and iterating easy, so we can gather as much feedback as we can to make products and experiences truly useful for the people they’re aimed at.
4. Accessibility and best practice are embedded
The heading above really says it all — a pattern library of components that all have accessibility and best practice built into them means that you can be confident that all your platforms are meeting accessibility and best practice standards.
5. They’re a great source of documentation
Finally, pattern libraries are a great way to record detailed information. They make it far easier to step in and out of a project, as all the design and functionality work is already in the library. When people on the project team leave, their knowledge doesn’t leave with them. It’s all saved in the pattern library.
And one learning to think about...
All libraries are only as good as their librarians — the people managing them. If you’re creating a pattern library, make a plan for how it's going to be managed, accessed, and updated. We recommend a management system that everyone feels confident to feed into and be a part of. That’s kind of the point of pattern libraries — they should empower and connect your team, rather than creating silos.