If you’re familiar with motion design and After Effects, you probably know how hard creating a new animation can be. Mis-alignment can lead to a lot of back-and-forth and any change you’re making can make you lose hours of work, and create some massive frustration in your creative process…
Much like most product-led companies, we often have to produce animations to showcase our product. So we wanted to share our process to make this work as smooth as possible 👇
1. Get aligned with a clear design brief in Notion+Claap
We received the feedback that our homepage animation wasn’t very clear as people didn’t understand that you could record your screen. Some people even thought that we were some kind of web conference solution, so we had to fix this problem!
I got a ping on Notion with a short brief that had everything I needed.It started with a quick 4 minute claap video and then some bullet points that summarized step by step what was expected for the animation.
2. Create the 1st version of your animation storyboard in Figma
Before diving in and making all the detailed mocks necessary to storyboard, I made a quick wireframe using elements I already had.And then using Figma’s comments to gather some feedback, I was able to quickly know if I was heading in the right direction before starting the final storyboard.
3. Gather feedback with Claap
From the feedback I gathered from the rough wireframes, I then went into full detail with the storyboard and made something cleaner to present.
As well as this, I did some some pre-visualization of what the animation would look like on our website to have a better idea of how it would appear in context to see if the zoning and placement would match all pages.
When I finished working on the storyboard I launched my Claap extension and started recording my screen to explain what my intentions were for each frame as well as what animations I was going to do in After Effects.It’s important to be clear and precise to make it easier for your teammates to give you actionable feedback.
4. Implement changes in Figma
From the claap that I shared for review, I got about 4 comments pointing out some changes to make on the storyboard. One included redoing the main zoning and the layout of the animation itself.
Getting this kind of feedback BEFORE you start making the animation is great because making those changes in After Effects once it’s done can be just a little frustrating, believe me. I’ve seen a few Macbooks fly across the room…
Anyway, nothing too time consuming. So I made those changes, recorded my claap, and shared it once again for feedback.
5. Validate final storyboard with Claap
For this part I was feeling quite confident as I knew that all the proper changes were made and that all the feedback was taken care of.
I only had one comment: “Perfect! thanks a lot 🙏” with a couple of tiny changes for text and so on.
I couldn’t have gotten a clearer message than this so I knew I was good to start animating.
6. Start creating your animations in After Effects
For the animation I am using After Effects. It’s not the easiest software to use in general and I probably only know about 5 or 10% of it. But still, I know how to work my way around and get what I need done.I started importing all the different elements that I needed for the animation, organizing all my assets, and trying to plan ahead so that my process would only be easier and less frustrating.
7. Validate the animation flow on a 1st version with Claap
After a long day working on the first part of the animation, I finally had something to record and show in a claap to gather some possible feedback.
But this time I got 2 comments.. good comments 🤗
8. Finalize the animation in after effects
After some rewarding comments, all I had left to do was the second part of the animation. Queue another day of After Effects before having a full version of the animation.
Remember earlier when I said “Getting this kind of feedback BEFORE you start making the animation is great“?Imagine if I had to make a big change and have to redo all those keyframes, effects and so much more without having properly validated the storyboard at the beginning?
(and that’s not even the full page of layers 😱) flying macbook
My mac was lucky that day. We had a couple exchanges on slack where I shared a quick preview of the animation to see if the team had some feedback before doing a full render.
9. Upload your latest version in Claap for validation (optional)
After getting the approval from everyone I just had to render and export the animation and when that was done I simply imported my rendered animation into my workspace and shared it for final validation.
10. Show off your new animation off the landing page
And here it is!
10 steps to go through your motion design project.
I’m not a motion designer, neither am I that great in After Effects but this is probably the nicest animation I’ve made so far. I’m definitely proud of it.