A Young Web Designers introduction to pattern libraries
Pattern libraries bridge the gap between static designs and interactive, coded content. It is an amalgamation of coded design elements that are ready for personalization and implementation on a webpage. A pattern library is essentially a web document that brings elements designed in a style guide to interactive life through code.
It is important to clarify the difference between a style guide and a pattern library early on in this discussion. According to Webdev Studios, a style guide is traditionally defined as a document that displays a company’s brand guidelines. These guidelines exhibit acceptable brand color palettes, proper logo usage, and establish the look and feel of a brand whether on a website or on printed marketing material.
All in all, style guides establish branding initiatives not only online, but in all brand interactions. So, even though style guides and pattern libraries are different and serve different functions, a style guide is not entirely separate from a pattern library. In fact, a style guide influences the look and feel of a pattern library, while the pattern library brings the elements featured on a style guide to life.
Pattern libraries are major branding tools created to ensure consistent brand styles online. Libraries define how elements on a web page look, how those elements behave, and provides the code for designers to easily implement the elements into their designs.
It is increasingly important for major corporations to implement pattern libraries because it gives designers on all levels access to the same styles to maintain consistency. According to Paul Boag, large sites are developed, designed and maintained by different people over a long period of time and frequently revised. Therefore, pattern libraries make web maintenance and upkeep much more manageable for large corporations to ensure consistency among many designers.
One of my favorite examples of a corporate pattern library is Yelp’s Styleguide. Yelp’s pattern library exists within its style guide.Yelp’s style guide and pattern library are merged into one dynamic document, which is an innovative approach to this concept, especially for a company that exists mostly online.
I will explain the beauty and functionality of pattern libraries using Yelp’s Styleguide as a glittering example. I encourage you to look over the pattern library yourself, but I will go over some features that stand out the most to me.
My first impression of Yelp’s pattern library is that elements on each page are responsive. This is a one-stop-shop for Yelp designers to implement styles that responds to different screen sizes. As a front-end developer, I can’t begin to fathom the amount of time this saves designers, considering the amount of mobile-optimized elements that can exist on one web page at any given time.
Furthermore, Yelp breaks up the patterns in the styleguide into typography, layout utilities, color, links, buttons, containers, forms, navigation, interactive, Yelp objects, marketing components, utilities and full width components. It is evident a lot of time and effort is put into the planning and implementation of this document because it covers every element that exists or will exist on the site.
I am most impressed by the library’s inclusion of layouts, which ensures foundational consistency before incorporating any of the stylized details. The layouts can be called into code by the prescribed class names. The easily identifiable class names are another strong feature of this pattern library.
Another striking feature of this library is the variety of buttons at the web designer’s disposal. Between the basic buttons, social media buttons, disabled buttons, and action links it would be difficult for various designers to style the exact same button more than once. Due to the fact that the styles are predetermined, the font, font size, padding, margins and any other styling on the buttons is consistent at all different mobile-optimized sizes.
The styleguide not only displays the button designs, it also explains when and where the buttons are applicable. It includes a link in the far right corner allowing you to toggle source code, which makes the code for the element visible and easily accessible.
When there are as many buttons present on a page as there are on Yelp this resource must feel like a lifesaver.
All in all, pattern libraries are an incredible, ever-evolving resource that is necessary for branding to enhance the professionality and functionality of websites. While it may be time consuming to plan, design and develop a pattern library, this tool will save time, ensure consistency, improve the overall code base and increase the standards and expectations of a site.
