Redesigning rebranding

Like everything, branding evolves. It’s generally an improvement, but it does mean some pretty big changes for the organization’s marketing. In ancient times (10 years ago), the website’s rebranding could largely be an afterthought to print materials.

But today, consider how many of your constituents view your website versus how many will see your business card. How many will get an email from or you, and how often, versus how many times they see your letterhead?

A lot of Beaconfire’s work is done concurrently with branding firms. Sometimes, we’re given a completed branding document, other times, we’re doing our work at the same time as the organization is being rebranded. In any case, there are some common issues we run often run into on branding guidelines that branding firms should be aware of:

1. Choose a web-safe font
   Branding guidelines often include a paragraph like this (modified from the original for confidentiality):

   A cool and nifty combination of Wingdings and Symbol makes up a typography style for Sample Organization. Wingdings’ character stands out well and Symbol beautifully complements it with crisp and lovely letterforms. Using Wingdings for titles and Symbol for body copy creates a strong balance between the two fonts.

   While it’s certainly very lyrical, it doesn’t take into account the fact that there is only a very small universe of web-safe fonts, and straying from that universe means that while your organization’s site might look great on the Board’s computers, your users will have a totally different experience.

   Either a significant portion of the copy will have to be  rendered as images, slowing load time, reducing accessibility, and making search engine optimization all but impossible, or the web design firm is forced to punt and pick a body text font, irrespective of the branding guidelines.

   Since neither of these are optimal, brand companies should consider recommending a logo font (which is generally rendered as an image anyway, so they can pick from the full menu of available fonts), a web-safe body font, for most text on the site and other communications, and perhaps a third accent font, which can be rendered as a graphic for section titles and print use.

2. Consider screens before printers when picking colors
   The world of colors online and on screen is several orders of magnitude bigger than it used to be. Even  most mobile devices can render all 16,777,216 web colors. But there are some significant differences between the way colors look in print and the way they’ll look on-screen, and picking your primary color palette from a Pantone list can result in suboptimal choices online, particularly when you consider readability.

   This is particularly true in parts of the spectrum where monitors aren’t as strong – purples in particular come to mind. And consider whether you’re planning for an audience that’s using LCDs or CRTs to view your content – colors show differently on each, so your lush green might turn into something more aqua and your faint canary might just white out.

3. Think small
   Many branding documents also come with a section governing how not to use their logo. It’s helpful, but largely futile -  in the end, the logo is  going to be bastardized eventually, and instead of just saying "Don’t make it smaller than 1 inch x 2 inches," give us some recommendations on how to make it work if we do do that. Maybe you can hide them in the vault that we have to break a glass pane on to get to? In any case, branding companies should think as small as the 16×16 px for the favicon.

   While we’re on the topic, while it’s helpful to give definitions in inches, those don’t mean as much onscreen. With so many different resolutions out there, what’s 2 inches wide on the designer’s gigantic monitor may render down to a quarter of that on a notebook, or a miniscule size on an iPhone. Its size might also be modified by a variety of accessibility tools. So while it’s helpful to give a size recommendation for the business cards and letterhead, you’ll need to consider the online implications as well.

4. Make it wide… and tall
   A branding document that doesn’t include ways to make  an organization’s logo work in a few different circumstances isn’t complete. Obviously, there’s nothing wrong with establishing a preferred logo. But have a landscape version of the logo ready for those times when we’re trying to fit a lot in above the fold, and have a portrait version for when we’re in tight quarters (see: this blog).

   Otherwise, we’re forced to either make choices that don’t place the logo in the best way, or to cut it up ourselves and move it around. 

5. Form follows function
   Some branding documents will include a visualization of the way the organization’s new website should look. This  can be really helpful, as a suggestion of how the elements can be used. But it’s not as helpful when used as a straightjacket that forces a site that looks pretty, but works pretty badly.

   These faux-comps often make use of non-web-safe fonts, unrealistic content presentation, and assume only the homepage, without any direction for the subpages. They also tend to lay out content in a way that’s visually appealing, but may not be the best user interface – do they consider navigation? Are items placed where users expect to find them? Is there a clear place where people can take action? These are all part of a good redesign process, but not always part of a rebranding, and can give faulty expectations to non-profits.

In the end, rebranding firms, and the organizations that hire them, should take a hard look at their audiences when deciding how to present the non-profit’s new branding. Even if your demographics don’t make the web your first audience now, will that be the case in five years when that brand is still around?