Animating Your Brand

9 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

Lennie

A timely article as almost by default animations are creping into everyday work. Just look at any front-end framework and they will be using transition and other subtle animations. I think it is those subtle animations that are the easiest to miss, leading to inconsistent implementation; and that jars.

Paul Wallas

Nicolas Chevallier – I always approach animation thinking ‘include it to imply meaning’. If the animation does not help to explain what is happening more often it is purely for humour or a nicety. If speed and optimization isn’t key this can be fine as animation here and there helps to lift potential user anxiety.

Matt Downey

“Before you begin throwing animation at all the things, establish the character you want to convey.”

This sentence speaks volumes. Unnecessary animation can kill effectiveness and purpose. Subtlety and consistency are the name of the game so keep it short, sweet, and on brand.

Mark Bowley

Good ideas here, except animating logos and brandmarks worries me :)
I’d argue you don’t need to draw the eye to a logo (unless it’s part of the content), but I agree it can add some character on a static page. However, subtlety is the key here as you mentioned.

Patrick Grey

Clear, structured, useful. Great stuff, thank you! Great to see the calendar back. Animation seems to be a science/art that is at the fun early stage. I look forward to seeing it being developed and getting more codified, especially relating to the complex animations and interactions that can be found in domains like e-learning.

Creative Studio

It is so true that style guides play an important role in maintaining consistency. Before I use to design elements as and when needed and as things grew, then only did I realize that I should’ve taken the time to create a guide.
Thanks for the tutorial, was looking to spice things up on a new design I’ve been working on.

David

Alex McCabe

I have recently been taking animation out of my project. One example is a large navigation dropdown on desktops. This used to fade in/out on hover, but it appeared slow even though it wasn’t. Remove animation and the whole navigation feels snappy.

On mobile however, each subsection slides in/out on tap giving a nice traversal feel.

Andy

Style guide might explain why we chose a certain font or layout, we can use style guides to explain the intent behind animation. This means that if someone else wants to create a new component, they will know why animation applies.

Great!

Impress us

Be friendly / use Textile