Our new style guide
Style guides and pattern libraries are infrastructure for interaction design. They allow experienced designers to work faster, maintain consistency with their colleagues, and communicate more effectively to developers. Non-designers can also use them to prototype products with less guidance. Last week, we released a brand new version of our pattern library, alongside a style guide and visual redesign.
Before this redesign, our common design patterns were in desperate need of an overhaul. Last fall, we spent a few weeks working to create a pattern library for DOBT, consolidating our most common styles and interface elements into one place. But as time went on, we became distracted by other tasks, and effectively abandoned the project.
Part of the problem was the sheer volume of work. From a technical perspective, our CSS was too specific and contained many overrides. The only way to test a common pattern like a page header was to manually check every place in which it appeared. But, eventually, our technical debt caught up with us.
The breaking point for me came when I was experiencing a hard time pushing even small changes to the site, because I wasn’t sure what I would break. This was especially frustrating because Screendoor has long been due for a visual refresh: our type sizes were small and occasionally hard to read, and our spacing and positioning of UI elements were inconsistent. How could I advocate a redesign of the entire product when I could barely ship a simple change in under a day?
We needed to strengthen our foundations and elevate the overall quality of the work. This style guide is a first step towards that.
On a project like this, it’s great to be on a small team because visual fidelity and style can win over the need for scalability. We don’t have to include every pattern a designer might need, just the ones we regularly use. Also, when our base styles have minor visual issues, I can add small visual tweaks to fix them, knowing that I can always tell developers myself if they override them accidentally.
Most of the work here involved organizing the patterns we already use in a way that others could easily understand, and visually restyling each pattern to fit our new look. But I also took this opportunity to add some design guidelines, helping developers understand how and when they should use each pattern.
Centralizing all of our patterns into one location has already paid large dividends. For example, you’ll notice that we’ve updated the design of our blog. After we released the style guide, I updated our blog’s code, and it took about 30 minutes to tweak that layout to what you see now. By comparison, a redesign from scratch would take at least a day or two.
Josh Rubenoff is a product designer at The Department of Better Technology.