uxdesign.cc – User Experience Design — Medium | Arpit Agarwal

Start breathing life into your creations

Motion Creates Life.

Animated means full of life and excitement. Animation adds life to static things. When it comes to software, it is 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 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 stuff? 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 then. Start observing how stuff moves on your screen while you use your favourite apps. Look again, and see why you like it and try to understand how things move. Observe what all is changing — shapes, sizes, position, colors. 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 at the design stage, animate your prototypes to add that dimension of time. If you’re at the development stage, divide the code into modular components to move stuff around easily. See more on modularity. Be mindful of the animated personality of your creation and it will give you a deeper perspective into anything you 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 stuff 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 stuff you find interesting. Watch it over and over again, slow it down and understand how elements are moving. Learn by copying. My mac is full with animated GIFs I find interesting. Create buckets for GIFs on dribbble. To capture and record stuff from 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.

Thanks for reading. Hope it helps you! ✌️

👀 Check out some animations I recently made —

Arpit Agarwal

👏👏 Enjoyed reading this? Press the Clap button to help this story grow.

Get started with Motion Design— 9 Easy Points was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.