Aligning UI animation and interaction to brand identity

Question

When coming up with a brand identity, designers will come up with brand guidelines, colors, font style and sizes, usage guidelines, do's and don'ts some brands like intel, macdonalds and intel even got earcons examples

but when it comes to the animation and interactions of the UIs in these brands' websites or apps how are these decided? or are they even covered? any good examples or case studies on this?

what's the best way to approach coming up with animation and interactions to match the brand identity?

Answer 1

I'm not sure if there is a guideline on brand animation but I have a gut feeling that there is none, I could be wrong though.

My personal approach to animation is to identify the brand keywords. I get ideas from my surrounding objects and how I interact with them e.g flipping pages, switching lights etc. By observing how these objects move or behave, I would roughly know what are the properties to animate (position, opacity) and how best to animate them in accordance with the brand image.

Take an example Nike:

The "Swoosh" logo is one of the most recognised brand logos in the world.

At its most fundamental level, the Swoosh represents motion and speed. The shape depicts an arc of movement. The word ‘swoosh’ is onomatopoeia for the sound you’d hear as Lebron James or Michael Jordan zips past you en route to a spectacular dunk.

Therefore it is common to see images with big movement and flashes if you visit any Nike page. Nike uses this animating properties to reinforce their branding.

---

I look for keywords and map them to a particular animation such as:

• Professional - Fade
• Fun/Colorful - Bounce
• Experimental - Slide, Flash

If you are developing for a particular product, you could draw inspiration from your surrounding objects.

• Book store - Flip
• Toy store - Bounce, Elastic, Rotate

I believe choosing the right animation also has an effect on a person's mood (bounce animation is suppose generate more happy feelings). You might want to put that into consideration when implementing your own animation.

Answer 2

Fantastic article on 24ways: Animating your brand

It's worth reading Google's animation guidelines on their material design pages, too, as they give some ideas about different styles of animation.

I am sure I have seen another article on animation and branding somewhere but I can't find it :( If I recall correctly, it said that bouncy animation was more informal and fun, and smooth easing type animation was more formal. So make the animation match the tone of voice of your website and brand.

There's an excellent guide to animation techniques by Dudley Storey too (but it doesn't cover branding).

And there are a few ideas in this article, Bringing the Web to life with animation, about animation and brand - formal vs informal.

And there's this article on A List Apart, UI Animation and UX, a not-so-secret friendship, which gives some helpful questions to ask yourself about the animation you have created:

• Does the animation provide any useful information about the interaction?
• Does it feel like it’s responding to you as the user?
• What sort of emotional response does it trigger for you?

Answer 3

Nailing down the brand's adjectives, as others have stated. Then, consider making moodboards of motion gleaned from cinematic sources as well as UI design stockpiles like dribbble and tumblr. (It's important to include animation examples alongside design materials. A fade in a dark theme might look cinematic or even threatening.)

Watch ads and movie credits that fit the company's adjectives for inspiration. Batman's title credits for instance might have design components that reinforce a company's image of powerful, secure, driven.

It's important to remember that sometimes what "looks good" to us won't "read right" to an audience. For instance, we associate bounciness with children and play, but too much bounce can be confusing to novice computer users. So be sure to actually put the interface in front of a child and see how they use it. Watch the user's face. Listen to the noises they make. Do they frown or grin? Or nothing at all? Sometimes, no reaction is the right reaction!

Afterwards, ask them for their impressions: "What kind of XX do you think this is?"

If you're working with a design team: ask if someone has motion design experience and can assist with creating a suite of treatments to try out.

When the company decides on a treatment, make sure it's documented with style and brand guidelines to encourage conformity.