Breaking through the limits of brand style guides

Just about every designer’s dealt with a brand style guide, an authoritative document that dictates how a brand should look, speak, and generally exist in all mediums.

At Brooklyn Digital Foundry, we’ve seen our fair share of ‘em: the Do this, not that style guide, the Here’s a list of colors and fonts style guide, and the ever-so-popular Do we even have one of those? style guide.

Sound like a whole lot of rules to follow? Sure. But we find ourselves inspired by those constraints.

Creativity within confines can both challenge a designer and provide necessary guidance. Having endless room to explore can be paralyzing, because the land is vast and you can spend a lot of time feeling out the right direction.

A set of limitations narrows down your options, allowing you to explore in a more effective, directed manner. Here are a few key points on how to make the best of the brand style guide you’ll inherit.

Though we speak from an agency perspective, these points apply to in-house designers, agency designers, and freelancers alike.

Get the guide upfront

It’s important to get your client’s style guide immediately—before project kickoff. Otherwise, creative juices will start flowing, you’ll get attached to an idea, and then you’ll read the style guide and discover your concept doesn’t work for the brand.

That’s why the brand style guide is the ultimate starting point. You need it to understand a company’s culture, organizational style, and brand. When a style guide’s done well, you’ll always know the goals you’re designing towards instead of going in circles. It’s a necessary time management tool.

So, first things first: get that brand style guide.

Absorb it

Read the style guide and bookmark it for easy reference. Download all the brand assets. Share it with your developer early on so they can begin streamlining fonts and colors. Absorb every piece of information in the guide and start sketching.

Remember that following the rules doesn’t have to be stifling. A good question to keep in mind as you work: “How many different ways can I combine these elements together to make it feel like my own?”

When you’re armed with intimate knowledge of the brand, you can be 95% sure the design is going to be successful. You’re subconsciously taking those rules into account.

Seek inspiration

It may be intimidating to start work on an iconic brand, especially when dealing with something as sacred as a logo. But those elements are often your best confidantes in creating a successful end product.

Maybe you simplify the logo into a silhouette to use as a background pattern. Or maybe you discover the logo creates an interesting negative space you can use to create supporting shapes. It’s all about finding a piece of inspiration from the brand identity.

We recently worked on a press website for a global, multimedia streaming giant. Their style guide went into detail about how a certain shadow effect sits on all containers. We liked how the shadow created dimensionality and depth, so we ran with it. We used it to define a visual hierarchy for the user across the entire site.

If you can take one element of the brand and use it as a secondary element, that’s a subtle way of keeping the brand essence alive while still maintaining ownership of your work.

Find the loopholes

Even the most thorough of style guides has its Achilles’ heel. It doesn’t matter how precise the style guide is or how strict your client is with it, there’s always one thing that’s not present. There’s always some detail that nobody else has thought about.

It’s your job to find those holes and use them to your advantage.

As an example, a client of ours sent us an expectedly detailed style guide. We had 1 or 2 options when it came to design direction, and we tried our best to work with that. It felt like tedious work—until we realized that those restrictions opened up other doors we hadn’t yet considered. This was a 100-year-old brand with plenty of experience in traditional media. They defined everything as far as logos, colors, fonts, punctuation, and spacing were concerned.

But we were building a fully responsive website. We needed to take leeway with typography size and do away with notions of “the fold.” The style guide covered print standards but was lacking for digital. We brought in a lot of interactive elements and CSS transitions, ushering the brand into the digital age. This allowed us to infuse a bit of personality through additions like animations and UX elements, details that often aren’t defined in style guides. At least, not yet.

Create personality through filigree

Attention to detail brings a brand to life in the digital space. Fonts, colors, and tone help define a brand’s personality. Interactive elements and animations can translate that personality onto the web.

How we approach animations for one client is different than how we’d approach it for another. Take these 2 as an example: one’s a cutting-edge film school, the other a press site for journalists and media members.

In the case of the film school, we made sure the animations reflected their primary target demographic: creative, tech-savvy students. So we employed every CSS transition in the playbook to create an immersive experience. When you hover over a large image, 2-3 elements animate. Scroll down the page, and things transition up, come in, and expand.

For the press site, large brushstroke gestures of interactivity would detract from the content, which in this case is also their product. The audience isn’t trying to get sucked into an interactive experience—they’re doing something work-related, like reading a press release or downloading a corporate asset.

We didn’t want to get in the way of primary tasks, so we were much more restrained with those interactive filigree. We used more elegant, simple animations to help breathe life into the site. The character of the brand is friendly and accessible, so the web experience mirrors that.

Get the client on your side

In the design process you try a lot of things. You try to see how far you can push the boundaries and how far you can push your client. Creating forward-thinking design is dependent on your relationship with your client. You want your client to be someone who will go into battle waving your banner.

It’s important to have someone on the other side who can fight for your work and explain why it’s the right approach. That’s why establishing shared trust with your client is crucial. If you’re going against the grain, always be sure to arm that point person with your rationale.

Final thoughts

A brand style guide comes with the territory of being a professional designer. It may seem limiting to have so many “do’s and don’ts” ahead of you, but the most successful designers use those limitations to their advantage.

To recap: get the style guide and absorb it before you start—find elements within the guide that you can use in unexpected ways. Look for loopholes or missing information. Rely on filigree. And finally, be sure your client understands the strategy behind your design decisions.

Want to put some of these tips into practice? Check out these style guides:

• Adobe (opens PDF)
• Lonely Planet
• Mozilla
• PayPal (opens PDF)
• Slack