Tools for building a pattern library

Hi Darren,

You might be interested in Patternry (http://patternry.com), a tool for building user interface design pattern libraries.  

Patternry matches your needs very well:

• You can create a private workspace for your company which will have its own web address under patternry.com
• You can create a pattern library for each of your Websites and easily switch between them. 
• Each pattern library has a front page displaying the library name, description, and preview of all the patterns as thumbnails.
• Users can add new design patterns and contribute to existing patterns by adding images, useful links and comments. Code snippets can’t be added at the moment, but you can use an external source code repository/wiki and link to it. However, the ability to add code snippets to Patternry is already on our to-do list.
• Patternry works with all modern Web browsers (if that’s what you meant?).
• To access a private pattern library you need to sign in. Private URLs might come later.
• Patternry is the fastest way to build a pattern library ;) For example, you can use our public patterns (licensed under Creative Commons) as a starting point for building your own pattern libraries.

Right now we are in public beta and will launch in the near future. 

The idea behind Patternry was born a few years back when I built my first design pattern libraries and was surprised how much work it required to build and maintain them. However, if you decide to use a wiki/CMS instead, have a look at my Master’s thesis on creating a UI design pattern library (it’s few years old but still relevant): http://www.scribd.com/doc/29180579/Developing-a-UI-Design-Pattern-Library-A-Case-Study-at-eCraft-Master-s-Thesis

-Janne

I feel your pain with this. Have been fighting this battle for a few years now myself.

You have quite the wish list and I absolutely understand why. When I tried to tackle the problem, I wanted all the things you list plus a workflow system with a review status with notes and justifications too! Including voting and formal challenges to make the library something that could capture all the offline discussion. I wanted to fight the lack of process and authority with structured standards for reusable thinking across different sites and platforms -web, mobile app, desktop apps, widgets, etc.

I say all this because where we ended up is a lot more lightweight and meaningful. Something that you could set up more as a wordpress blog. If you take a look at patternry.com as an example you will see that there are simple sections where the most important aspects are explanation (with pictures) and related patterns. The other sections can link off to things internal and external as needed. We found that it is more important to let people post their documents and information wherever they like and to use a pattern to represent a Hub for the stuff that matters.

Isn't that what interaction people do anyway? We act as hubs for information that matters most to the quality of how the interaction works? We don't have to be an expert in everything, but sometimes act as facilitators who gain trust in the quality of the end result.

Similarly, that's how the library should function - not heavy handed, consistent, helpful and the work and collaboration speaks for itself. After a while, the library becomes a necessary resource to QA people as a single link to access shortcuts to all the documentation they need. Once people start relying on the library, it will seem that any link not in the pattern becomes invisible, and people will start to refer to the patterns and challenging others ideas compared to the patterns. It will take on a life of its own.

To recap, my advice is the following: 1. Start small and qualitative when choosing what patterns to do 2. Limit the scope of the library to include description, relationship to other patterns, and meaningful links to other stuff 3. use a blog or a site like patternry.com where you can easily categorize, associate related patterns, and expose public vs private posts as needed.

You may find that people will grow to love it for it's simplicity and boundaries. Hard to argue and get stuck with a lightweight resource. Let people be your advocates no matter what it's built in.

Good luck!

Sent from my iPad

On Apr 17, 2011, at 1:33 AM, Darren Ellis wrote:

> What tool(s) did you use to set up your UI pattern library? > > I know this question has been asked before*, but after repeated searches I'm not finding much of an answer. Seems there aren't any simple ways of doing this. > > I'm currently using a mix of documents in collaboration with custom built (aka one-off) web-based solutions, but these aren't optimal for several reasons: > > 1) Our documentation and online sources vary in structure and organization > from site to site (5+ websites). This happens when you have multiple > designers and dev teams. > 2) Documentation is inconsistently updated and shared because it typically > gets buried in folders and loses attention as different projects come up. > 3) Online sources are currently developer centric, as they only contain code > snippets (for recycling code) and live examples (awesome for verification > purposes). > 4) Online sources vary in implementation from site to site. Each one looks > and behaves differently as you navigate through them. > 5) Online sources are only updated by dev. They translate design > specifications into the working samples mentioned above. > 6) No guidelines for use are included in the online sources. It's very much > focused on repeatable code, at the moment. > >
> > What we'd like to have is an online tool, that's centralized, editable by various teams, and consumable by others outside of the company. Specifically, we'd like: > > * Centralized documentation. That's quickly accessed via a bookmark. > * Ability to switch from one site to another with the overall structure and > organization mostly remaining the same. > * A table of contents (á la a wiki) that is present while navigating > library. Thus allowing readers to jump in and out of sections and > providing visibility of overall library structure. > * Allows designers to provide pattern rationale, use guidelines, notes, etc. > * Allows designers to upload screen shots of UI or UI specifications > * Allows developers to drop in code snippets and notes > * Allows developers to include working examples of code > * Library supports multiple browsers (this could be helpful for QA purposes) > * Part of the application and accessible to outsiders with right access or > knowledge of location > * Something that can be set up with minimal resources. > > Are wiki's really the only option? Any ideas would be very much appreciated. > *http://www.uie.com/brainsparks/2009/01/09/tools-for-creating-pattern-libraries/ > >
> > (

I use atlassian confluence. It's powerful enough to do almost anything I could do with a custom built solution, and it's simple enough that new starts are not overwhelmed by it and discouraged from editing pages.

My opinion is that the content has to be valuable enough to your teams that they will seek it out wherever it is. Corporate culture has more to do with adoption of your documentation than the location or format of it.

On Sun, Apr 17, 2011 at 7:13 AM, Darren Ellis <anttanant@hotmail.com> wrote:

What tool(s) did you use to set up your UI pattern library?

I know this question has been asked before*, but after repeated searches I'm not finding much of an answer. Seems there aren't any simple ways of doing this.

I'm currently using a mix of documents in collaboration with custom built (aka one-off) web-based solutions, but these aren't optimal for several reasons:

1) Our documentation and online sources vary in structure and organization
  from site to site (5+ websites). This happens when you have multiple
  designers and dev teams. 
2) Documentation is inconsistently updated and shared because it typically
  gets buried in folders and loses attention as different projects come up.
3) Online sources are currently developer centric, as they only contain code
  snippets (for recycling code) and live examples (awesome for verification
  purposes).
4) Online sources vary in implementation from site to site. Each one looks
  and behaves differently as you navigate through them.
5) Online sources are only updated by dev. They translate design
  specifications into the working samples mentioned above.
6) No guidelines for use are included in the online sources. It's very much
  focused on repeatable code, at the moment.

 

What we'd like to have is an online tool, that's centralized, editable by various teams, and consumable by others outside of the company. Specifically, we'd like:

* Centralized documentation. That's quickly accessed via a bookmark. 
* Ability to switch from one site to another with the overall structure and
 organization mostly remaining the same.
* A table of contents (á la a wiki) that is present while navigating
 library. Thus allowing readers to jump in and out of sections and
 providing visibility of overall library structure.
* Allows designers to provide pattern rationale, use guidelines, notes, etc.
* Allows designers to upload screen shots of UI or UI specifications
* Allows developers to drop in code snippets and notes
* Allows developers to include working examples of code
* Library supports multiple browsers (this could be helpful for QA purposes)
* Part of the application and accessible to outsiders with right access or
 knowledge of location
* Something that can be set up with minimal resources

Are wiki's really the only option? Any ideas would be very much appreciated.
*http://www.uie.com/brainsparks/2009/01/09/tools-for-creating-pattern-libraries/

 

(((Please leave a