Email iconarrow-down-circleGroup 8Path 3arrow-rightGroup 4Combined Shapearrow-rightGroup 4Combined ShapeUntitled 2Untitled 2Path 3ozFill 166crosscupcake-icondribbble iconGroupPage 1GitHamburgerPage 1Page 1LinkedInOval 1Page 1Email iconphone iconPodcast ctaPodcast ctaPodcastpushpinblog icon copy 2 + Bitmap Copy 2Fill 1medal copy 3Group 7twitter icontwitter iconPage 1

One of the biggest challenges to success in a new product is ensuring you create an intuitive user interface and that you can react quickly to changes in requirements as you learn more. We use pattern libraries at UVD to help us achieve exactly that.

What is a pattern library?

As the name suggests it’s a reference of all the user interface patterns or components in your product. A pattern is a term we use to describe a user interface design that solves a reoccurring or specific need; be it navigation, how a news article is displayed or how a user completes a certain action.

A pattern library will document, and serve as a reference for, everything from the colour palette and typography, through to small items such as buttons and how they fit together to form bigger UI components such as a form. Pattern libraries can also be referred to as style guides, which are very similar but can go a bit further to include guidelines such as ‘tone of voice’ amongst others.

Vote for Policies pattern library pattern library

There are some fantastic examples of companies adopting pattern libraries in order to help improve their user interface workflow.

Why use a pattern library?

By adopting a pattern library as part of our workflow we’ve observed the following benefits;

  • Consistency. The design process moves more towards building a ‘system’ rather than page by page. Holistically the design becomes more consistent due to having a place to reference what’s been designed before. A consistent design leads to familiar, predictable, and therefore better user experiences.

  • Speed. Developing new design solutions can become quicker since we have a catalogue of existing patterns to incorporate or modify in someway to solve the problem at hand.

  • Better conversations. The nature of discussing the user interface – breaking it into smaller pieces and naming it, allows us to have a shared understanding of what parts of the user interface are. Conversations between clients, designers and developers feel clearer.

  • Testable. As our patterns are documented in code and are available in the browser, the environment in which they’re documented is representative of the environment in which they’re seen by your users. This allows us to test how the patterns hold up across different screen sizes, input devices and browsers.

    UI Patterns documented in codeUser interface documented in code

  • Respond to change and maintenance. Having an accessible snapshot of the whole user interface system allows us to confidently fix or update an element and understand what the impact of that change may be, without having to introduce into the main product.

  • Prototyping for validation. Having a pattern library allows us to quite quickly scaffold a prototype of a new feature out of existing UI components in the library and present it to a user to validate a feature idea.

  • Collaboration. Having the pattern library separate to the main application reduces the barrier to entry to contributing to the interface of the application as designers can work on the pattern library alone without having to set up the entire application. The pattern library also works well when bringing other developers onto a project to help familiarise them with what the user interface is comprised of.

What we use

We are continuously looking for ways to improve our workflow and our tools will change and adapt over time. We’ve had a lot of success using Fabricator as our pattern library generator, which we’ve written about but emerging tools such as fractal look interesting and we’re keeping our eyes on those.

Should I have a pattern library for my project?

Whilst they’re certainly not necessary for every single project, if you wish for your user interface to scale and adapt quickly and predictably to changes in user needs, then they’re an effective tool to help deliver that.