UX Style Guides & Pattern Libraries the Easy Way

Style guides and pattern libraries are about as fun to put together as specifications and annotated wireframes. I don’t know too many of my colleagues who enjoy either of these UX documentation activities. But, they are often a necessary component of our work as well as time savers. And, I am not sure if there is any formal UX documentation that saves more time in the long run than a good style guide.

I am the lead UX designer at GN ReSound – a major hearing aid manufacturer – and we recently redesigned our fitting software platform from the ground up. I have been here close to four years now. And, we have been talking about putting a style guide together for at least the past three. I have always known it needed to be done. But aside from putting together some Axure widget libraries for various projects, we had never really been able to get a true style guide off the ground. There are a lot of reasons for this – the sheer size of the project and limited manpower being the primary culprits. There is also an element of hyperbolic discounting in the sense there is a lot of front-end work to be done for which you don’t see the immediate benefits of.

The Case for Style Guides

So, why style guides? First, let’s define what they are. Style guides are often tools used by marketing to define or align brands. A strict style guide might only include logo use, color pallets, fonts/typography, sizes and some visual elements used to differentiate a brand. UX style guides are increasingly being referred to as pattern libraries. They usually include all of the items listed above, but also include any or all of the following:

• UI patterns used (tabs, navigation, button sizing/styling, card design, etc.)
• Interactions (expanding panels, hover states, active states, modal windows, etc.)
• UX guidelines (Progress Bars and Time Indicators, hover timing, communicating time, etc.)
• HTML if the app is web-based
• CSS if the app is web-based

Mostly, a style guide or pattern library dictates when to use certain elements and how they are styled. This ensures consistency in an interface.

These guides are a lot of upfront work, but they save time for both your internal UX team and your developers. Depending on your situation, they can be immensely useful. Suppose, for example, you have to outsource some design on a large project. A style guide can answer a lot of questions for the outsourced team and get them started quickly. If you are working with internal teams, it serves as a bridge within your own team and with development when they begin to translate your wireframes or prototypes into code. I have been on a number of projects where different developers work on different parts of the same system. At the end of a sprint, we often have to go back and align the styles of controls because different developers made different buttons or drop menus or whatever.

Ideally, a style guide or pattern library simply ensures your team is on the right page.

Maximizing the Usefulness of Style Guides and Pattern Libraries

The biggest problem I have always had with documentation of all sorts is people rarely tend to use or read it. So when we embarked on this project, we spent a lot of time talking about how we could ensure people would actually use the style guide when developing the product. Specifically, we were mostly concerned with the medium or format the guide should be in.

When it comes to the medium, you have a few choices:

Print: You can use MS Word, InDesign or Acrobat to create a digital version for print. I was (and still am) resistant to this idea. While it is nice to have a formal print document, the problem this creates outweighs the benefits. PDFs and Word documents tend to get printed out by a developer and the real problems start once you begin versioning the document. You eventually end up with various versions sitting on developers’ desks and recreating the problem you were trying to solve with the style guide (i.e. everyone is using different versions and, thus, different styles).

Create a website: Using an internal server or external hosting, I have seen a number of examples where teams simply put their guide online. This is fine if you have the time to code up your style guide. And, it allows you to have a “living document” where changes are real time. Having a living document is the gold standard in my opinion because it provides a single location where the changes are always up to date. The only hitch is you have to be on top of your style guide when changes occur.

Use a web-based service: When I was working on this, I kept thinking there has to be a company who has already built a platform where you can quickly get a style guide together without having to code it up. It isn’t that our team couldn’t code it up. It was simply we didn’t have the time. So I began searching…

Style Guide and Pattern Library Tools

These things always seem to happen late at night – a get a bug up my ass and decide to find a solution for some problem. So one night I am trolling around online trying to find style guide software and come across a couple – Frontify and Patternry.

My top pick was Frontify – specifically because of its pricing (among some other reasons I outline below). For $108 per year, you get 10 users, removal of the “Powered by Frontify” tagline, customized appearance (also with the free version) and 250 MB of storage. They also allow you a free version so you can at least try it out. The free version gives you 3 users and 100 MB of storage. If you need unlimited storage, you’ll have to cough up some bucks to the tune of $588 per year – probably well worth the money given he time you would spend creating something like this on your own.

Patternry is a nice alternative. But, you have to go in for at least the basic team version at $49 per month (or $588 per year). That basic version gets you 10 users and 1 GB of storage in a secure workspace. They also offer a 60 day free trial with no credit card.

So why Frontify over Patternry? They both offer a way to “try before you buy.” But, Frontify offers a cheaper first tier in their pricing and the ability to customize your site. The biggest sell for me was the $108 dollar price tag on Frontify. Sure, you don’t get as much storage and we could easily hit the 250 MB limit at some point in the future. But, it is easier to sell $108 to my boss today (and later upgrade to the $588 version) than it is to sell the $588 entry price for Patternry. If I get people to use it and show an ROI, it will be easy to sell an upgrade to my boss in the future by simply telling him we have run out of storage space.

Results

We are about 3 months into this project right now and the results have been positive. We have a developer we have added to the Frontify account who acts as the gatekeeper for his group while my whole team is on the account and adding items as we have time. It’s a living document and allows us to keep changes in real-time. We have also been able to customize our guide and can share the link with anyone.

Frontify does have some quirks. For example, if you build out an icon grid, you can’t really organize them except by name. But the guide does allow search, custom pages, GIFs, images, code and everything you could possibly need to get a guide quickly off the ground. You can see a whole list of the features here.

Other Tools

I haven’t been able to find complete style guide options beyond these two platforms. But, there are some alternatives if you are working in Photoshop or Sketch.

Zeplin allows you to upload Sketch documents and automatically creates an inventory of the different styles (to include sizing of elements) you are using. I’ve trialled this platform and think it is great for teams using Sketch only. Unfortunately, I use a combination of Axure, Sketch and Adobe based on my needs. So, it has limited applications on projects. But it does sync nicely and they have a plugin for Sketch.

Craft is an interesting new tool created by the great team over at InVision. I’m not completely clear on all of the features. But, if you are using Photoshop or Sketch with the InVision app, this appears to be a viable alternative for keeping your libraries in order.

Style Inventory for Sketch is similar to Zeplin except there is no online presence as there is with the latter tool. This is a plugin for Sketch that will automatically generate a page with art boards listing your styles. You could then compile that into a PDF document or include it within the project specifications.

Conclusion

Overall, the tool you select will be dictated by your workflow. I think Frontify offers the greatest flexibility for my current team. However, if you know of other tools, please comment below. I’d be very interested in finding – or at least knowing about – alternatives.

Photo courtesy of Sergey Zolkin | Unsplash Photos