Creating a shared pattern library

Question

I work in a small but growing team of UX designers developing a suite of web applications. It's become obvious that we would benefit from a common pattern library, but are unsure how to get started or what tool we should use.

We want something that we can collaborate on and also share with visual designers and developers - so adding detail such as notes, graphics and snippets of code would be useful.

Has anyone had experience of building a library like this, do you have any tips or recommendations?

score 3 · Answer 1 · answered Jan 22 '14 at 20:56

We have put together our own Wiki-based pattern library that contains screenshots, descriptions of use-cases, and notes on variations of the element/widget. The intention of the library was to enforce standardized designs across the different applications. In this regard, it has been of limited success. I attribute this to:

Too many items: we made an attempt at defining every element we used across the applications.
Not enough information about each item: this is likely a result of the first point. There were details like sizing, relationships of elements in compound widgets, etc. that would have been helpful.

Ultimately, it seems like we would have gotten better results from making sure we had a repository of fully realized and reusable code for most simple elements (buttons, dropdowns, etc.), combined with a fully detailed pattern library for more complex widgets (lightboxes, lookups, tables, etc.) that needed more explanation of use cases and that would be liable to have multiple variations.

score 3 · Answer 2 · answered Jul 12 '11 at 15:14

3

There are several design pattern repositories listed on Konigi web. From these, Patternry allows you to create public and private collections of patterns.

answered Jul 12 '11 at 15:14

Pau Giner

2,771
14
18

We use Patternry. It's OK. – DA01 Jun 08 '13 at 05:44

score 1 · Answer 3 · edited Jun 07 '13 at 16:05

1

Not a tool that I have got round to using myself yet but Quince seems interesting.

Personally I have found that having my own patterns sketchbook has been very useful, but I think you are looking for something more advanced and collaborative?

edited Jun 07 '13 at 16:05

Graham Herrli

7,416
7
38
58

answered Jul 12 '11 at 14:03

Sheff

5,149
3
23
30

score 1 · Answer 4 · edited Jun 07 '13 at 16:06

1

We currently use a wiki that we have customized. It allows us to create detailed specs (flow charts, images, code snippets, comments, a history etc) that anyone with an account can access. Within this we have pixel specs and a library of common UI elements that are linked to pages (if needed) that explain the interaction in greater depth.

edited Jun 07 '13 at 16:06

Graham Herrli

7,416
7
38
58

answered Jul 13 '11 at 15:59

Rob H

11
1

score 1 · Answer 5 · edited Jun 07 '13 at 16:04

1

Internally here we use confluence. One of our guys is in charge of keeping it in order, and we just all post use it as a way to reference the correct UI to use in a certain situation.

That being said, we also use it as a discussion point when we believe an element is wrong or out-of-date.

edited Jun 07 '13 at 16:04

Graham Herrli

7,416
7
38
58

answered Jul 13 '11 at 22:39

adesignapart

83
5

score 0 · Answer 6 · answered Jan 23 '14 at 17:18

I've worked with various approaches to such libraries from creating graffle stencils to full design repos complete with wikis and working code widgets. If you have the resource and time, the latter does have some real benefits as fully coded examples can be useful in clarifying the patterns more comprehensively e.g. you can see how elements are not only rendered by how they behave on interaction. A compartmentalised approach to your coded pattern library means you can also scoop out the examples and play around with variants on colour etc for your testing. Creating the patterns in actual working code and hosting them online, where your whole team can access them, also pays dividends. However, saying all this, I appreciate going to this level of detail has an overhead and is not always appropriate for all organisations and projects... sometimes some astute screen grabbing and consistent notation can suffice; the trick then is to get it into a format that is easy to navigate and access, otherwise you are less likely to use it ;)

score 0 · Answer 7 · answered Jul 14 '11 at 04:52

There's a market for this type of product. We've done a lot of research on it and haven't found one that really fits the bill yet.

In the past two org's I've worked on, we've built skunkworks pattern/component libraries by hand...typically a loose mix of PHP includes. We're toying with the idea of building some custom WordPress components for the task.

'Officially' it's usually a mess of products. SharePoint to maintain wireframes. Perforce to maintain code snippets. Random PDFs scattered about with visual design spec's. Email boxes full of discussions. It's a real mess.

score 0 · Answer 8 · answered Jul 15 '11 at 08:10

This depends on the tools you're using. Usually you can create a master file placed in a shared location. I've seen this done with Powerpoint (just a ppt with elements), Visio (custom stencils), Axure RP (widget libraries / shared project) and Illustrator (don't know how it was done exactly).

Creating a shared pattern library

8 Answers8

Linked