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.
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.
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 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).
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.
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.
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.
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.