JournalArrow left Journal
Design

Bring your work to life with movement

8th July 2016

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,” 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


Related articles

View All
Banking and designing for Voice Recognition
A graphical illustration which highlights iterative design
Design

Banking and designing for Voice Recognition

By Martin McCarthy

At Foolproof we design experiences to improve the lives of millions and as part of this - we’re especially interested in the interaction between humans and technology.

The pool rules of design critique
Pool rules of design critique
Design

The pool rules of design critique

By Foolproof Team

Want to know the secret to dishing out and receiving design criticism? Download our free poster - tips for having a successful design critique - for your office now.

Designing inclusive interactions
A graphic of differing figures which represents inclusive design
Design

Designing inclusive interactions

By Mario Van Der Meulen

Mario Van Der Meulen explains the key difference between inclusivity and accessibility, in relation to interaction design.