The Stages of Motion Design: From Idea to Final Animation
Actual motion design experience from Outcrowd. What animation does for digital products and how it’s made.
Motion design can enliven any product, making it not only user-friendly but also memorable and attractive. Animation guides the user, simplifies their interaction, and builds an emotional connection with the brand. It turns complex processes into easy and intuitive steps, adding an unforgettable wow effect to the product. Animation is a great opportunity to stand out from the competition and make your product more user-friendly.
Our motion designer Marta Zhuravel talks about the process of creating animation, its adaptation to clients’ requirements, and working with different platforms. Her experience and vision can be useful for those who want to introduce animation elements into their product.
Marta makes animations that make users fall for the product and keep coming back. That’s why her experience is certainly noteworthy.
Q: Where does the process of creating an animation start after you receive the terms of reference? How do you familiarize yourself with the task?
A: When I receive Terms of Reference (ToR) with all of the client’s requirements and preferences, the first thing I do is collaborate with the graphic designer. That’s where I get everything I’ll need for the animation, including the storyboard. Storyboarding helps visualize the structure of the animation and understand what it will look like in the end. If there are illustrations, logos, or other images, they should always be in vector or bitmap format. It’s also important to study references, which are key to understanding the style and dynamics of future work.
Q: What influences the choice of animation style? Is it the target audience, the type of content, or the client’s requirements?
A: The style of animation largely depends on the type of product and the client’s wishes. Often clients already have an idea of what they want the animation to look like, and our job is to combine their vision with what works best for the product. We work with different types of projects, from SaaS systems to online platforms and marketplaces, and each type of product has its own style. For example, for strict, minimalist products we choose calm, restrained animations, whereas for entertaining platforms we can use bright, fun, and dynamic elements. Designers pick brand colors and styles, and I enhance these with different visual effects such as blur, highlights, shadows, or gradients.
Q: Marta, what tools do you use to create your animations? How does the choice of tools affect the result and speed?
A: My main tool is After Effects. This software gives me a wide range of possibilities for creating animations, from simple transitions to complex visual effects. In addition, After Effects integrates easily with other graphics programs, making it easy to work with images and videos. The program also supports 2D and basic 3D animation, allowing you to experiment with visual solutions.
Q: How do you get animation approved by the client? How many stages does the animation go through before the final version?
A: Usually, after I create the first draft of the animation, we discuss it with the designer and the whole team. If everything looks as we planned, we send an mp4 video to the client. Most often clients are immediately satisfied with the result or only make minor adjustments. We try to make the process of animation as detailed as possible to reduce the number of edits and additional approval stages.
Q: How do you adapt animation for different technical requirements and platforms?
A: As soon as you receive the ToR, you must know what format the animation will use. It can be mp4, gif, sequence, or json. It’s also important to consider cross-platform adaptations — for websites, social media, or mobile devices. For example, if the required animation is in two formats (mp4 and json), I plan the project structure in advance so that it can be easily adapted for different platforms and devices. Properly organizing work from the very beginning saves a lot of time and effort later on.
Q: What methods do you use to optimize animation so that it does not affect the website loading times?
A: Optimizing animation is an important part of the work. The more lightweight the file, the better it will play on different platforms. For mp4, I use Premiere Pro or Clideo, which enable lossless compression. For gif animations, I use the GifGun plugin, and for json I use specialized resources. At the same time, I try to build the project so that its elements are as lightweight as possible, without overloading it with effects.
Q: How do you test animation before delivering it to the client? How do you do cross-device testing?
A: After the work is finalized, I review the animation on my computer, sometimes checking how it’s displayed in messengers and on mobile devices. If the animation is in json, I use specialized resources to check if it works correctly. If the animation is intended for use on a website, it’s also tested by developers to make sure that everything works correctly and properly.
Q: How do you evaluate the success of an animation once it’s done? What criteria help you realize that the work has been done successfully?
A: The main criterion is the satisfaction of the client and the team. The animation should be dynamic, harmonious, and in line with the client’s requirements. Normally, several people from the team review the final result and share their impressions, and then we make the necessary improvements.
In Conclusion, or Long Live Motion Designers!
Animation plays a major role in design. It engages the user from the first seconds, captures and holds their attention, creates a special atmosphere, and effectively immerses them in it. Animations tell users what to do next. Well-designed animations make a product easier to use, help users understand it better, and motivate them to come back.
I thank Marta for sharing her great experience and hope our readers will find it useful.
