Have you heard of pattern libraries, style guides, component libraries, design patterns or UI toolkits? Don’t worry if you’re confused or don’t know the differences. Here’s a secret—most people in the design industry are also a little confused.
With all these terms flying around it can quickly become overwhelming. But rest assured it’s actually much less complex than you might first think.
All these different terms can be grouped into two different categories:
1) STYLE GUIDES
These are brand guidelines for a website. They contain the logo, colours and typography. A style guide takes all the relevant parts of the brand guidelines and places them together.
2) PATTERN LIBRARIES / COMPONENT LIBRARIES / UI TOOLKITS
All these terms refer to the same thing.
They are a collection of reusable components that make up a website. Pattern libraries (as I’ll refer to them from now) are a way to represent everything that makes up a website. This includes the layout, structure and everything that is contained within them.
On an eCommerce website this would include a product item, a review, star rating, quantity, navigation, tables and buttons, to name a few. Each of these are called a component.
So, a pattern library is a collection of components that make up the website.
PATTERN LIBRARIES VS STYLE GUIDES
Websites require both a style guide and pattern library. They’ll often live together which might be where a lot of the confusion comes from.
Style guides apply branding while pattern libraries apply layout and structure. For example, the style guide for Levis would dictate the website should use red with a heavy font but the pattern library would dictate a product listing item should contain an image, title and price.
[Source:- webdesignerdepot]
