Creating your next UI pattern library

Using tablet and smart phone with laptop on desk
Ensuring a consistent user experience throughout the life of a website is a challenge for all web professionals. As time goes by,  stakeholders change, new initiatives are developed, and the website that was initially launched turns into something completely new. Building a pattern library is an effective technique to use to maintain a long-lasting website.

Why build a pattern library?

A pattern libraries allow team members to quickly reference a set of standard elements and reusable components, and this set-up allows for greater productive while also saving both money and time.

Consistent user experience
As web design teams grows and change, keeping a pattern library helps to ensure a consistent user experience. As microsites and other digital properties are built and launched, a pattern library is essential in keeping a seamless experience between all related websites.

Efficiency
Pattern libraries not only create consistency, but they also quickly allow designers and developers to produce mockups, wireframes, and prototypes without spending hours on design and development.

Reusability
Having elements that are reusable goes hand in hand with efficiency. Pattern libraries allow developers and designers to avoid reproducing and redesigning elements.

Evolution
The evolution of the website benefits from a pattern library because it allows all team members to refer to the same code and design. New employees can quickly learn the corporate web standards and hit the ground running when team's have a pattern library for their website.

Typical elements of a pattern library might include:
  • Visual layouts
  • Typography
  • Color palettes
  • Grids (mobile, desktop, tablet)
  • Editorial best practices
  • Call to actions blurbs, buttons, links
  • Rules, guidelines, and toolkits
  • Code
  • Slideshow
  • Navigation
  • Social media features
  • Carousels
  • Iconography
  • Interactive elements
Here are several examples of successful pattern and design libraries:
BBC Gel - Web Style Guide
Mailchimp Pattern Library
Starbucks Interactive Style Guide

Additional resources

Creating a UX Design Library PDF

Google Visual Guidelines

Boxes and Arrows - So You Wanna Build a Library, eh?

Smashing Magazine - Designing Style Guidelines for Websites

Thinking of expanding your website? Let TBH Creative help develop a UI Library to ensure your digital presence is always consistent.
Contact us to get started
TBH Creative

About TBH Creative

TBH Creative is an Indianapolis-based internet strategy agency. Our services include web strategy & planning, website design, mobile solutions, application development, and analytic reporting.

Find out more

Receive articles in your inbox