Get started with motion design in 9 steps

Start breathing life into your digital creations

Motion Creates Life.

Animated means full of life and excitement. Animation adds life to static things. When it comes to software, it’s not just for delight but for solving problems.
As human beings we are used to see the world moving around us, and if any piece of software has coherent animations, it feels alive and natural.
Tech leaders in the industry are pushing their products towards being more natural. Sophisticated words like Motion Design, Motion UX, UX Choreography are gaining popularity.

Remember – Motion subconsciously builds the personality of your application. Much like layout, spacing, typography and colors.

Have you ever observed that elastic bounce on an iPhone when you finish scrolling things? Seemingly tiny details like these play a big part in forming the personality of Apple’s products.

Cool, Let’s get started on using motion

1. Start Observing

Develop an eye for motion. If you can’t observe things moving, you won’t be able to work with them. Start observing how things move on your screen while you use your favourite apps. Look again, and find why you like it and try to look for the details. Observe what all is changing — shape, size, position, color. Doesn’t matter if it is tiny or huge, try to find what part motion is playing in the whole composition.

2. Animation is not just a layer of paint

Animation reveals a deeper meaning. Being a creator, you must consciously think of animations from the start. If you’re in the design stage, animate your prototypes to add that dimension of time. If you’re in the development stage, divide your code into modular components to easily move things around in the UI. See more on modularity here

Tip – Mindfully thinking about the animated personality of your creation will give it a character and help you get a deeper perspective on what you are trying to build.

3. Where to introduce motion in your product?

But where?

Some easy places where motion can be introduced into your product could be when screens are changing, when the user interacts with an element, or when the user has to wait for something.

4. Types of Motion UX

You can categorise motion in products as Transitions (content changes/user moves to another screen), Micro-interactions (Twitter’s Like button for example), Graphical animations (like the scooter jump on the splash screen of Zomato’s Order app).

Types of Motion UX

5. Provide spatial information with Motion

Motion communicates space.

If a UI element enters from the right of the screen, users will mentally organise that element’s position to be on the right. For example, if a hamburger menu button is placed on the top-left of the screen, the menu must animate-in from the left. To check if your animations communicate right, show it to people and listen to what they have to say. It is the easiest way to avoid any possible confusion.

6. Start understanding things like Duration, Timing Curve, Animation path, Initial & Final values

These parameters technically form your animation piece. Play around with them and get a hang of these controls. Once you feel in control of these, you can make motion masterpieces. For UI, Google has some nice guidelines.

Learn about animation parameters — These 2 boxes have all the parameters same except the Timing Curve. Explore and read about it.

7. Never MAKE people wait in the middle of a flow

Never slow down people in the middle of a flow to MAKE them wait for an animation to finish. If they really HAVE to wait, then delight them with meaningful animation. At all times, remember to use your animation to solve a problem. There is the reason why animated loaders exist. Additionally, do not overload your software with movement. It’s not a film.

Pro tip – Keep animations subtle and in-line with your product’s storyline to create delightful experiences.

8. Tools to use

Lottie, Adobe Animate CC, After Effects, Sketch2AE, Framer, Origami, Animatic App, UIDynamics (iOS) are some tools for Motion Design . Look them up.

I recommend using pen and paper first to get started with your idea. Move on to any digital software after doing this. For animations in this article, I did hand drawn frames on the Animatic App. An animatic helps keep things simple and focused.

Start with Pen and Paper

9. Capture and Save things you find interesting

Save things you find interesting. Watch them over and over again, slow them down and understand how elements are moving. Learn by copying. My mac is full with animated GIFs I find interesting. You can also save GIFs on dribbble. Additionally, to capture and record things on your Mac screen, Giphy Capture works great.

Be Fearless💥

Bonus Point —Say Goodbye to the Fear Monster

Still scared to start? Sit down. Relax. Eat that dessert you love. Play that song you desire. Turn off your phone. Keep a pen and paper next to you. Maybe get a small nap. Feel good. Feel comfortable. Keep that blank piece of paper in front of you. Hold that pen in your hand. Scribble randomly. Pick up another piece of paper. Scribble something random again. Next piece of paper. Make a shape. Next piece of paper. Draw more. Make a storyboard. Make the storyboard again. Feel the freedom and get your hands moving. Start. Just Start. See where it takes you.
It’s more scary to touch a pen on paper than to draw. You are creative the moment you turn that blank piece of paper into anything else.

Originally published in UXDesign.cc.

😬 Enjoyed this article?
Click here to see my wall of animations

Click here to go to my website see more from me.

Thanks for reading!