A set of helpful tips for creating effective online brand guidelines for a responsive website with dynamic content and multi-width navigation. To ensure adherence from all stakeholders provide template downloads or example files to effectively showcase the brand in a finished format.

Top 5 tips on creating online brand guidelines that work

TL;DR; A set of helpful tips for creating effective online brand guidelines for a responsive website with dynamic content and multi-width navigation. To ensure adherence from all stakeholders provide template downloads or example files to effectively showcase the brand in a finished format.

RespWeb-DesignGuidelines-Generic_Page_01

Here is my personal Top 5 tips on creating online brand guidelines that really help both your UX team and deliver a consistent message. So here goes…

Building guidelines is always a challenging task, building guidelines for a responsive website with rapidly changing dynamic content, easy-to-use multi-width navigation on a truly scalable and highly transactional website is a step up. From a CMO perspective you need it to be brand aware; a CEO would want guidelines to be useful tools for your brand ambassadors and the sales director would need you to highlight features while your product team wants details, detail, details… and what about multiple brands, don’t get me started?

RespWeb-DesignGuidelines-Generic_Page_17

1. Leave no room for confusion

Ensure complete uniformity in style and formatting wherever the brand is used to ensure no dilution of that brand. Easy to understand explanations – try to employ easy-to-understand explanations and graphics to get your point across. Remember, a picture speaks a blah-blah-blah…

RespWeb-DesignGuidelines-Generic_Page_29

2. Inform and Enforce

Not only are you producing the guideline but you have to sing them from the tree-tops. It’s your job to spread the word and prostitute your vision and make everybody follow the rules, otherwise what are we all doing here?

RespWeb-DesignGuidelines-Generic_Page_11

3. Color palette is a must

My experience tells me this is the real clincher. External agencies and internal departments are always getting this bit wrong. So, to help them out and ensure that doesn’t happen – and get it right in the guidelines.

RespWeb-DesignGuidelines-Generic_Page_08

4. Skip through the overview

Although important for you to communicate, the overview of brand, including history, vision and personality is great for formulating your elevator pitch when scoping for new clients or speculating for a new job, but most internal people will skip over your perfectly scripted sentences. Waxing lyrical while you underlining the company’s core principles, their USP and all the work they do for charity wears thin to staff already embroiled in the brand. The same goes for “Writing style and voice” – this one is just brand wank for those not really at the coalface!

RespWeb-DesignGuidelines-Generic_Page_21
RespWeb-DesignGuidelines-Generic_Page_22

5. Obsessive detail

Have you spent hours poring over corporate identity manuals that showcase epic levels of obsessive behaviour? Good. This obsessive behaviour puts you in good stead for creating these how-to guides, as the best ones have details on their details.

RespWeb-DesignGuidelines-Generic_Page_32

Conclusion

As a UXer, concentrate on getting the grids spot on. And with bigger sites, focus on the digital experience, and steer clear of brochure guidelines. Ditto for Letterhead and business card design and the Typography palette – I love it, but it’s becoming less and less relevant in the higher end of the UX job market. Bigger brands should have copywriters so the writing style and tone-of-voice should be dealt with by these specialists.

RespWeb-DesignGuidelines-Generic_Page_02
RespWeb-DesignGuidelines-Generic_Page_05
RespWeb-DesignGuidelines-Generic_Page_07
RespWeb-DesignGuidelines-Generic_Page_12
RespWeb-DesignGuidelines-Generic_Page_14
RespWeb-DesignGuidelines-Generic_Page_18
RespWeb-DesignGuidelines-Generic_Page_19
RespWeb-DesignGuidelines-Generic_Page_22
RespWeb-DesignGuidelines-Generic_Page_31

                            

A sneaky point 6

On last thing, and extra point if you like, include if possible template downloads or example files. This way, potential audiences can see your kit-of-part, your vision all assembled on one (or several if you’re going responsive) finished page.

RespWeb-DesignGuidelines-Generic_Page_37
RespWeb-DesignGuidelines-Generic_Page_38
RespWeb-DesignGuidelines-Generic_Page_39
RespWeb-DesignGuidelines-Generic_Page_40

 

RussellWebbDesign: Get your fill of UX trends, case studies and best practice

Pique’d your interest?

This is but part of a selec­tion of design information rus­sell­webb­de­sign gen­er­ated for the creative community out there. Please con­tact me fur­ther to dis­cuss how your brand can ben­e­fit from the new channel: info@russellwebbdesign.co.uk

If something has peaked your interest. Please leave a comment below.


Comments

One response to “Top 5 tips on creating online brand guidelines that work”

  1. […] Stakeholders and other UX’ers developing a new online guideline portal – similar to the online guidelines here. As support I also designed a live component library and a reference for perceptual and functional […]