Improving Your Process: Web Branding Style Guide

Branding is a very involved process that can really make or break a company image. A strong brand can help propel a client to the next level, while a brand that is lacking will hold it back from reaching full potential. There are many tools used by designers to help push a brand to success; one of those tools is a brand guide.

What are brand guides?

Brand guides can be described as a set of rules that must be followed when working with any particular brand. They’re established by the brand designers and are very often quite specific in detail. Brand guides outline such things as acceptable colors to use, any type requirements that are associated with the brand, as well as details regarding orientation rules given for various elements of the brand. The object is to ensure that the hard work that was put in to develop the brand isn’t altered or destroyed by incorrect representation.

Applying brand guides to a website

Brand guides are sometimes narrow in scope in that the only elements taken into consideration could be a company logo as well as the company name. There could be only a few rules regarding their use, but sometimes the details can be quite extensive.

Style sheets are, in their own way, a version of a brand guide. When you write CSS, you’re giving very specific rules as to how something will display visually. It could be helpful to take things a step further. When you’re putting a site together, sometimes it’s nice to have a comprehensive view of what is available to you.

To be more specific, it could be beneficial to put together a private document that is a cumulative display of your style sheet. Not only would it provide a look at the overall design of the website, it could incorporate each element as well. Headings, lists, links, and any other elements that will be used throughout the site can be put on display to let you know exactly what it is you’re working with.

Collaboration can be much more productive

Personally, I think that the greatest benefit that can come from a Web branding style guide is apparent during collaboration. Each and every designer and developer will envision the end result of a document in a slightly different way, even when admiring the exact same comp or mock.

If a branding guide is provided for the website, a more comprehensive view can be attained that can help the brand to stay consistent in each document throughout the website. Collaboration is very common in Web design and development, and I think anything you can do to help out your fellow coworkers will not only help your company, but your clients as well.

What to include in a Web branding style guide

A Web branding style guide should be as detailed as you see fit. In my opinion, the more detail you have the ability to provide the better. Beyond adding examples of various design elements, there are a few other things you can choose to include as well. If circumstances allow, you can include examples of alternate cases in which some other class or id will be used. Beyond that, you can also include some notes of your own using the styles you’re putting on display. If it should be explained when certain ids or classes should be used, it would be helpful to include that information there.

It’s about keeping things constant

There are many things you can include in a Web branding style guide, but the goal to keep in mind is making your life easier and designing a better product. Not only could a Web branding style guide help you and your coworkers during the initial development of the website, it could come in quite handy the next year should your client request a new feature be added or a section of their website be updated.