Defining motion principles when you’ve never done it before
How do you get started on motion guidelines if you’ve never done it before? What perils / joys lay ahead? Motion is such a fluid field (pun possibly intended) with resources to learn mainly online. Here are a few things I’ve learnt and tell myself throughout the years while doing animation and especially while defining Monzo’s motion guidelines. The first step I took while tackling this is defining principles we can follow.
But firstly, What even are motion guidelines?
Just like brand guidelines, we need motion guidelines to keep our motion style consistent. Keeping the way we use easing, bounce, transitions consistent means our app will feel tight and polished. The personality of your brand and product can be told through motion.
So, let’s get started with what I’ve learnt so far.
You got this. You have the knowledge and passion to learn.
How do you know you’ve come up with the right easing functions or the right values? Don’t fret! You know your product, you know what the goals are and what tone of voice your product is. Defining your motion principles should follow that and feel like a natural addition to your design principles.
Have good reasons why you’re using motion— otherwise it causes more confusion in your designs and will make people sad.
It’s easy to just come up with a set of motion principles and say that’s what the team should follow from now on. It’s harder to come up with tangible reasons WHY you have the principles you’ve defined. We have an amazing tone of voice at Monzo, and we have a great set of design principles we live by. I took these and shaped our motion principles around them.
Experiment and learn all the things. Try everything: New tools, New shapes, New hat, anything.
I did animation at university, but the bulk of everything I learnt that I use today is from experimenting with new tools, following tutorials, playing around with dumb little illustrations I’ve made and making them dance. It’s like playing violin, you just need to practice and practice till you don’t sound like a dying cat anymore.
Make sure it FEELS and looks right.
If you decide to make all your animations exactly 600ms, but one feels off and looks better at 564ms — always go with what feels right, not if it’s technically the same. This is often done by just trial and error and continuously making animations and working away at the timing until it all fits together in a sweet little package. It can be frustrating but keep going till it feels perfecto 👌.
Take inspiration from everything, the movement of your coffee spilling on your shirt, the satisfying push of a button, a friend who has a big laugh.
Sometimes we can get caught in a loop of going to dribbble or behance and only looking for inspiration there. But a lot of that work can be purely for the sake of looking cool and not useful in a product. Motion is everywhere, taking example from real world movements is a great way to make sure what you’re designing still feels natural.
If you’re thinking this seems all this seems very philosophical and waffly, maybe it is, but this is just the process of how I look at things and how I’ve been tackling Monzo’s motion principles. The principles I’ve come up with follow below.
Monzo Motion: Core principles
Less is more
Don’t animate for the sake of it, placing flashy animations everywhere will create confusion rather than adding value. Consider why motion is needed before using it, what is the relationship between the elements you’re animating?
Understandable and with purpose
We should not introduce distraction, motion should make our designs more understandable and provide clarity. When designing motion we should help our users understand information and show the relationship between components.
Delightful but natural
Adding delight is great, but make sure our motion follows natural movement. Sticking to rules of physics will help our app not feel like it’s come from outer space — and therefore will not feel alien to use 👽.
Our motion should follow rules of directionality, if you expect something to move from the left then it should.
Next steps
Putting this into practice, creating a living document of examples of what to do, what not to do, how this looks in the app etc. The dream would be to also have product illustration motion guidelines, we already have a notion document collecting all our product illustration motion for inspiration!
To conclude, Motion is a great tool and can provide so much value in our designs. It shouldn't be seen as flourish we add at the end, but something that should be considered throughout the design process and bring coherence to your product.
P.S I’ve decided to end all my articles with a haiku.
Just like a bagel
Keep your motion rules simple
And you’ll never fret
