3

As per the question, I am currently trying to identify a clear difference between a Style Guide and a Pattern Library within the context of Web Design and Development.

Logically, I feel I have an understanding. I have spent a lot of time, on the internet, trying to understand the difference, but it has just clouded my understanding. It appears that many of the aspects of both a Style Guide and Pattern Library are interchangeable. Maybe there are variations of terminology and interpretation, based on factors such as Geography and Industry.

The way I currently understand, a Website Style Guide would consist of factors such as:

  • Typography
  • Tone of written content
  • Logo Usage
  • Colour Schemes
  • Of course, other aspects too

Whilst a Pattern Library would consist of actual features on the website, together with their relevant HTML/CSS Markup, for features such as:

  • Text Boxes
  • Menus/Navigation
  • Layout
  • Bullet Points
  • Plus more ...

In other words, a Style Guide would be created first and become the 'Rule Book', providing all the relevant context on how the website should be approached. Whereas a Pattern Library is a breakdown of the Visual Elements of the website, providing the details of the Markup, where no context is included?

My understanding above, is mainly drawn from my logical interpretation of my preexisting understanding. Any further clarification, would be greatly welcomed and appreciated.

Improve this question

2 Answers 2

Reset to default
2

You’ve more or less got it right there. And there is definitely a need for overlap between the two.

In general:

  • a style guide (as its name suggests) helps you work out how to style things in a way that is right for the site, app, or business. It makes it easier to maintain visual consistency.

  • a pattern library helps you work out how to solve problems and present information in a way that is right for the site, app or business. It makes it easier to maintain usability, UX, and structural consistency.

A worked example: a pattern in the pattern library for a product post might detail that you show a title, a price, and a photo, and it might show how to lay those out (it may show several ways based on context). The formatting of the title, etc will be informed by the style guide.

As to which comes first: they both need to feed into each other. In theory you could have a style-agnostic pattern library - one that works with any stile guide - in practice though the two will be somewhat intertwined.

The good news is that you can certainly start both independently. You can start looking at typography, colour, space, etc without defining patterns, and you can start wireframing patterns without knowing what font you’ll be using.

Improve this answer
2
  • Not sure why a pattern library would ever influence a style guide
    – Ryan
    Dec 13, 2017 at 20:04
  • 1
    Because nothing is ever ‘finished’. I’ve found that new patterns and components can create the need for new styles that can then, themselves be applied and explored more widely. (Strictly, you’re quite right though - ideally style and presentation/structure should be separated.)
    – Alex Magill
    Dec 13, 2017 at 20:16
-1

I guess the website style is about the layout and the appearance of the page, and the pattern concerns the format of the script and text in general! I hope this help, and that an expert will give a better answer for all of us.

Improve this answer

Your Answer

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

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