Pattern libraries, a digital designer’s best friend

No, we’re not talking paisley or floral. When we talk about patterns, we’re talking about the means through which we can create consistency in design. A pattern library is a collection of assets, styles and interaction designs, which dictate the way in which a website looks and feels. For us and our clients, they’re an essential tool for delivering manageable large-scale websites.

Why are pattern libraries important?

With clients seeking to manage their content and regularly updating their websites, pattern libraries ensure consistency and make this process far easier to maintain. New assets and features can be added to landing pages and sections of the website, without beginning to juxtapose the original design. In essence, pattern libraries instil a level of design control.

It’s all too common a sight across our industry; A website, which upon design sign-off was once a work of art, now reborn a bit of a Frankenstein. Content management systems are hugely powerful and positive in allowing content manipulation and website evolution, but they also present a risk. As multiple stakeholders contribute content and apply their version of a design to new pages, a website morphs and skews, moving away from its original vision (one which the client and designers spent a lot of time and money on achieving).

A pattern library aims to mitigate this risk. It should provide an overview of the brand and styles throughout the site, as well as consistent use of colours, buttons, interaction states and common elements. Pattern libraries can be created as visual styles by designers, but, are most effective when created online and include code by developers. Such libraries are then hugely practical to those with both technical and non-technical skills, enabling far higher levels of scalability.

Some designers and agencies may refer to these as component or module libraries. But, their purpose is always the same - to drive clarity and quality.

Such tools are essential on all types of projects. From working on major university websites, such as University of Southampton and University of Bath, to managing multi-sites within a city’s marketing function, like Glasgow City Marketing Bureau, to multi-stakeholder projects like EDF Energy. Pattern libraries provide guidance and rules, which ensure your website remains as beautiful as the day you launched it (as much as possible).

Who needs a pattern library?

Any organisation wishing to maintain a website with a large volume of pages and content should consider developing a pattern library. The more complex the website, the higher the need and the associated benefits. Add to that websites maintained by multiple team members and the need grows further still.

Pattern libraries allow for long-term vision and the business benefits are clear:

• Maintain the value of your original investment

• Scale your website without devaluing its look and feel

• Improve productivity with reusable elements

• Create a consistent user experience throughout

• Make your website easier to manage with contingency planning embedded (as staff leave the knowledge does not leave with them).

In my previous blog, I wrote about the importance of A/B testing. This is usually done on small sections of the site; testing theories of which version of communication would convert more users. Depending on the outcomes of these tests, it could mean parts of the site will change independently. Sometimes, doing this can mean there may be some inconsistencies throughout the style or layout of the site. These inconsistencies (especially in large organisations with a lot of functionality on the site and content) can be hard to combat. However, creating a pattern library can mean you spot these inconsistencies quickly and make the necessary changes to fix them. Using pattern libraries allows you to create the change required based on the test, which can completely eliminate the inconsistency in the first place.

These can be quite complex, some great examples of these are; Lonely Planet and MailChimp. Clients should be able to look at the components they’d like to use and be able to piece these items together.

When should you think about your pattern library?

The earlier you start to develop your pattern library the better. When it comes to a website project, having your pattern library prepared before any development starts can minimise risk and maximise efficiency, ensuring developers have all the rules, assets and guidelines to rapidly develop templates and solutions.

Pattern libraries take time to develop and implement. But, they are an investment that will pay dividends.

Pattern libraries should be built upon traditional brand guidelines. They can start simple, but should be constantly evolved, encompassing all reusable, common design elements within your website.

Businesses who recognise the value of pattern libraries, can increase the value they provide to their end users and the longevity of their digital solutions.