All articles

Considering brand and animation in user interfaces

August 1, 2016 by
Considering brand and animation in user interfaces

When crafting online experiences for a brand we consider how it looks, how it works, and the content. But more recently, brands are going to extra lengths to develop more holistic online experiences by creating meaningful animations and interactions in their digital products personifying their brand, it’s personality and values.

In the past 12 months we’ve seen tech giants Google and Uber unveil refreshed brands. But it wasn’t as simple as slapping a new logo onto their website; their redefined brand identities have been seamlessly woven into every facet of their user experience.

Google has shifted their focus to Material Design – Google’s own all encompassing design practice which places a huge importance on meaningful motion. So it’s no surprise that when they launched their reimagined brand identity late last year it included a comprehensive guide to how the brand elements animate and respond in an interface environment. Most interestingly, they introduced the dots – a dynamic state of their new logo that responded to common interactions with its products like listening, thinking, replying, incomprehension and confirmation. This elevated the brand identity by encapsulating responsiveness of the Google brand and furthermore used the branding as a utility throughout Google products.

Uber had built a strong brand through taking elements from their user interface and integrating it into their brand.

Uber's brand language

But in February Uber’s CEO and Co-Founder Travis Kalanick reversed this and refreshed the brand and animation language that was built around the company’s core value; technology moving the physical world which their old branding didn’t reflect. They’ve documented it with quite a lot of detail here:

Uber's new look

 

In this great read, Kit Oliynyk talks about the principles of motion in UI design (and comparing it to a sci-fi world), in particular the differences in functional, material and delightful animations within a UI context. Once we lay down the fundamentals of functional and material animation in a digital product we can look at the fun stuff – delightful animation, which is going to work hard to differentiate your brands personality alongside with the visual design and tone of voice in the copywriting.

We are always thinking about what are a brand’s core values, services and tone of voice and how it translates to motion within user interfaces.

For ongoing inspiration we often look at UI interactions which showcases the most interesting UI animations and interactions.