Animated means full of life and excitement. Animation brings life to otherwise static things. When it comes to software, it’s not just about fun, it’s about solving problems (for example 3D configurator).

motion design e

As humans, we are used to seeing the world around us and when any software has coherent animations, it feels alive and natural.

Technology leaders in the industry are pushing their products to become more natural. Demanding words like Motion Design, Motion UX, UX Choreography are gaining in importance.

“Remember, Motion unconsciously builds the personality of your application. Similar to layout, distance, typography and colors.”

Have you ever noticed that an elastic jump occurs on an iPhone when you’re done scrolling? Seemingly small details like these play a big role in shaping the personality of Apple products.

Start with observation.

Develop an eye for movement. If you can’t watch things move, you won’t be able to work with them. Start watching things move on your screen as you use your favorite apps. Look again and find out why they like it and try to look for the details. See what’s changing – shape, size, position, color. Whether it’s tiny or huge, try to figure out what part movement is played throughout the composition.

Animation is not just a layer of color.

Animation reveals a deeper meaning. As an artist, you must consciously think of animation from the beginning. When you are in the design phase, animate your prototypes to add this dimension to time. When you’re in the development phase, divide your code into modular components to easily move things around in the user interface. Learn more about modularity.

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

How can you get your product moving?

Some simple places where movement can be introduced into your product might be when the screens change, when the user interacts with an item, or when the user has to wait for something.

Types of movement UX.

You can categorize movements in products as transitions (content changes/users switch to another screen), micro-interactions (e.g. Twitter‘s Like Button), graphical animations (e.g. the roller jump on the home screen of the Zomato Order App).

Provision of spatial information with Motion.

When a UI element enters from the right side of the screen, the user will mentally organize the position of that element so that it is on the right side. For example, if there is a hamburger menu button at the top left of the screen, the menu must be animated from the left. To check if your animations communicate properly, show them to people and listen to what they have to say. It’s the easiest way to avoid possible confusion.

Start to understand things like duration, timing curve, animation path, start and end values.

Technically, these parameters make up your animation piece. Play around with them and hang on to these controls. Once you feel able to control them, you can create motion masterpieces. Google has some nice guidelines for the user interface.

Never let people wait in the middle of a river.

Never slow down people in the middle of a river to get them to wait for the end of an animation. If you really have to wait, enjoy a meaningful animation. Always remember to use your animation to solve a problem. There is a reason why there are animated loaders. Also, you shouldn’t overload your software with movement. It’s not a movie.

“Professional Tip – keep the animations subtle and in line with the plot of your product to create a pleasurable experience.

Tools to use.

Lottie, Adobe Animate CC, After Effects, Sketch2AE, Framer, Origami, Animatic App, UIDynamics (iOS) are some tools for motion design.

“We recommend that you first use pen and paper to start with your idea. Then move on to any digital software. For animations in this article, I created hand-drawn frames in the Animatic app. An animation helps keep things simple and focused.”

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 move. Learn by copying. You can also save GIFs on Dribble. Giphy Capture is also great for capturing and recording things on your Mac screen.

Bonus Point – Say goodbye to your fear.

Still afraid to get started? Relax. Have a pen and a piece of paper ready. Hold the blank sheet of paper in front of you. Take your pen and sketch something random. Make a shape. Draw more. Create a storyboard. Feel the freedom and move your hands. You will be able to see the progress very quickly.

“It’s scarier to touch a pen on paper than to draw. You have to be creative as soon as you turn this empty piece of paper into something else.”