7 Pattern Libraries That Will Help Improve Your Web Development Skills

I do a lot of writing and one of the most important tools in my kit is the style guide. If I ever have a doubt about exactly where an apostrophe should go or the right way to hyphenate a phrase, I can turn to the AP Stylebook or the Yahoo Style Guide and find out what some of the best editors in web or print have to say about it. I also dabble in web development and design, but I’m much less skilled with HTML, CSS, and JavaScript than I am with the English language, so I find myself constantly turning to the web design equivalent of Strunk and White: the pattern library.

Just as with language style guides, pattern libraries serve two main purposes. They provide a set of coding or design standards web development teams can apply across a site, helping to maintain consistent coding practices and appearance over time and across different developers. Secondly, they’re a treasure trove of advice for anyone who wants to learn web design best practices from designers who have learned their trade on the front lines.

In this article I’d like to share the 7 web design style guides / pattern libraries I find myself turning to most often. I’m going to stretch the definition of pattern library somewhat and include guides that run the gamut from coding best practices to true design pattern collections.

Google HTML/CSS Style Guide

I’m going to start with a straight-up coding style guide from Google, which details the company’s advice to its coders as to how they should write and format their HTML and CSS. Much of this advice is fairly arbitrary sounding, like starting a new line for every selector and declaration in CSS, but the strictures are developed through years of experience and if you’re a newbie coder, it’s a useful start as you develop your own preferred style.

Yahoo Pattern Library

This one is a true design pattern library, and as such, it tries to provide solutions to design problems all web designers will face, including how Yahoo likes its designers to handle navigation, interaction, and layout.

A List Apart Pattern Library

A List Apart is probably the best known web design blog on the Internet. They recently released their own pattern library as part of an effort to open source their site. The pattern library includes the site’s solutions to design issues along with illustrative HTML code snippets (and of course you can check out the CSS too).

Responsive Web Design Patterns

This one is more or less how I learned the details of responsive design: it covers everything from layouts to images with simple and easy to understand examples.

Interaction Design Pattern Library – Welie.com

It may not be the most up-to-date looking site, but it definitely delivers the design pattern goods. It’s the most comprehensive pattern library I’ve come across and offers patterns for almost every situation a designer will face.

Starbucks Style Guide

I’m going to round out the list with a couple of pattern libraries from companies that have created well-regarded sites. First up is the Starbucks Style Guide, that spills the beans on the elements that are used to build the ubiquitous coffee retailer’s site.

MailChimp Pattern Library

Last up, MailChimp’s site is an elegant and simple interface into their email marketing service. Here’s how they made it.

If you have a favorite pattern library or style guide you’d like to share, feel free to mention it in the comments.