Ultimate Guide to Designing Brand Guidelines

Does your web design business have a brand?

Even if you haven’t put much thought into branding your web design business, your clients probably already have an opinion about your business. You may even already have a reputation for doing a certain type of work. That reputation is one of the branding basics that you should manage.

Branding is important for web designers. Not only must you develop a recognizable brand for your own web business to stay competitive, but often clients expect branding help from their designer. If you can’t help your clients with branding, they’ll find someone else who can. Hopefully, this post will help boost your creativity so that your client’s complete brand packages are exactly what both of you are looking for.

That’s why it’s important for web designers to understand a few basic principles about branding. In this post, we’ll describe six basic branding principles and explain how they relate to web design.

branding

Branding Basic #1. Relevance

Your web design brand needs to target your potential clients. (Likewise, a client’s brand should target their potential clients.)

You want your clients to understand how your business relates to their needs. You want them to understand the value that your web design business offers to them. Potential clients also need to understand how your web design work is different from the design work of other web designers.

In order to create a relevant brand, you first need to understand your clients and potential clients. This means doing some research. Talk to existing clients and prospective clients to discover what they already believe about your web design business. You may even find that you need to change pre-existing opinions about your business.

Making your brand relevant to your prospects is sometimes called positioning. (Although, not everybody agrees on the definition of positioning.)

Relevance is only one aspect of branding that designers need to be concerned about. Appearance is another aspect.

Branding Basic #2. Appearance

branding-appearance

Image by: scui3asteveo

Appearance is usually the first thing that many web designers think about when the topic of branding comes up. Appearances include such features as:

  • Business Logo
  • Website Design
  • Color Scheme
  • Images
  • Fonts
  • Business Cards and Stationery

Obviously, web designers can provide a lot of assistance to their clients when it comes to appearance.

When it comes to your own website, appearance often determines a prospective client’s first impression. That brief first impression determines whether the prospect stays on the website, or quickly moves on.

While appearance is an important branding factor, it’s not all that there is to branding.

Branding Basic #3. Content

Content is another important aspect of branding. This is particularly true if your website or your client’s website contains a blog.

Remember that blog posts are likely to be indexed higher in the search engine results and are also likely to be shared on social media. So, what you publish on your blog may be what draws potential clients to your website. Everything that you publish is a reflection of you and your web design business.

Since your website content represents your business, naturally you want to publish only the highest quality content. However, well-written content on your website is not helpful if you’re not consistent.

Branding Basic #4. Consistency

A brand should be recognizable. One thing that top brands have in common is that their potential clients know who they are after reading (or hearing) just a word or two or by glancing at a logo design.

Everything about your website should reinforce your brand–from the design to the content to the font used. The same is true for client websites that you design.

Consistency is just one of many good reasons why website designers and content strategists should work together. If you are inconsistent, you’ll create confusion instead of a powerful brand.

While it sounds simple, it can be difficult to maintain a consistent tone for a website and for its content, particularly as time passes. You want to be flexible enough to meet your client’s needs, but consistent enough so that your brand’s message is not diluted.

Another aspect of branding that you need to be concerned with is your business reputation.

Branding Basic #5. Reputation

brand-reputation

Your reputation can affect your brand’s effectiveness.

Reputation has to do with how others perceive you. While it might seem like you can’t control your reputation, how you act and what you say greatly affects the opinion that others have of your business. If you say your business stands for a particular value while behaving in a way that is inconsistent with what you say, then your brand may be damaged.

To build a good reputation, pay attention to your client’s needs. Deliver what you promise. Always turn in your best work. The branding message you are trying to convey should match the way that others think of you.

Trust is the primary goal of building a good reputation. The more that prospective clients trust you, the more likely they are to do business with you.

Of course, if very few prospects have heard of you or if prospective clients have a heard time finding you, then having a good reputation with a handful of clients doesn’t help much.

Branding Basic #6. Presence

Another important part of branding is establishing a presence for your brand. Prospective clients can’t do business with you (or even form an opinion about you) if they can’t find you or don’t know about you.

Here are three ways you can build up your presence:

  1. Advertising. This can be an effective way to increase your presence, but many advertisements are too expensive for the beginning web designer. If you do advertise, make sure that the medium where you place your advertisement targets your prospective clients.
  2. Social Media. Social media is a great and inexpensive option for building an online presence. There are many social media options available. One danger with social media is the temptation to behave differently than the brand you are building. Don’t forget your brand message.
  3. Community Involvement. Getting involved in the community is a good way to build your presence. Your community participation should be directed to your prospects. Giving a presentation to a local business organization is one possible example of community participation.

branding-presence

In general, it takes time to build a strong presence in your target market. It’s important to realize that it could take weeks or even months before you see any results.

Whether sculpting a new identity or working with an existing one, brand guidelines can be exceedingly important to the whole creative process. A branding guide (also known as a style guide or brand book) offers a set of rules about a company’s brand to anyone who may need them. To whom might these rules be directed?

Basically, anyone who may need a company’s branding added into their own work. Authors, editors, copywriters, marketers, web designers and/or graphics designers are just a few examples. The purpose of a branding guide is to offer a step-by-step process for duplicating the company’s identity.

Although it may seem like a rudimentary process, brand guidelines need to be super clear and relatively specific. Each company will make up their own rules based on how their identity should be used out in the wild. Since this type of project can easily lapse into a state of disarray I’ve put together this handy guide for designers. You’ll find a metric ton of great examples along with practical tips which can be applied to your own branding guide.

Why Create a Branding Guide?

This whole branding guide thing probably sounds like a bunch of work for little in return. But much like a strong career or relationship, you get out what you put in. A style guide is meant to clarify the special features of a company’s identity. These special features should be touted and supported by others who refer to your style guide as a tome of reliable branding concepts.

The other major purpose would be for internal company use. When an employee or executive comes up with a new idea it will often need some design work. This could include packaging, product design, marketing, or even a new website design.

By having the company’s identity structured in an easy-to-reference guide it becomes a designer’s perfect right-hand man(ual). Each section in the branding guide should help the design team or craft the best possible design for any new product. It’s also useful for other internal company work like a newsletter design or a new marketing campaign.

It’s also worth mentioning the value a branding guide can have on press relations. Of course, this includes newspapers and online journals, but what about other partner companies? For example, the homepage of InVision App uses a list of client logos to demonstrate their value in the marketplace.

01-invision-app-brands-logos-clients

A useable branding guide will service all of these different needs at once. It may seem like the company doesn’t get a lot out of the deal. But it’s comparable to writing clean documentation; At the time of writing it doesn’t seem very worthwhile – but weeks or months down the road you’ll recognize the immense benefit.

What To Include

I hold 2 somewhat contradictory opinions on what to include in a branding guide. You should obviously try to include as much useful information as possible, but the guide should also be lightweight and easy to skim. Finding a balance between these two ideologies can be tough. But it’s a necessary evil when choosing how much content to include.

Content volume depends on the pertinence of each section and how much company identity is available. For example, it’s usually a good idea to include resources for the company logo such as vectors or PNG graphics.

Whether you choose to include content for the company’s writing style, typefaces, or colors schemes is a question of relevance. Will that extra information prove beneficial to the guide or just weigh it down?

02-google-design-links-resources

Take for example the Google Design info page. This includes numerous links to Material design resources, videos, and other cool stuff. It’s primarily focused on design and avoids topics like programming or copywriting.

03-android-app-writing-style-guidelines

But if you search elsewhere you’ll find writing guidelines for Android apps, a style guide for Google Code projects, and YouTube guidelines for branding your own API application. There is no single answer to how much content should be included because each company has a different set of needs.

Organize the important areas of a company’s identity and fill in the other gaps as needed. Since each project is slightly different you’ll churn out different results each time. But the creative process is always similar and places a higher priority on necessity over content volume.

Readable Content

Simplicity is comforting. Too much information can be daunting and sometimes just plain frightening. A brilliant style guide should be warm, welcoming, and insanely simple.

Style guides are mostly built around design – but the actual guide content requires plenty of writing. The method in which you choose to write each page will play a role in how visitors consume the information. Make sure to remove extraneous sentences which seem to deter from the subject at hand. Also, try adding labels, bullet points, or quick tips which aren’t quite full sentences but still convey accurate information.

04-salesforce-design-guide-branding

The Salesforce style guide is only a few pages but the important stuff can be found right on the homepage. Their UI diagram incorporates callouts for explaining immediate visual features. Everything is really easy to find and the site itself is quite well-designed.

Concise phrasing along with succinct content will produce the highest quality guide. This isn’t meant to be a college dissertation on the pros & cons of table salt. A style guide should merely convey information in a lighthearted manner so it can be picked up and reused elsewhere.

05-mapbox-base-style-guide-website

To see a more complicated example check out the Mapbox style guide. This uses a lot more pages and focuses on areas of written copy, design, and development. Although it feels a lot more technical the page is actually meant to be this way.

Mapbox has created a type of style guide fused with online documentation. It may seem convoluted but it’s still easy to read and navigate. If you need to create a sizable guide with dozens of pages ensure that each page is accessible.

Common Branding Guide Techniques

In the following sections, I’ve outlined different ideas that should help designers figure out which pieces of identity should be included in a branding guide. Along with relatable tips, I’ve also included live examples from real style guides found on the web.

Take advantage of these examples to learn from some of the best. Style guides and brand books are very subjective because they relate to each individual company. So copying these exact layouts may not play out as well as you’d like. Instead, copy the general concepts and infuse them with your own design ideas.

Logo Styles with Assets

Quite possibly the most important part of a branding guide is the inclusion of identity assets. This would be logos, taglines, mascots or related icons which accompany the branding. People who want to include your company’s logo into their site will rely on these assets.

06-twitter-brand-logo-assets-guide

Take for example Twitter’s brand assets page. It has EPS and PNG file formats to download their logo in high-resolution. But it also includes some very specific rules for colors and placement of their logo. Colors, fonts, spacing, and location are all very important.

Each company should decide how specific they wish to get with asset rules. Some logos can work in various colors so the guidelines could be more relaxed. Just remember that visitors are relying on this style guide to explain how to use the logo properly.

07-mailchimp-logo-guidelines-branding

MailChimp’s brand assets use many of these same features. Their guide demonstrates how to use the logo, good & bad examples, typefaces, colors, and placement. They’ve also chosen to use EPS and PNG files for the assets. These are generally two common choices for asset files.

EPS is usually a filetype associated with Adobe Illustrator that contains vector data. These files can be opened in other programs like Photoshop which makes them ideal for vector edits. But PNGs are best for people who don’t want to edit vector files. PNGs still allow transparency and will be much higher quality than JPEG images.

08-wordpress-logos-branding-guidelines

Corporate Identity

Large corporate style guides will be much more detailed than startups or web projects. Larger corporations typically employ hundreds-of-thousands of people and have a more chaotic managerial hierarchy. Design rules often end up cluttered and slightly more confusing in comparison with smaller companies.

09-best-buy-brand-guidelines-homepage

Possibly one of the cleanest examples can be found on Best Buy’s Brand Identity website. This operates as a large segment of the company with its own blog and YouTube page. The individual guidelines are broken up into separate Best Buy brands like Geek Squad, Insignia, Dynex, and of course Best Buy itself.

10-geek-squad-visual-logo-guidelines

What I like most is that each page has its own content with unique tabs and resources. Everything still falls under the Best Buy umbrella, yet individual brands are granted a little sovereignty with their own asset pages.

One drawback I have with the Best Buy style guide is navigation. Although it is straightforward it also comes off as very “corporate”(for lack of a better term). By this I mean it feels like the design was placed as an afterthought to the content hierarchy. Most of the pages are just image slideshows and there’s very little HTML web copy. Putting that aside it’s still an excellent corporate guide with solid information.

