Oops...I'm behind: The Animated Catch-Up

It's no secret that animation in design is quickly growing. If you are not doing it now, you're behind.

I am behind.

Learning how to do animation has been on my list for the last two years and to be honest, I've been too lazy to teach myself how to do it. Part of the problem is trying to learn how to use all the tools in After Effects. It's hard, and there aren't too many tutorials that teach me exactly what I want to do. So how was I suppose to begin? It wasn't until my recent job search that I've realized how far behind I am. And that's an easy thing to do when you've held the same job for 5 years. You know what projects are coming up, you know what designs will be accepted and which ones will not. It's easy to fall behind. So I've decided to do my best to get my hands dirty, and learn the beast. While doing a freelance job, I was exposed to many animated ads that my co-worker had produced. It got me inspired to attempt my own design, so I did a search of how other companies were incorporating animation into their websites and digital ads. Below are a few of what I found to be the most inspirational.

Credit: Andrew Graham

Credit: LOFT

Credit: Land's End

Credit: Loeffler Randall

Just a small collection that inspired me to think. So where did I begin? I love, love, love Betsey Johnson. I receive her emails for sales and new products, so I decided to start there. I did a search of all the emails I have received and saw there weren't many that used animation. She just released a few new handbags for fall. Using the ads that gave me inspiration, I jumped into Illustrator to layout the look of my ad. Anyone who is an animation newbie like me, it is important to note that when designing in Illustrator, you need to make sure every item you want animated needs to be on it's own layer. Once you import the design into After Effects, you are able to set each layer or item to it's own motion. So when you are thinking about how you want your design to move, remember to separate! 

I decided to grab one of Betsey's new handbags, and give it a fun little Halloween twist. The purse is a spiderweb, so I decided to make it shake a little, and have small spiders drop in and out of frame. I also showed how the button hover would work to lead you to more handbags. It's pretty easy once you get the hang of the timeline. I mostly used anchor points, position and opacity for the animation and set it to repeat on a loop forever. This appears to be what I see most ads doing. Nothing too complicated, but enough to get your attention. Below is the ad I created. More to come in the future as I learn more about After Effects.

Credit: Lauren Jordan | designerlauren.com | Betsey Johnson logo/handbag from Betseyjohnson.com

NOTE: This design is just for fun and not in any way meant to be a portfolio piece. Just a progress report using design and brands that inspire me.