Why you should be using pattern libraries

Default avatar.
December 13, 2016
Why you should be using pattern libraries.

Have you heard of pattern libraries, style guides, component libraries, design patterns or UI toolkits? Don’t worry if you’re confused or don’t know the differences. Here’s a secret — most people in the design industry are also a little confused. With all these terms flying around it can quickly become overwhelming. But rest assured it’s actually much less complex than you might first think. All these different terms can be grouped into two different categories:

1) Style guides 

These are brand guidelines for a website. They contain the logo, colours and typography. A style guide takes all the relevant parts of the brand guidelines and places them together.

2) Pattern libraries /​component libraries /​UI toolkits

All these terms refer to the same thing. They are a collection of reusable components that make up a website. Pattern libraries (as I’ll refer to them from now) are a way to represent everything that makes up a website. This includes the layout, structure and everything that is contained within them. On an eCommerce website this would include a product item, a review, star rating, quantity, navigation, tables and buttons, to name a few. Each of these are called a component. So, a pattern library is a collection of components that make up the website.

Pattern libraries vs style guides

Websites require both a style guide and pattern library. They’ll often live together which might be where a lot of the confusion comes from. Style guides apply branding while pattern libraries apply layout and structure. For example, the style guide for Levis would dictate the website should use red with a heavy font but the pattern library would dictate a product listing item should contain an image, title and price. demo Both strive towards a common goal — to make the website consistent, on-brand and user friendly.

Why are they useful?

The overarching benefit of style guides and pattern libraries is consistency. Designers love consistency, developers love consistency, website owners love consistency and most importantly, your customers love consistency. Here’s why:

Benefits for your customers

  • Improved performance and faster websites because using consistent components and styling means leaner and cleaner code.
  • A consistent user interface throughout the website allowing for easier navigation — if a product is displayed the same everywhere, it’s easier to understand.
  • Better browser support because pattern libraries allow us to isolate and rigorously test components.

Benefits for website owners

  • One place that contains everything on their website.
  • Build new pages and sections quickly using existing components.
  • The website will remain fast and lean because new sections can inherit previously built components.
  • Every page on brand. No exceptions. Style guides force brand consistency with no stray fonts or colours creeping in.
  • Higher conversion rate because the website is more consistent which makes the website faster and provides a consistent user experience throughout.
  • Improved search engine optimisation from consistent and well structured components.
  • Lean and clean code means future work takes less time.
  • Increases the lifespan of the website because continuous improvements are easier to make.

Benefits for developers

  • Write less and better code. This makes the codebase significantly easier to work with and manage.
  • No reliance on one person. All components are accessible by everyone so no prior knowledge is required to build new sections and pages.
  • Improved browser testing so when new sections are assembled you know it will work in all supported browsers.
  • Good documentation is normally built into the pattern library.

Benefits for designers

  • Everything on brand. If it’s in the pattern library it exists on the website. Every component can be checked to make sure it looks great.
  • Consistent designs and layouts. Reusable components means a better design system is created.
  • Always know what is on the site. If future design work is required the pattern library can be used as a reference for what already exists.

Examples

As style guides and pattern libraries become more popular, so has the publicly accessible examples. There is even a entire website dedicated to showcasing them. Here are some of our favourite examples.

Salesforce

This

is one of the most polished versions you’ll find on the web. Their style guide and pattern library contains everything that is on their website. You will also notice that it includes lots of documentation and guidelines for how components should be presented. salesforce

uSwitch

In addition to a style guide and pattern library, uSwitch have decided to add language and tone. This is a great idea as it acts as an all encompassing document for the website; ensuring the design, layout and even tone remains consistent. ustyle

Walmart

Who’d have thought Walmart would have one of the best style guides and pattern libraries around? This is a great example of an eCommerce website using components to build pages on their website. It’s probably one of the most comprehensive versions out there. walmart

Inside an agency

Most examples of good style guides and pattern libraries are for large websites. It might be easy to jump to the conclusion that they’re only useful for websites that have lots of people continuously working on them. We probably only ever see examples of large websites because the amount of time to build a style guide and pattern library can be significant. Most smaller websites are unable to justify the initial outlay required compared to future savings. At iWeb, we’re trying to change that. Our goal is to make every website we build as fast and lean as possible. Around 18 months ago we started to build our own style guide and pattern library. We’ve coined it Chop Chop. Being an agency we’re able to harness the advantages of working on dozens of projects each week. This unique insight into websites enables us to build a style guide and pattern library that can be used on every website — no matter the size. By using the same library of code on each project we’re able to introduce much more consistency across the board. This has a huge benefit for our all clients. As projects become more consistent, more developers are able to work on them without any prior knowledge. This means no one developer is tied to the project, allowing work to start quicker and take less time.

Nothing but benefits

We see there is nothing but benefits to having a style guide and pattern library for every website. Building our own system has allowed us to reduce the initial overhead normally required. Over time this will continue to improve. Style guides and pattern libraries bring benefits for customers, website owners, developers and designers. So on your next project, or even an existing one, it is definitely worth enquiring about the opportunity of using them.

Dave Redfern

Dave Redfern is a designer and front end developer at iWeb an e‑commerce website design agency based in Staffordshire, UK.

Read Next

Are Simple Websites Better For Business?

As web design technologies raise the bar on what it is possible to achieve on a realistic budget, there’s a rising deba…

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …