b'

“Digital design is like painting, except the paint never dries,” British graphic designer Neville Brody has said.

While this thought might seem daunting, the reality is that anything we publish online will be altered, by us or by someone else, as time goes on. This is particularly true for websites, which tend to be frequently updated for content, features or design tweaks like changing images or calls-to-action.

This flexible, iterative approach comes with the risk that someone might unintentionally smudge your masterpiece. After all, they can’t read your mind…

That’s where a style guide comes in handy.

Whether you’re freelancing for a couple of small clients or working with a multinational corporation, you can create style guides for them to make sure their work stays consistent - like when an in-house team attempts to maintain the site you built. A style guide is paramount to the continued success of your clients work, and enables clients to build on your thought process.

Between the billable hours, the subcontracting, and the business development, you barely have time to scratch your nose. What makes this thing — a “style guide” — useful? Should you even care?

How Style Guides Save Time and Build Shared Context

Working one project at a time is simple enough. Unfortunately, that hardly ever happens in the freelance world. If you’re working on more than a project at a time, the stress and context switching costs add up. Without a clear organization and method of tracking, your memory might even mix projects up.

Your clients’ teams all face a similar challenge, but more complex. New projects crop up every quarter. Team members get staffed and shuffled around on different projects — which means they have to build context each time they switch.

Creating a style guide for each of your projects enables you to preserve the context you set and introduce it to anyone unfamiliar with your work. From a personal freelancing standpoint, you’ll stay organized and no longer have to rely on your memory. Rather, you can refer to one of your style guides to quickly and easily return to work that you’ve done months or even years beforehand.

Better yet, once you’ve kicked off this comprehensive guide, other client team members can read it to understand your logic and principles. They can easily maintain the tone and feel of the site or project, whether or not you’re still freelancing with the company. It’ll also save you having to teach everything to someone unfamiliar with your work in the future.

At the heart of all of this is the fact that a style guide will save everyone their most valuable resource: time.

While it does take a fair amount of effort and, yes, a bit of time upfront, the payoff is incredible. This is especially true with updates, and as other people (designers and developers) enter the equation.

Communicate the value of this tool — the shared context, and expanded longevity of the design — to your client, and include it in your fees. (Or, just show them this post if they’re really stubborn.) Maintaining a style guide takes work, but this is not about billing return work with your client (since you might not be doing the maintaining!)...

Instead, it’s about making something that’s dead useful and lasts longer than your contract with them, and produces great word of mouth referral marketing.

What is a Style Guide? Examples from Shopify, Dropbox, and BuzzFeed

There’s no one-size-fits-all definition that encapsulates what a style guide must or must not have, but the function is generally the same. Designer Susan Robertson writes at A List Apart:

[It’s] a one-stop place for the entire team—from product owners and producers to designers and developers—to reference when discussing site changes and iterations.

Any questions, sticking points, or challenges your team runs into during these conversations should be documented and addressed in the style guide.

There are a ton of companies that publish their style guides. Shopify has a useful style guide, and it goes way beyond colors and logo positioning. A section of the guide is dedicated entirely to language, and tone of voice, which works to keep the copy on brand at all times.

Dropbox and Buzzfeed also have useful guides, and they document their use of CSS and logos. In case you wanted to see how deep the rabbit hole goes, there’s a whole library of style guides for you to peruse!

How to Start Your Freelance Style Guide

Creating a style guide might sound like a tall order. In case you’re struggling with where to start — go with the essentials. What are your website or project’s foundations?

These elements can include a color palette, the grid layout system, or the font styles for your different text. It could also mean spacing recommendations, color schemes, image sizes, and typography guidelines…

Figure out what elements are most essential to the brand, and work from there. For example, Yelp’s style guide outlines the basics of font, grid system, and colors, before moving into more complex aspects.

Also, draw your boundaries. Know what your style guide will — and won’t — cover. In Yelp’s case, their UI/UX style guide covers just that, and they have a separate style guide for their branding.

Similarly, you could segment it like Shopify did with Polaris, and create different sections like product development, visual design, and copywriting. Or, just focus on your part — and leave the rest for the other product owners to fill out.

 Make Your Style Guide Easy to Maintain

Loading up InDesign and publishing a new PDF (filename might be “style_guide_v9.3.22”) to update your style guide isn’t an ideal solution.

If you’re looking to get started with simple, maintainable, style guides, check out a free trial with Frontify or Huge’s free Styleguide tool.

Make sure that updating the style guide happens as naturally as a step to updating the site, so you never fall behind.

And as time goes on, beware of the “zombie style guide,” the guide that lags and weighs you down as it becomes outdated and obsolete.

Your style guide will evolve and change, so make sure everyone who needs the guide always has access to the newest version. Make sure your guide is maintainable and — most importantly — that your client knows how to maintain it.

Final Thoughts

Remember, even though you’re building the style guide, it’s for everyone. That means even though you might refer to it later, your style guide now belongs to your client. You must make sure that they know how to use it, why they should pay attention it, and how to maintain it.

Some of them will understand faster than others...

...But everyone will come around eventually once the first non-guided design takes place.

Pagecloud has just released site-wide colors! Allowing you to create and save your brand colors in order to build your style guide! Do you design websites? Try PageCloud for free for 14 days. 

'