June 1, 2012
Why and How to Build a UI Pattern Library
As a front-end designer or developer, managing today’s complex web, mobile-web, and multi-device digital ecosystems can become a nightmare. Since you’re often responsible for keeping your designs and code base in line for reuse over the duration of a project (and probably long after its completion), it is important to consider building a UI pattern library – one that makes developing apps and websites easier and allows for consistency across multiple devices.
Is a UI pattern library right for me?
Well, it depends. On the plus side, a UI pattern library offers a one-stop asset and code shop for designers and developers, encourages collaboration between disparate teams, and establishes a common design language. On the other hand, it can be a large time investment if you’re starting from scratch, and may limit “out-of-the box” thinking in the future.
If you’re simply designing a single app for the Apple iPad paired with a marketing landing page for the web, a UI pattern library is probably overkill. However, if you have several large disparate teams designing a suite of apps, each having their own desktop web experiences associated with them, perhaps you should consider having one.
Choosing the right type of pattern library
What, there’s more than one type? Actually, there are three. Developer-centric pattern libraries such as YUI Library and Prototype UI, focus on quick code production turnover. Designer-centric pattern libraries – including Welie Interaction Design Patterns, Endeca UI Design Pattern Library, Yahoo! Design Patterns, and Pattern Tap – emphasize problem solving through general UI recommendations. The third type combines both, allowing developers and designers to work in tandem (this is the type I recommend; try Foundation or Twitter’s Bootstrap).
Building your own UI pattern library
Should you decide to start from scratch, basing your library on an existing one is the best way to get things moving quickly. You can follow these five steps:
1. Start small. Begin with basic design assets such as tables, buttons, pickers, dialogs and modals, sliders, and login (if you have trouble choosing categories, you can select an existing library structure such as jQuery and build off that).
2. Add the code. Once you’ve established a set of patterns and building blocks, create a structure for your necessary asset files (scripts, CSS, images) and begin adding the specific classes to your markup.
3. Insert your custom designs. When you have most of the general pieces in place, you can begin populating your UI library with custom patterns (making sure that they complement, and don’t contradict, your existing ones).
4. Add styling/branding. While aesthetically it will look better to have a consistent look-and-feel across the entire UI pattern library by styling earlier, keeping design assets in black and white may help keep internal conversations focused on the experience rather than colors of buttons.
5. Provide examples aplenty. Great designers tend to “steal” good ideas; thus, the more examples you have available, the easier it is for others to follow your recommendations.
That’s only the beginning
When done right, a UI pattern library can serve as a very powerful asset in your design and development toolbox. However, the creation of a library is only as valuable as the number of people who choose to adopt it. You can increase adoption through business rules or by having a creative director throw down the hammer. Just remember, a good library should allow for feedback and follow-up iterations, and, most importantly, it should sit outside of a gigantic PDF file.
To get things up and running online, try out pattern library building services such as Patternry, or build your own gallery that’s branded for a new project. Whichever route you choose, having a solid UI pattern library for your project can save your team time in the long run while keeping the desired experience consistent throughout.