What tools do I need for motion design in UI?
Adobe After Effects vs New Prototyping tools
As of a couple years ago, After Effects was one of most popular tools to make animations for UI design. Searching for AE on dribbble brings up thousands of examples of app interactions created in After Effects. However, for designers looking to add motion to their workflow, there are three serious problems you’re going to face.
1) AE has a steep learning curve
It’s a tool meant for all kinds of animation — from motion graphics to short movies. So not only do you have to understand how to use the software, but you have to be comfortable enough to create whatever ideas you have. This means understanding AE’s feature set really well.
2) Time to prototype is high
Prototyping animations in AE takes a couple of hours, plus a couple minutes every time you want to render a video. As a result, experimenting with lots of different concepts is difficult, and you’d probably end up thinking about motion only towards the end of your project, making motion an afterthought. Literally, the name of the software is After Effects. This makes AE a bad choice to rapid prototype with.
3) AE produces videos, not clickable prototypes
The final output of AE is a video of the animation. While this can be great for presentations, it misses the interactivity element. With clickable prototypes, you can get real users to interact with it, and try to navigate it. This can be great for discovering usability issues, validating ideas, or testing new features. AE falls short on this front.
What to use instead
Luckily, we’ve got a great set of prototyping tools available in the market. Based on what you’re trying to achieve with your prototype, you can try out one or more prototyping tools.
Screen level prototyping
These are great for creating simple clickable prototypes with a bunch of screens. You could use wireframes and pencil sketches, or final designs of your interface. Think checkout flows, onboarding, or even full apps. Tools to try out — Marvel, Invision, UXPin, Flinto
Element level prototyping
This is for when you need to animate elements at a screen level. A slider to select which Uber car to select, delightful animations, material design animations. Tools to try out — Principle, ProtoPie. Other: Framer, Origami
The two sets aren’t mutually exclusive — technically you could make full screen level flows with Principle, or animate something at an element level using certain features of Marvel. My advice for picking a tool would be to experiment and read about them to understand their capabilities and limitations and know which would be perfect for what you’re trying to do.
Sign up to Motion UX’s newsletter to receive the best resources and inspiration in your inbox every week. No spam, only A+ content guaranteed.
