Pattern libraries and style guides

Although I created and ran a style guide for seven years of my career, style was the least of my concerns, and in retrospect, I should have lobbied for another title for myself, my group, our documentation and our activities. For in practice, it was always much more about patterns of functionality, data relationships and user contexts than about layout, typography and color. True, we aimed to use and render the same components in a consistent way, but the conversations I had with the rest of the design team were much more often around questions like “do we have a thing that does X, but with seven types of objects?” or “that design works well when users use it infrequently, but slows people down when they need to perform that task twice or more per hour.” Visual designers were pretty clear on what were their tools of expression — instead, it was information architects with information design problems who consulted me most frequently.

Might a design pattern library have suited us better? Perhaps. Most Design Pattern purists are quick to separate the use of a pattern library from that of a style guide, and we certainly wanted visual specifications to be clear and not mere options. If I were to do it again, I would probably build something that is very much like what we had — a component library — but in addition to organizing it by page type and layout, I would work with my fellow designers and developers on how to define and name components with respect to design problems — function, relationships, and contexts — so as to answer better the questions of my main style guide customers: the architects.

I like the way Infragistics has done this with Quince, released early this year. You can read more about it on Infragistics’s blog. But rather than simply use Quince and add visual specifications, I think it would be more successful if it were co-created within a company so it would better correspond to the mental model particular to that organization, and its indigenous design problems and language.