Web Style Guide and Pattern Library

November 28, 2012

With a UX team of 20 people, some of whom are on short contracts, it has become increasingly important to maintain consistent visual and interaction design across our products.

This provides benefits for customer experience, but we also see benefits in code re-use, speed of design, deployment and other efficiencies.

Starting with our desktop web site, I managed a 6-month project to audit, collate and approve design patterns. I hired a freelance information architect to help me, and in consultation with the wider business, we produced an internal resource for use on projects. This combined a visual Style Guide and Pattern Library using WordPress and Dropbox for assets (PSDs and PNGs) so as to enable sharing with third party agencies as well as the internal teams.

The work is perpetually in progress (not least because we run many A/B tests), and serves as much as a place to describe patterns as it does to ask questions about them for further refinement.