11-mastercard-brand-center-website

You’ll notice a similar design effect on the MasterCard brand guide and the Adobe branding PDF. Everything is still accessible and easy to read, but there’s a conspicuous difference between smaller style guides and these larger corporate pages. Keep this in mind if you’re ever working with a larger company or searching for brand assets from a larger company.

Specific Do’s and Don’ts

If I had to recommend one trait for each style guide it would be a list of do’s and don’ts. People often learn best through example, so if you can show the identity in action it’ll be that much more powerful.

The “do” list should include all the things that work for the identity. Colors, spacing, placement, and general edits that will stay true to the identity. Obviously, the “don’t” list should include things that people should avoid. But more specifically, these things should be common mistakes that people often make when using brand assets.

Just like the Facebook Do’s and Don’ts page, you’ll probably find yourself putting a whole lot more in the “don’t” list. This is to be expected since there’s usually more that can go wrong than right. Try your best to avoid overloading readers with too many don’ts – especially stuff that is unlikely to be done. Stick to common errors and tweaks that really mess with the identity.

Colors & Text

Web-based companies will rely more on digital identity. This obviously includes logos but it may also include website colors and fonts. Take for example the WooThemes style guide which covers a bunch of different topics.

12-woothemes-style-branding-guidelines

WooThemes has included everything from their company logo, their ninja mascot Hiro, web typography and even coding standards. Code standards would be used by affiliate websites that mimic or incorporate WooThemes content. You’ll find buttons, form fields, icons, and even notification boxes.

What I like most about their style guide is how everything can be found on a single page. There’s a lot of content to sift through but it’s still easy to navigate.

Specific color choices & font families are often mentioned for 3rd party developers. This kind of info is naturally useful for internal company projects, but other people may wish to build on top of the existing brand as well. For example, Disqus has a beautiful style guide primarily aimed at developers using the Disqus API.

13-disqus-simple-brand-guidelines-styles

Colors, icons, and fonts are all mentioned on the page. Their guide is very small and doesn’t have a lot of extra stuff beyond typical frontend design. But sometimes that’s all you really need for a fully-developed style guide.

Icons & Graphics

Aside from common logo assets, there might be some alternative graphics that can be lumped into the branding. These could be in-house icons or open source icons like Font Awesome. It helps to include a bit of information about graphics & icon styling related to the company’s design. This is especially true if icons are consistently used in websites or mobile app interfaces.

The Google Visual Assets guide found on Behance is a stunning example. Although it’s not a live guide you can still learn a lot by studying the quality and written copy. It seems to be designed for both web and print with a direct focus on icon composition. The pages cover topics like perspective, shadows, design style, and color variations. This is by far the most comprehensive icon style guide I have ever seen!

14-google-icon-brand-design-guide

Granted, you probably won’t be creating a style guide for a company even half the size of Google. But that doesn’t mean a detailed set of regulations for icon design would be completely useless. Remember that style guides are built to further the brand itself, so if icons are a big part of the company’s design then be sure to include some helpful pointers.

Software UI Design

Designers and developers who create programs for Operating Systems also lean on generic styles for support. These styles don’t always relate to company branding but may instead relate to branding techniques of the OS. For example, Microsoft Windows has an app design page specifically geared towards user interface design.

15-windows-os-devcenter-design-guidelines

The current standard for Microsoft is Win8 or Win10 which both use the flat metro style. You’ll find dozens of categories ranging from icons to navigation and visual identity. You may not be creating a style guide for big companies like Microsoft, but it’s possible that other software companies like Adobe or Symantec would require similar resources for internal use.

16-ubuntu-linux-design-brand-assets-guide

When it comes to open source software there’s nothing quite like the Linux environment. Most beginning home users get their introduction on Ubuntu which also has its own design guidelines. The website is meant for both software design and marketing purposes so you can find lots of cool stuff.

I specifically like the page used for their brand assets and the gallery of sample Ubuntu design work. Remember that examples are suitable to convey information to readers who crave a more visual medium. Look at desktop software as an extension of company branding which includes interface guidelines as well as identity design.

