: What is the difference between a website Style Guide and a Pattern Library? As per the question, I am currently trying to identify a clear difference between a Style Guide and a Pattern Library
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.
More posts by @Gail6891361
2 Comments
Sorted by latest first Latest Oldest Best
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.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.