Bring your work to life with movement

Whenever I’m asked, “What’s the best way to deliver an interface?” I will always respond, without hesitation, “As a living and moving thing,”

This is said with a look of bemusement on my face that suggests there cannot possibly be another answer.

Now this is a sweeping statement, but it's one that holds true in the vast majority of occasions.

We should no longer consider it acceptable to deliver static outputs. Instead we should look to utilise the skills of those around us (shout out to the front-end devs out there) to help us bring our designs to life. Or alternatively, utilise tools such as InVision and Marvel to simulate these interactions. Or failing that, even learn a bit of code ourselves to make our work more dynamic. Motion is a valuable asset that we can use to add delight, clarity and personality to an interface.

Every time I see this UI animation by Sergey Valiukh it makes me smile, it is full of character and charm.

And here is a fun little animated loader we made at Foolproof for one of our internal sites.

Coding is one way of simulating motion but it can sometimes be quicker and easier to use tools like After Effects to create a video that simulates the key movements, translations and micro-interactions in your interface design.

“But this will take longer to produce,” I hear you say, and you’re right, it will. But what better way to make an impression with a client than by providing an example of not just how your work will “look”, but how it will actually “feel”.

The “feel” is the opportunity space in an interface that should be utilised to reflect brand personality and create great experiences.

So please never accept or deliver a static interface again.

More here on the value of microinteractions.

You can also find a useful resource of 20 Best Freebies for Aspiring UX Motion Designers here.

Discover more about our design practice