I work in a small team of designers and we've been slowly making our own Pattern Library. At the same time, the brand and marketing people have been collaborating with a visual design studio to develop a Style Guide.

Where do you see the line between the two being? How much of an overlap is there between the two? What are some heuristics you could apply to any particular design element concept to determine whether it is more a Style Guide thing, or a Design Pattern thing?

1 Answer 1


The relationship I see is that the Style Guide suggests how the Design Pattern should be presented.

Look at Jesse James Garret's diagram that is the foundation for his book The Elements of User Experience.

enter image description here

So, where do the two things fit in?

I suggest that the Style Guide is at the presentation level. It does not matter a jot what the site is for, who it's aimed at, how complex it is, the Style Guide applies to all incarnations and provides that level of consistency across all products that generates a portable branding experience and provides familiarity and recognition of appearance and affordance. Style Guides sit right up there in the Surface Plane.

The Design Pattern Library, however, is intended to describe how to collect elements of the interface together in little clusters of behaviour models. This relates more to the interface deign and the navigation design in the second layer, and consistent use of patterns provides familiarity (and consequently expectation) of behaviour, relationships and interaction. Design Patterns sit in the Skeleton Plane

A design pattern could be laid out in a variety of different ways and in different styles, but that should not affect the behaviour (although it may affect usability). Which is why the Style Guide is needed - to provide that layout and consistency at the presentation layer.

Now depending on the simplicity of the pattern, and the depth of detail of the Style Guide, there are going to be occasions where the boundary starts to get a little fuzzy, however, in those cases, precisely because it's more likely to be in the case of the simpler patterns, then resolution should be relatively easy without putting anyone's nose out of joint.

In summary:

  • Style Guides deal with consistency and presentation but do not care about information
  • Design Patterns care about information and interaction with content

If you don't have a situation where these areas can be seen as divided, then either the Design Pattern library is starting to care too much about presentation, or the Style Guide is starting to depend too much upon context, and this would need to be resolved. This is why someone needs to read, understand and be able to consider both areas. Doing both completely independently without monitoring would be somewhat shortsighted to say the least.

  • Once the Style Guide and Design Pattern Library are developed, would you expect UX designers to have to refer to the Style Guide on a regular basis as a resource?
    – Erics
    Commented Oct 31, 2011 at 13:54
  • 2
    I think the style guide is more of a reference for developers than for UX designers, but if a UX designer is doing a hi-fidelity mockup, then yes it makes sense to refer to the Style Guide for the visuals. I wouldn't envisage a style guide changing much once completed though, where as a design pattern library can continue to grow as new patterns emerge, are tested, tried, implemented, abandoned etc. Commented Oct 31, 2011 at 14:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.