Learn After Effects as a Product Designer

6 min readJun 16, 2020

Intro

This article may be helpful to anyone who is into product design and wants to learn After Effects. I have put down what I personally found the most efficient and pragmatic way to learn as a product designer. 80 percent of the value from After Effects comes from 20 percent or less for a product designer.

Before you start. Ask yourself why 🧐 you want to do this.

For me, I intend to use it along with webflow and other tools to build awesome websites and apps. This will primarily help me with freelancing and with my full-time job as an extra skillset. There are other secondary advantages to it as well. Plus it’s fun. But I know it’s not necessary.

And the idea is to not be great but decent enough to have it as an extra skillset for now. I can later decide to keep improving if I want to.

Check out this Ted talk by Josh Kaufman. He says that to be decent enough in a skill, you need to practice it deliberately for 20 hrs. Though to be an expert or master something complex, it takes 10,000 hrs. (But Cal Newport would further add to what being an expert actually means).

If you decide to learn, then let’s get started. 👇

I have divided the learning process into 4 steps.

Step 1: Begin with Tutorial and Play Around 🎬
Step 2: Advance to Simple Animations🏃‍♂️
Step 3: Reverse Engineer Animations 🛠
Step 4: Finally UI Animations 🎯

Step 1: Begin with Tutorials and Play Around 🎬

Use this video to get a basic understanding of After Effects. This will talk about importing files, editing the videos, shapes, and animation basics. As a product designer, this video covers most of what you’ll use. Make sure to practice along in after effects.

Use this video to learn shortcuts. Beginner to intermediate level shortcuts is covered in the first half of the video. Or try Pinterest, it has some good visual representation of After Effects shortcuts.

Now that you have a basic understanding of After Effects, you can start playing around a bit. Plus the shortcuts help you with trivial repetitive actions that are time-consuming.

Step 2: Advance to Simple Animations 🏃‍♂️

So after you’ve played around with After Effects for a few hours, you’ll need to have a decent enough challenge. Don’t try to achieve something too difficult now itself. You don’t want it to be overwhelming. Otherwise, you may lose interest and you may not touch it again for a while(My past self glaring at me). Take up a task that is a bit more challenging relative to where you are. Though, at the same time that is not repetitive and structured that it becomes boring. You need to find the appropriate balance or flow over here. The following links are a good place for most people to start off.

Go to this playlist and follow along 2 or 3 videos whichever you prefer of Oliver Randorff’s.👇

Or watch this video. It will further help in fortifying whatever you’ve learned and get entertained along the way.

Step 3: Reverse-Engineer Animations 🛠

Once you gain confidence in using After Effects a bit. Start challenging yourself by trying to achieve an animation without following any tutorial.

Try to break down how a certain animation was achieved.

And the best way to break it down is by copying existing works. You’ll get to learn at least a bit of the process, the original creator had to go through. Plus your visual/motion vocabulary will improve. Using an active learning approach, the things you’ve learned will embed into your mind(or mental model)
Check out this video by Abhinav Chhikara. On a different tangent, but still relevant. He talks about copying screens for a person who is starting out in product design. To improve their UI(web and mobile interface) skills. I took the same concept and applied it for After Effects as well.

By copying animations you’ll learn more about After Effects. And get even more comfortable with it.

For practice, I have bookmarked a few animations in Notion. They range from relatively easy to medium level.

For Practice

Try to figure out how to do these

www.notion.so

Or you can also go back to Step 2 and try to achieve what is done in Oliver Randorff’s video playlist without watching. Generally, he shows you at the start itself what will be achieved through the video. Watch that part and then try to achieve it in After Effects.

For inspirations, you can also follow Oliver Randorff’s Instagram channel along with Ed.motions

Now, at this stage, you’ll not only be able to copy-paste animations. But also be able to make your own decent looking animations. With decent control over After Effects.

Step 4: Finally UI animation 🎯

Advance to this playlist which focuses only on Mobile UI animation. Better would be if you can reverse engineer these, if not, then you can follow along.

Advance Tutorials

Figma Tutorial & Liquid Swipe After Effects Animation (2020) Sketch Tutorial & 3D Animation in After Effects & Cinema…

www.notion.so

Also communities😅

One more thing, I have found useful for upgrading your skillset is online communities. That has definitely helped in my product design journey. By being on Twitter, Telegram groups, Discord, Slack channels, and Reddit groups.

I haven’t explored any communities for motion design yet. I felt that it would only be necessary if I wanted to improve on my existing skillset.

So, that is it, guys. By following this, you and I should be set.

My Notes 📝

I am posting some of my rough notes here that I had taken when I was going through the above-mentioned videos. You can use it for your reference in the future if you need to look back at anything. Though, I would encourage you to take notes and write it in your own words.