Why build a pattern library?A pattern libraries allow team members to quickly reference a set of standard elements and reusable components, and this set-up allows for greater productive while also saving both money and time.
Consistent user experience
As web design teams grows and change, keeping a pattern library helps to ensure a consistent user experience. As microsites and other digital properties are built and launched, a pattern library is essential in keeping a seamless experience between all related websites.
Pattern libraries not only create consistency, but they also quickly allow designers and developers to produce mockups, wireframes, and prototypes without spending hours on design and development.
Having elements that are reusable goes hand in hand with efficiency. Pattern libraries allow developers and designers to avoid reproducing and redesigning elements.
The evolution of the website benefits from a pattern library because it allows all team members to refer to the same code and design. New employees can quickly learn the corporate web standards and hit the ground running when team's have a pattern library for their website.
Typical elements of a pattern library might include:
- Visual layouts
- Color palettes
- Grids (mobile, desktop, tablet)
- Editorial best practices
- Call to actions blurbs, buttons, links
- Rules, guidelines, and toolkits
- Social media features
- Interactive elements
Here are several examples of successful pattern and design libraries:
|BBC Gel - Web Style Guide|
|Mailchimp Pattern Library|
|Starbucks Interactive Style Guide|
Additional resourcesCreating a UX Design Library PDF
Yahoo Pattern Library
Google Visual Guidelines
Boxes and Arrows - So You Wanna Build a Library, eh?
Smashing Magazine - Designing Style Guidelines for Websites
Smashing Magazine - Creating a Pattern Library with Evernote