Too often libraries forget to see their websites in a holistic way, and instead approach each page as a new design challenge1. Add to this a lack of consistency across hosted vendor platforms and you’ll be lucky if anyone even realizes they are on your library’s website. That’s why we created a User Interface Pattern Library. Instead of thinking of each page as a new design project, our pattern library shows our design solutions as a set of patterns, which we can use and reuse.
Of course, we’re not the only ones who have made such a guide, nor are we the only ones sharing ours.
We were originally inspired by Mailchimp’s UI Pattern Library, but many others have cropped up lately, including Twitter Bootstrap and the excellent (and highly detailed) Starbucks’ Style Guide. Ours is a tool that helps us maintain a consistent look, feel, interaction model across all of our sites, including those dragons hosted by vendors2. It’s a win for us, because we don’t have to think about presentation and can instead focus on content. And it helps maintain consistency with several people writing code and shipping projects. (Not to mention it makes launching a new project really fast, since 75% of the CSS will be done by including the pattern library.)
Getting Started
If you want to get started with a pattern library, you can download the source of our pattern library or grab Jeremy Keith’s excellent Pattern Primer, a simple php tool for turning code snippets into a pattern library. And as always, share yours so others can learn from what you’ve done.