What is a Pattern Library?

You have to keep the look and feel of all of your business’s branded web assets consistent with one another.  It is wise to create a document that defines how this branding will continue to stabilize as your business offering change and as your staff (i.e. your graphic designer) turn over.

Related to this need, you might have heard of a “style guide.”  Even in literary fields there are guides such as the MLA Handbook or the Chicago Manual of Style.  There is something analogous to this in the web design world called a style guide, examples of which you can find on this post from Canva.

So What’s a Pattern Library?

A pattern library is like a style guide, but instead of it defining the elements which are outwardly facing, a pattern library is a repository of the way code should be written with consistency.  A couple of pattern libraries I like (oddly enough called Style Guides) have been created by AirBnB.  They describe, respectfully, how their programmers should write CSS and Javascript.  They are both available on GitHub at:

https://github.com/airbnb/css

https://github.com/airbnb/javascript

A pattern library is great because it allows developers working with you to reuse code without having to slow down to make these types of decisions all on their own. MailChimp has theirs, a much more visually useful pattern library here:

https://ux.mailchimp.com/patterns

Very nice.

If you are serious about UX, you will want to start collecting all of your code snippets, primarily from those pieces of your web assets that are the cleanest and most compatible with the other development tools you are using.  Start organizing them, and create a living document that might change over time but at least will keep you on track as your business grows.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s