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.
Are you 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 components 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 components) and defines how they behave, what they look like and how they are coded.
Examples of Pattern libraries that you might want to check out include:
Now, this description may sound like a design system to you, and indeed they are very similar, but there is a difference.
The Difference Between a Pattern Library and Design System
A lot of people use the terms design system and pattern library somewhat interchangeably, so don’t be confused if somebody refers to a pattern library as a design system. However, in principle, there is a difference.
A pattern library is a part of a broader design system. What precisely a design system contains is often debated, but typically they include elements like:
- A pattern library of UI components.
- A branding style guide.
- A content style guide.
- A set of design principles.
- A service manual.
Basically, a design system is a collection of documentation and tools for the creation of design assets.
Of course, design systems and pattern libraries do not spontaneously appear, they need creating, and that takes effort. Why then is it worth your time to build a pattern library?
Why You Need a Pattern Library?
As a website grows in 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.
A Pattern Library Facilitates Reusability
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.
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.
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 create one?
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. I 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.
This approach allows the developer to immediately start writing code even if the finished design is not in place. The patterns can then get fleshed out with the final design and CSS as that becomes available. This approach is considerably more efficient than putting everything together at the end and also allows you to reuse patterns as you build the site.
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 design, make sure you demonstrate how it adapts to different screen 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 Elements of a Pattern
Many patterns can be made up of multiple elements. 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 elements 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 from the start.
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 essential when it comes to implementing patterns. Answering these issues also forces the designer and developer to work closely together to agree, and prevents the designer from just throwing a design over the wall.
Ensure Your Patterns Are Accessible
It is also worth emphasising in this era of web applications that your pattern library should address accessibility, as designers often overlook it.
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 a screen reader can understand it.
Think About Where You Keep the Code
Another thing I want to point out is that a lot of pattern libraries display code alongside a visual representation of the components. Although this is a good practice the code should not then be copied and pasted into your website. Instead, the code shown in the documentation should come from a central repository that the developers are using on the live site.
In other words, you need to avoid having multiple copies of your code because that will require significantly more maintenance. Although not always possible, you want to be able to update a patterns code in a central repository and see that update ripple out across the entire site and the pattern library documentation.
Fortunately, there are tools like Frontify, Astrum or Zero Height 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 Your Pattern Library’s Level of Customisation
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.
A Pattern Library Is One of My Favourite Tools
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 set up, but ultimately it is worth the effort.
Creating your first pattern library can be a challenge, and it is easy to make mistakes, so if you would like some outside advice and support, get in touch.
About Frontify
Frontify provides a cloud-based platform to create your Pattern Library more natural than ever. Synchronise 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