Pattern libraries, the one true source

How we design and build websites has changed.

We no longer create static and unresponsive pages but design optimised experiences that utilise screen size, micro-interactions, device features etc. to present content in a meaningful and engaging way.

Consistency has also become integral to the experience. Users need to feel at home using any service; it needs to be familiar to them, irrespective of device. Pattern libraries are therefore replacing traditional style guides as the preferred method for housing all the components needed to create an interface.

It started with digital style guides

Back in the day, design requirements were documented ready for build in beautifully crafted style guides. Even when design and development buddying became a more efficient way of ensuring integrity in design, style guides were still necessary for documenting design and code requirements.

A new breed of digital style guide was born, with the BBC Global Experience Language (GEL) being one of the front-runners. This pure digital style guide approach was refreshing to see as it was public facing, but did not focus or document more of the technical elements to consider when developing an interface.

Pattern library frameworks then emerged to house code referring to all components that are needed in order to create the interface. A great example of this is the Mail Chimp pattern library.

What is a pattern library?

A pattern library houses all of the elements needed to deliver an experience. They are a better way of representing an extendable interface so are better suited to the current way of designing and building websites.

Patterns are a way of simplifying interfaces into core components such as navigation, carousels, forms etc. When these patterns are put into a set order they create pages. When we design interfaces we no longer need to design every page as a fixed template. It is best practice to design all of the patterns required across the interface in order to create every page. For example:

This demonstrates that designing at a pattern level is a far more efficient process, as it allows for maximum re-use and consistency across an interface.

Design still comes first

If a pattern library contains code doesn’t this negate the need for design? No, design still leads the way and defines the UI visual direction; although there is a tipping point in the process when it becomes more effective to create subsequent patterns, or make necessary design tweaks in the code, rather than a static PhotoShop file.

Online pattern libraries are a great way of ensuring consistency across a website/interface. A pattern library removes the problem of documentation becoming out-of-date or design assets becoming disparate across an organisation by becoming the ‘one true source’ of information for constructing a website/interface.

They provide a solid foundation for clearly defining all patterns and behaviour, and also ensure governance for the digital domain of an organisation. They should act as a constant reference point for review to determine if patterns need to be modified or created to meet a new business need, support functionality or improve the UI.

The style guide dilemma

There are many pattern library purists who believe they should only contain code and content that is specific to patterns and pages themselves. They would also state that a pattern library should act as a mechanism for development handover and that it should not become a destination for other related resources such as style guides or links to further resources.

In my experience having a single destination for all digital brand assets is beneficial to an organisation. It can be championed and referenced by all teams and stakeholders as the single voice of truth. This helps ensure governance of digital products, creates consistency and allows for maximum re-use of patterns.

The benefits of a pattern library

A transparent and single destination for:

• Developer requirements (code/design/assets)
• Product and marketing teams (understand standards)
• Project teams (manage compliance)
• Design studio (maintain and update)
• Removes conflicting / out-of-date documentation
• Reusable assets across releases
• Easily updatable elements 
• Removes inconsistency in design and development 
• Documentation that can change and grow with design evolution
• No more documentation for documentation sake
• Drive brand and customer value
• Drives value at project level… quicker release cycles

The web is no longer a static place, so pattern libraries containing both design and code are undoubtedly the only way to deliver a consistent experience for users across devices.