Application design: are pattern libraries the new deliverable?

Back in February last year, Anna Debenham caused a bit of a stir in the web development and application design world with her post entertaining the idea of incorporating pattern libraries into the web development process. Since that post, brands ranging from SurveyMonkey to Lonely Planet, and FontShop to MailChimp have all released their own pattern libraries into the wild to great fanfare within the web community. So what is all the fuss about?

How do pattern libraries work within application design?

To those who have not heard of the term, a pattern library is a birds-eye view of each and every ‘module’ (or designed component if you prefer) within an application or website’s codebase; essentially a holding place for aspects of a project that have already been designed and developed into the browser and can therefore be reused across the website. To some this may seem frivolous; something in a project icebox that will be looked into ‘if everything else has been ticked off’. However, after incorporating the idea into our workflow for Netcall — a client who had the task of redesigning and redeveloping an entire suite of applications into a unified application — we discovered that pattern libraries are an ideal deliverable; a deliverable that can scale.

Via focussing on specific ‘modules’ within a project it became apparent that the focus of the team shifted significantly away from subjective opinions and towards consideration of the long-term scalability of the product. Rather than debating over a superficial application design tweak that the end user may not necessarily acknowledge let alone appreciate, decisions were made holistically based on consideration of ‘the bigger picture’. That is not to say that designing and developing templates in the traditional sense promotes subjectivity within a production team; more so that pattern libraries retract the temptation to spend excessive time deliberating over “the position of a logo” or “the number of columns in the footer” — with a pattern library, modules have the flexibility to deal with a variety of use cases that may become more influential as the application grows.

Isolated components can be developed that have the flexibility to be repositioned, repurposed and restyled as the project grows and adapts to the user’s needs – if you’re a web developer that means writing modular CSS with low specificity (to avoid being curtailed by the cascade) and if you’re a designer that means consideration of edge cases (not the convenient equal columns frequently seen in PSDs).

In addition, as a pattern library holds the essential building blocks of an application (or website), building blocks that will form the basis of future projects, developers are invited to write code that adheres to rules — rules that future developers making tweaks, amendments and additions to the codebase can follow, made especially easy through clear documentation and object-oriented CSS/JS. By simply shifting the convention of handing over a complete application to a client with perhaps little consideration of other developers/designers working on the codebase in the future, to one that provides a basic framework or foundation for all to benefit from; the chance of the codebase deteriorating 18 months after launch is significantly reduced, along with a perpetual “shame” file overflowing with hacks and quick fixes.

What are the benefits?

By designing related modules together such as navigation options (i.e. stacked, inline, off-canvas) or form elements, for example, those working on the project (developers, strategists) have a clear overview of the available modules within the project’s codebase, how they can be used and any code snippets related to said module, speeding up the continuous development process even further.

And the result

We’ve been fortunate over the past few years of working with Netcall, The Ford Motor Company and Shell to produce a range of pattern libraries all with a focus on creating; consistency, scalability and usability. For both clients and ourselves, the delivery of a pattern library has become one of the foundations of a successful application design project.