UI & UX Design feat. Brand Values

Designing a digital product is such a simple thing. If you are a creative guy and do have a talent for typography, images and colors. Oops, sorry that is wrong, dude!

Photo by Ben Neale

At COBE I have learned: “A real good digital product will reflect the brand values of your clients brand in every single pixel.” — But what does it mean?

How products communicate

Every characteristic of a product will communicate something. Take a physical product for instance: How does it smell, how does it look like, how does it feel, which package does it have? All these things are sending signals to your brain. Your brain will trigger an association with it and assign it to a mental layer (e.g. pride, ease or simplicity).

Why does our brain do this?

It is all based on experiences that we made during our life. For example we know that the value “lightness” stands for airy, low complex, floating, above other things and brightness. Because we have learned in our life that e.g. clouds, feathers and blowballs are light.

Let‘s adapt the analog life-experiences to digital experiences.

The characteristics like form, color, size and animation triggers an association. As soon as we see a subject or object we will decode and categorize it, subconsciously.

So if we are using a digital product, our subconscious will track the “values” of animations, typography, colors, images and stuff like that. How does it feel? Is it powerful? Is it empathic? Is it bold? Is it light? Is it uppish or rooted in the soil?

What impact does “real life experience” have on UI and UX Design?

Check out the brand values of your client before you start designing.
Do not give a sh*t about styleguides. Write down relative values and categorize them to the core values of your clients brand. That will constitute the base for your design work.

Let‘s say one of the brand values is “lightness”. So consider using bright colors, light fonts, low complex forms and maybe some subtle shadows.

Design Code for “Lightness” (Dribbble Shot by: COBE)

Maybe another brand value is “pride”. It stands for big, bold, heroic, lofty, and superior. Hence, big fonts, huge images, space and darker colors.

Design Code for “Proud” (Dribbble Shot by Matthew Pence)

Another value of the brand could be “empathic”. Empathic means being social, caring, reliable, sympathy and being on one level. That will have the following impact on design: using e.g. warm colors, organic forms, rounded corners, overlapping layers and transparency.

Design Code for “Empathic” (Dribbble Shot by Luke Pachytel)

Get into the mood

Set up an Invision Board with all brand values. Search for “Design Codes” that show the brand values. At least, its even enough if just a part of the code will show them. selected code bears the relevant values. The moodboard will help you to get a feeling of the way how to use the clients brand values in design. Just have a look into an instance moodboard here. The good thing is: everything is documented and and can be shared it with your colleagues and your client. — On more thing: It is not about f**k up a whole styleguide. It is all about to getting a feeling for the brand value driven design and to bring the interfaces and user experience to the next level.

Moodboard Example. See the whole thing here.

Combining is the key

You think the illustrated values can not coherently be taken into account within the designing of an interface? That is wrong. The magic is to combine values with each other. Use a huge and light font on big product images with a lot of white space and for example a rounded call to action button. If you scroll up, you see that every above shown picture already combines the mentioned values. There will be no discussions about your design as a design. There will be maximum a discussion about the usage of brand values. For example you can show more “pride” on the home screen, more “lightness” in the settings screen or more “empathic” by speaking to your users and so on.

What advantages does it have for a designer?

• It will point you to a design direction without limiting you.
• A design trend is not the base of your interface. So your design will not be a modern-hype-thing.
• You do not design by feelings.
• No personal opinions anymore! There will be no more discussions about liking or disliking a design.
• The design language is based on brand values, so there is a standard vocabulary for discussions (e.g. “Let‘s put more “lightness” in this screen”)
• It is possible to bring up the right arguments for every design element by the derivation of a brand value. — Perfect for presentations.

Short wrap up

Brand value driven design is the most effective way to design digital products by reflecting the brand in every pixel. Make sure that your design decisions are based on your brand value map, not on your feelings as a designer. Ensure that your interfaces tells the story of the brand you are working for. If you can argue for every pixel and animation in your design by using the brand values of your client: You did a perfect job.

Thanks for reading my article “UI & UX Design feat. Brand Values” I would love to get feedback from you, just drop me a line!