Motion Design Videos
A video representation of an animation to expectations and requirements of the UI. The videos are high-fidelity prototypes to adequately demonstrate the animation. The most useful things about motion comps is how they allow designers and developers to share the work of creating animations.
Animations are important aspect of modern digital experiences by bringing the interface to life. The movement allows for better focus, improved navigation hierarchy awareness, and a more profound emotional response.
Opportunity to use motion design when hearing feedback from users such as:
- “I don’t know where to focus.”
- “What’s most important here?”
- “I have no desire to use this tool.”
- “How do I know what to do next?”
- “How do I know I have completed my task.”
- “I don’t understand what this data is telling me.”
When to Use
- To provide development with clear documentation for a custom animation.
- To leverage Lottie to generate animations that can be immediately implemented.
Steps
- Gather the assets you’ll need to present
- If using a generation tool like Lottie, it’s best to create all your vector assets within the animation tool.
- Picking the right tool is crucial to creating an motion video efficiently. For basic transitions, leverage streamlined prototyping tools. For more complex custom animations, leverage After Effects.
- Export to a video file or code to share with the team.
References
Templates (if applicable)
Created by: Joe Steinkamp | Last updated by: Joe Steinkamp