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.

GVSU UI Pattern Library Snippet - Typography Styles

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.

  1. That is if we assume anyone thought about design in the first place.
  2. I should mention that while we have the guide, now, we haven’t quite made it through all the old code to get everything on the same page. Ahem.