Learn After Effects. Why & How.
As interactive designers we need to learn how to communicate ideas, interactions and motion or risk producing unsatisfying work. Sure, we can design cool experiences with just Photoshop, but sometimes things get lost due to interpretation, or don’t turn out the way we envision. I strongly believe all interactive designers should learn motion principles and some sort of prototyping or motion software.
There are a lot of tools out there specifically built for UX design, such as Sketch, Invision, Framerjs, etc.; but for me After Effects (AE) has been one of the most valuable tools I have learned for effectively communicating concepts and ideas. I’m not going to lie, there is a slight learning curve to it, but if you know Photoshop you sort of know AE already. They share similar functionality such as layers, blending modes, filters, etc. It’s pretty much photoshop with a timeline, but much more powerful. Additionally, what I like most about it is that it allows you to learn composition techniques that go far beyond just UI and UX.
Below are some resources that will help you learn the basics of After Effects and get up and running rather quickly.
This is probably the quickest way to start with AE. In about 40 minutes, you will learn about keyframes, animation, and how to pre-compose elements. These are the most important skills that you need to learn in order to create any UI transition.
I know, I know, it’s a paid series, but if you are serious about learning AE this is a great resource. I highly recommend this course because it is a great overview of AE and teaches you proper fundamentals and workflows.
Videocopilot.net is my favorite site when it comes to After Effects. There are so many cool tutorials and Andrew Kramer does a great job of breaking them down. As someone starting off, I would recommend going through the Basic Training series. It’s a very old series but there is a lot of good stuff in there, I promise.
Objects in the real world don’t move at a constant speed — they ease in. So once you get up and running, you should focus your attention on timing and easing principles because that is the difference between a good and bad motion piece. These functions, created by Robert Penner, break down how each easing equation affects the motion of an object. Ease and Wizz takes those equations and adapts them to work as expressions in After Effects.
I hope these resources help you add AE to your workflow and say goodbye to boring interfaces. You may not need to use it for every project, but it sure won’t hurt. Like Andrew Kramer once said, “the more you know After Effects the more attractive and confident you will appear.”