How many times have you heard someone saying that a brand is just the logo even though the brand is so much more than one mere mark. In fact, every attribute of a product (physical or digital) communicates something. It varies from a way product looks to the way it feels. All the characteristics like shape, dimensions, colour or sound contribute at creating associations and make products or services distinguishable and memorable. In the UI design world, branding first of all means a defined set of visual elements that can be applied throughout the interface. Establishing one is fundamental, as visual perception is much faster than listening or reading. Looking from the UX perspective, an interface should reflect brand values through every element and interaction.

Let’s take a closer look at some of the contributing factors that enable digital products to reflect the brand image and story.

Typography

Rally. The Studio. – Part I by Brit Moline for RALLY

 

It’s pretty difficult to think of at least one web or mobile design example without typography elements. As a matter of fact, text is the main ingredient of the web. Its effectiveness depends not only on copy but also on visual representation. Typefaces have their own personalities and can appeal to certain perceptions. They can be serious, elegant, emotional and even dramatic. For instance, Serif typefaces lean to a mature and formal tone, because people associate them with literature. On the other hand, Sans Serif typefaces are almost as old as Serif, but bring a different tone – a bit more informal, modern and approachable. Thereupon, even before your visitors read any of the content on your website, the typeface is already communicating with them.

Colour

Interior Design Website by Daniel Tan

 

Color has a tremendous impact on people’s emotional state, hence it’s an important consideration in any brand identity system.  There are so many interesting and fun aspects to consider when dealing with color. For example, pink is known for having a calming effect, blue suppresses the appetite, while orange is often used to make an expensive item seem less expensive. Colors are tricky business, because these impacts are not universal. They vary between individuals and cultures. Also, surprisingly many people are colorblind. Great user interface reflects personality of brand and meets target audience’s needs through supporting readability and stimulating intuitive interactions.

Photography and imagery

NorthFace by Eddie Lobanovskiy for Unfold

 

A good image captures attention instantly. It also takes up big amount of space, so better to make sure that the image is used to tell a good story. Online stock photography has given easy access to loads of images and consequently we started seeing lots of smiling professionals and handshakes. However, using these easy-to-access images usually say almost nothing about the brand. Successful branding imagery (photography or illustration) communicate authentic narrative and stay consistent.

Pixels and beyond

Building a component library from scratch by Anthony Zhang for Oscar Health

 

Digital changed what a brand style guide used to be – a long PDF, which covers visual aspects of a brand. In the digital world the brand style guide evolved into living design systems, which define interface specific features, such as motion, transitions, accessibility. Brand identity must unfold holistic aspects, such as tone of voice and personality. As people interact with the brand through different media (apps, TV, books, web), all these interactions add up and contribute at expressing a coherent brand image.

Now, more than ever, design efforts need to be aligned with other parts of the organization, such as marketing, PR and customer service. Design is a glue that sticks everything together and creates journeys from the perspective of user.

Here at Contrast we love creating these journeys. Read more about them here or start your own: take a minute to fill out our Project kickstarter below and we’ll be in touch to discuss best next steps for your project: