The Art of the Style Guide

Director’s Desk

Director’s desk is a series where I share my responses to real design questions that I’ve been asked by clients, partners, co-workers, etc. My answers here are a bit more tangential, but hopefully just as insightful!

Q: Over the course of a multi-phase project, how do you marry design and functionality with existing work, in order to preserve continuity in the end product?

I think the crux of this question refers to a skill that a lot of designers are still trying to hone, as we adapt to agile /sprint-based /phased design processes for web. That is, the art of the style guide.

Style guides, pattern libraries, design rules, etc. are a designer’s main tools for maintaining consistency across a project. They’re also useful for streamlining the design process and reducing the amount of ‘drawing board’ work, by providing a set of ground rules. But its imperative to remember that these guides should be considered as starting points, and not end goals.

The question then becomes: How do you manage style guides in this sort of nimble process? Create them too early and you find yourself shoe-horning content to fit half-informed design rules that were created before you had full understanding of the project. Create them too late and you risk doing repetitive work, and though its always good to have comprehensive documentation, the guides end up failing to serve their intended purpose of streamlining design.

I like to start the design process by writing a creative brief. This is especially helpful for large and/or phased projects. The brief should be a combination of the collected background information on the project, plus what was learned during the kick-off meeting, and should outline the unique objectives and the specific principles that will be guiding your design decisions. Sometimes this ends up being just a paragraph or two, and sometimes you find yourself needing to add a table of contents… It might feel like this task is a bit repetitive but writing out a brief in your own words shows the client that you’ve done your homework, which helps build confidence, and it generates a shared vision. Most importantly though, the brief establishes a clear design direction, which is the first step in managing consistency. The brief should act as a yardstick across all phases of the project to make sure that all functional, strategic, and aesthetic decisions that are made, align with your direction and serve the same goals.

When you start creating guides or rules during early design phases, do so with flexibility in mind. Consistency is important but it should never outweigh context. So start small, and treat these as living documents by refining them and adding to them throughout the course the project, instead of trying to define everything upfront. I like to keep this “master” document separate from my working files and update it consistently alongside the actual deliverable. Then, I begin each new design task by cloning this master document so I’m never starting from scratch.

Refer back to the creative brief often to be sure that the strategic and aesthetic recommendations that you’re making in design, are consistent with the established direction.

As designers our instinct is often to dive in and start making things look nice. This is especially true if you’re working on a redesign. But, its crucial to first understand all the mechanisms driving the machine so that you create actionable design patterns/rules that serve the content, not just decorate it. Only fools rush in. Elvis taught us that, and he knew how to TCB. Make sure you have a grasp on any content strategies or user experience recommendations that are established (sit in on those UX meetings!). Take a peek under the hood and review the CMS if one exists, and the content model (befriend your Dev!). And remember, just because a project is in a development sprint or a testing phase, doesn’t mean the designer’s work is over or on pause. There are design take-aways during every project phase that you can apply to your patterns/rules. Staying involved during the entire lifecycle is essential for understanding the full gamut of the project, and for making sure your design decisions don’t unnecessarily complicate the content or the workflow.

Refer back to the creative brief often to be sure that the strategic and aesthetic recommendations that you’re making in design, are consistent with the established direction. See what I did there? Seriously though, this is a simple (and often overlooked!) habit, and will ensure that your end product supports a holistic visual experience.