Overlooked Branding in the Interactive Age

Many businesses when branding (or rebranding) often overlook the need to include interactive assets in their efforts. Additionally, the agencies they work with either haven’t adjusted their own work to handle this need, or if the topic is proposed, their clients, without a full understanding, view this as ‘extra expense’, not worth tackling at the time.

However, the foundational elements of brand design have expanded in our digital age. We’ve moved beyond the point of the classic print and on-location assets. Most brands now have an online (or even offline) digital presence that their audiences fully interact with. Not addressing these needs up front often leads to off-brand sites, apps and other digital communications.

Addressing this needs means that there is more work to do up front, but the good news is that you can use this digital space to more fully express your brand’s personality.

Which elements are often overlooked?

First, things that we AREN’T here to talk about, as these are already often part of well-established practices for print, audio, and video:

• Logo, color palette and font sets for print.
• Jingles and audio stings for radio and video.
• Transitions and other visual effects for video.

We ARE going to examine items directly related to interactive platforms, such as websites and applications. These include:

1. Iconography (all things “icons”, including icon choices, design, meanings, etc.).
2. Online Fonts (you actually WANT your website to match your print work, right?)
3. Color language (this should already exist to some extent, but now needs to be expanded to cover interactive media).
4. Interaction patterns (how interactive “elements” will act with your visitors).

Why do this up front?

Good question.

First, thoughtfully doing the job up front ensures that it will get done RIGHT.

Working on the fly however, often creates a product that isn’t well thought out and can hinder the user experience. Without clear communication, tasks become harder. It is actually possible to create an experience where the visitor is able to complete their tasks, but to expend so much mental energy in the process that they finish exhausted. In these cases, where they should be feeling good at having finished, instead they are left feeling the experience was horrible. Ignoring the items outlined in this article often lead to that sort of experience.

Second, since all of these elements will be needed eventually, the work WILL eventually be done… by someone. The question is, do you want these decisions thoughtfully determined by your internal branding, marketing, and creative teams, or decided on the fly by the next Joe whose job is to pump out something for you on deadline?

Done Right

The goal is to do it once, do it right, and document it alongside the rest of your branding materials so that it is handled consistently across all projects.

What does it mean to do this job right? It means that it is done thoughtfully, mirroring the message, personality, and values of your brand. It also means that it receives sign-off from the keepers-of-the-brand at your company.

Why document? Same reasons you document the rest of your brand items:

• Keep all internal and external development teams working from the same playbook.
• Provide measurable standards to those responsible for ‘signing off’ on final products.
• Save a LOT of time, removing the need for development teams to ‘figure it out’ themselves. The more stuff that is prescribed, the faster design and development go.

Who can do this job?

Whoever you’d like.

Your internal UX/UI and Creative teams can work together to create your brand guidelines, or you can use an outside agency to handle the work, especially if this is part of their overall ‘brand development package’. Just be aware that someone has to be in charge of these things, otherwise everyone will be, which means, of course, no one will be.

What are the specifics?

At some point, I’d like to break each of these down to the nitty gritty in individual articles. As I write each of them, I’ll link to each from their specific sections below. For the time being, let’s break these down at the 20 thousand foot view.

Iconography (the “other” visual design elements)

There are actually two parts to the iconography discussion. Design and language.

Icon Design

Design is simply the “look and feel” of your icons.

Are they fat? Thin? In the middle? Round? Boxy? Multi-colored? Detailed? Simple?

A search on Google Images for “Shopping Cart Icon” shows hundreds, if not thousands, of variations on the theme:

Having an icon set that best represents the style or personality of your brand is incredibly helpful. Not only does it add a bit of design flourish and attention-to-detail to everything you release, but it also saves time in the development process by providing a library of pre-approved imagery for use in application and web design.

And it’s not limited to digital design! When a brand embraces online as part of its brand, it can bring these elements back into its brick and mortar spaces.

One great example of this is how Chili’s commissioned its own set of icons that it uses both online and in its store signage and branding. (Ironically, this branding element is literally based on cattle branding.)

“Do you have to create your own icon libraries?”