Mobile App UI Design

The world of mobile app design is a new place full of blossoming ideas and gaping leaps in technology. Most of the smartphone userbase is currently made up of Android or iOS. They both have their own benefits and they also have their own unique methods for interface design.

17-android-app-design-patterns-guide

Although you may not be creating a style guide for companies like Google, it’s still useful to recognize how they choose to structure documentation. For example Android’s style guide has a lot of information crammed into a single website. It features information on devices, interface patterns, common styles and UI elements.

This documentation should provide more than enough information for any new Android app designer. So if you were to create a style guide on a different mobile app it should follow a similar prototypical structure.

18-ios-human-interface-guide-styles

Apple’s Human Interface Guide is basically the same concept and uses a very similar navigation. Dropdown menus are a huge benefit when it comes to lengthy online documentation. Link organization is another important subject when structuring a style guide.

Can you push different topics together under the same parent page? Or can a bunch of content be combined and located on the same page? Naturally the answers will change for each project but these type of organizational questions are worth consideration.

Tips for Branded Copywriting

Writing styles are not always an essential part of a branding guide, yet I would be remiss to ignore the subject altogether. Plenty of companies have a very deliberate style of copywriting which can be useful to both writers and designers. Writing style differs from typography style in the sense that we’re more concerned about how text is written rather than how it looks.

19-the-economist-magazine-writing-guide

An example guide on The Economist magazine includes a huge glossary of terms and rules. It’s very common for large publications to organize rules for writing which mirror the concept of a style guide. Although they don’t seem to have anything in the way of visual branding, written content appeals more to the site and thus is featured more prominently.

For a combined effort of visual & contextual take a look at the MailChimp style guide. The whole thing fits onto a single page and places a direct focus on writing. The section labeled “Writing for MailChimp” offers a list of possible reasons to write copy for the MailChimp site.

The whole page is really terrific at explaining how to write using MailChimp’s voice. This goes hand-in-hand with the MailChimp visual style guide focusing more on graphics and branding.

20-mailchimp-voice-and-tone-copywriting-brand-guide

Another site you may want to check out is Voice and Tone. It’s also dedicated to the written style for MailChimp using more concrete examples. By looking over the page you can easily tell that the MailChimp team has put a tremendous amount of work into their brand.

When I see companies like this it’s blatantly apparent that they really love what they do. If I had to name a paragon of branding guide design, MailChimp would be my nomination.

Handling Maintenance

Depending on the size of your style guide, it may be wise to use a CMS for the project. If you’re only building a 3-5 page guide then updates might be quicker and easier through direct HTML. But more complicated branding guides may honestly benefit from their own administration panel.

As companies evolve their identity often changes. These changes might be in appearance or structure, but they’re important changes nonetheless. It should be easy to correct these changes in a style guide without a lot of excess work. And whether the guide is hosted online or managed in a PDF, eventually the changes will need to be made.

I recommend keeping all assets in the same location for easy access. This means HTML/CSS files along with any PDF documents. Internal styles are probably easier to edit because new documents can be hosted on a company Intranet. But editing isn’t always the difficult part; It’s creating a style guide that’s scalable and easy to edit over time.

With that said, the initial work put into creating a new guide is quite impactful. When changes need to be made it’s vital that the structure is easy to navigate. Avoid overly-convoluted content that will leave future employees clueless. Instead, opt towards transparency with a focus on smaller details and the bigger picture.

Related Articles

Although there is some stuff on the web, it’s surprisingly difficult to find really awesome posts talking about style guides. The following articles stood out to me and offer some great information in the way of presentation, branding, and visual design. If you have some time to skim through these posts you might pick up a few invaluable tips related to brand guidelines.

By studying live examples and practicing consistently you’ll learn what it takes to create an efficient style guide. I certainly hope this article has enough detail for beginners and experts alike. Not every company is going to need a personal branding guide, but many do. So as a designer it’s worthwhile to understand why and how to build one.

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

Comments are now closed on this post.