ScreenInteraction - innovation and design services

Branding and UX

9 Nov

Brand guidelines, style guide, brand book ‒ a loved child has many names. And most of them don’t really tell us that much about UX design. Companies tend to think they have everything in place when they have a logo drawn, colors chosen and font family selected. But that’s rarely the whole story, says Jonas Lampe, designer at Screen Interaction.

Brand guidelines have been around for a long time, and most of us working in the field of design, tech and marketing are very familiar with them. UX (user experience) design, which has been the latest 21st century design buzzword, is now a common way for people to describe user-centered design. These two areas ‒ branding and UX ‒ are often two departments and two fields of expertise. UX professionals focus on usability and meeting user needs, while branding department people tend to think more about ads, campaigns and logotypes.

If you’ve only encountered rich brand guidelines that are very easy to use in your digital design work, you should consider yourself fortunate and stop reading now. However, if you feel the opposite, then this might give you some interesting thoughts on how to create better brand guidelines.

Brand guideline done by Egotype

Digital design is needy

In my opinion, the purpose of brand guidelines should be to give guidance as to how a brand should be communicated in the channels that are most relevant for the customers. And in many cases, it’s the company website and app services that are the most frequently used.

However, brand guidelines are often very shallow and only scratch the surface of how a brand should be used. This is often done by displaying the logo, color and font for this particular brand. There might be some examples of how the numerals should look like in a row (1, 2, 3 … ), or how body text should be laid out in two columns. This is usually what you can find on top of some generic text about protected trademarks and how the logo should be placed on a printed A4. Sometimes it feels like the brand guidelines are just an item for an agency’s portfolio.

“Sometimes it feels like the brand guidelines are just an item for an agency’s portfolio”

Visual design in print is often about getting attention and standing out, while visual design in a digital context is about leading the way and guiding people to make decisions. The digital context is often interactive and demands a lot more because of its changing nature.

Within an interactive system, the user needs to know where to press and if what was pressed is really working. You also need some feedback to make sure you’re on the right track, in order to make you feel safe and in control.

Google Material Design Language. Maybe this will be the future for other brand guidelines?

In the same way that other industries are changing in order to survive in new contexts, we need to change the way we design brand guidelines. We can look at how big car manufacturers are adjusting to climate change with electrical cars, because it’s clear that there’s a new landscape and they need to change.

We can all agree that how products and services look and work is highly important to the overall experience of a brand. Fifteen years ago, companies were thinking about getting a website, and five years they all made their websites social and transformed their stiff design to be responsive to different screen sizes. One year ago, most businesses began to think about how well their physical products connect to their cloud services.

Now these companies should be thinking about how their customers experience their products and services, and how their brand is designed for a digital world.

7 ways to build brand guidelines for UX design

So what does this mean? In short, it’s about being practical with the design of your brand. It’s about being flexible and prepared for new environments, digital environments. Like we stated earlier, the digital world is more needy and demanding.

Here are some ideas that your brand should start thinking about in terms of branding guidelines for UX:


1. Does your logotype have a shape that works well in a user interface?

A logotype should have a shape that is as square or rectangle as possible to fit most user interfaces. Ask yourself if the logo has to be visual at all times. A well designed product should be able to carry and communicate your brand even without a logo present.


2. Do you have a color palette that supports alerts and warnings?

If you have an app or a website, you need to be prepared to communicate with the customer when there are mishaps, and you need to have an appropriate color scheme to reflect the right tone. Consider hues for both rewarding and negative communication. There have been brands that selected red as their primary color, which can cause great confusion for users because of its common negative error associations.


3. Do you have a recognizable visual expression to enforce your brand?

Patterns are a very strong brand carrier and useful in a digital context, replacing a solid background color or a generic photo. Perhaps you recognize this app below:


4. Are your brand guidelines accessible?

Are your brand guidelines digital, and where everybody in the company can find them? Or are they hidden in the company intranet, or even worse, in your drawer in a printed format? Your brand will only be at its full potential when you communicate its values and how to use it. Build it thoughtfully and with care.

BBC has really made an effort when it comes to brand UX guidelines.  “Maintaining consistent UX design across all touch-points, from mobile phones to connected TVs, is vitally important.” David Bailey, Creative DIrector BBC. Read more about this wonderful design framework here

Mailchimp has a complete layout explanation when it comes to digital design. Visit Mailchimp for inspiration.

“A unified design language shouldn’t be just a set of static rules and individual atoms; it should be an evolving ecosystem.” Airbnb.

Atomic Design is a design method for breaking down design guidelines.


5. Does your brand move?

Animation is a great way of giving your brand a personality. User interfaces move, and they show and tell. How does your brand move? Is it joyful and bouncy? Is it serious and has stiff movements? You have to know these answers and integrate them in your guidelines.


6. Does your brand have a font-family with support for web font?

Web fonts been around for quite some time and replace standard fonts such as Arial and Verdana for a digital context. At Font Shop, there are plenty of beautiful fonts that support digital design. 


7. Branding and UX designers should join forces

There’s a great deal that we can build upon and challenge together. Branding and UX design often want to achieve the same goal, a greater brand experience. The more we can blur the line between the two, the better overall. If a product or service is indistinguishable from its brand, then they have both succeeded.

By Jonas Lampe