No way!

Just as most companies find and purchase rights to a font, it’s often far easier, faster and more economical to purchase the license to a professionally designed icon library. Then, any needed icons not provided in the set can be created in-house to match the look of the official set.

Icon Language

Language is the second part of iconography.

This boils down to determining what each icon means. It seems easy enough, but you can run into real trouble without thinking things through. For example, what is a “favorite”? A star? A heart? A thumbs up? A ‘plus one’? It’s a little thing, but without documentation, it can change from app to app, or even in the same app as features are rolled out in phases. It is very common to run across sites or apps where [X] means “close”, “remove”, AND “delete”, all in the same screen.

Note that icon language will be an ongoing effort and updates should be constant as new functionality is added and new icons added. Again, the key here is to document and communicate.

Online Fonts

OK. This one is quick.

This is also less about design, and more about just making sure that whatever fonts you want to use for your online presence, whether or not they are the same as your print branding, are available and licensed for online use.

It seems simple enough, but you’d be surprised at how often this is overlooked. Imagine having the ‘perfect’ font for your brand. You use it everywhere. On your storefronts. In your brochures. Your business cards. But your web team can’t use it on your website or in your app because they don’t have access to an online version or license for digital publication. Generally, this is because your creative print team handles purchasing fonts and doesn’t stop to consider the needs of the other departments.

Fortunately, the fix is straightforward; purchase the needed rights from an online font provider who will host them for you, or find an offline provider and host the fonts yourself.

Color Language

Creating a digital color language?

Start with the branding color palette, and then expand where needed. Determining which colors ‘mean’ what:

• Brand flourishes.
• Interactive elements (buttons, links, etc.).
• Important messages (New!, Sale!, Wow!, etc.).
• Error messages (Success, error, warning, information, etc.).

Not every color needs to mean something, but it is important to define colors for critical elements in interactive environments. Your visitors should be able to quickly discern what an element is and how it functions by its color. As a side note, if you’re not using a shade of blue for text links, you are already making your visitors work a little harder.

One major pitfall I’ve seen many times is using one color for everything. When this happens, visitors often have to spend extra time and energy decoding the website. Can I click this or not? Is this important, or can I ignore it?

In my personal experience, this problem is exacerbated when red is your primary color. Having spent ten years at ESPN, and other red-focused brands along the way, I’ve come to be very intimate with the problems that using the color red without forethought can create. The biggest problem is often that the brand’s red is used as the red representing ‘error’, thereby mentally tying their main brand color to failure, errors, and problems. Additionally, the same red is often used in headlines, marketing or ‘call outs’, and then again as interactive elements (buttons and links). So, you basically get a black, white and red page, with no idea what is what, and often don’t even see the red ‘error’, because it blends in with the marketing and callouts.

Interaction Patterns

Interaction patterns are the way interactive elements ‘behave’ when acted upon. The task here is to determine which behaviors best serve your brand.

For instance, when an element enters the screen, does it slide in, spiral in, pop in, fade in, or simply appear? Maybe it does something else entirely?

If they slide in, is it a straight-forward slide? Or maybe a happy, peppy slide? Perhaps it enacts a highly-professional, somber slide?

On the other hand, if it simply appears, does it just fade in? Or does it do so with a pop? Maybe a splash? A quarter spin? A flip?

Making and documenting interaction decisions like this at the corporate, branding level, and not at the individual app level will help to keep the feel of all apps and websites consistent across the brand, regardless of whether they are created in-house or not.

Conclusion

Deciding upon, documenting and then sharing (and enforcing) these elements at the corporate branding level provides the benefits of:

• Unifying the digital assets of a brand.
• Extending brand personality and values across digital platforms.
• Saving money and time by eliminating design decisions and asset creation needed on a project-by-project basis.

So, add these to your branding checklist. If you are handling your branding in-house, set aside the time to work through these with your UI/UX and Creative teams. If you are hiring a brand agency, make sure these items are part of their deliverables. Keeping these in mind will help make your brand ready for the interactive age.

Originally published at chriswilsonillustration.com.