UI animation tutorial: 3D cards

By July 14, 2015 October 16th, 2015 Tutorial

In this video I take you step by step through a quick and powerful approach to create and animate your 3D cards. Other ‘card’ techniques don’t involve the use of 3D but I’ve had enough folks reach out asking for this technique with 3D space.

In my UI animation trend mapping project (more about that later), one of the patterns I identified was the treatment of content as ‘cards.’ This interaction model allows for a range of diverse treatments and approaches. When used properly, it can provide an efficient framework for the user to navigate, bucket, rate content, and much more.

As with the execution of any UI animation, there are many ways to skin a cat (because the area of 3D cards is so rich and hence laden with so many pitfalls, I am developing a series of best practices videos breaking down the common techniques and strategies, so keep an eye out for those.)

I also introduce you to the concept of rigging your scenes with Nulls. When you’re working at a professional level, you need to think smart, plan ahead, and set yourself up for success. This technique supports that.

The beautiful screen assets are from UI8 (minus the photos of me and fake names). If you’re jamming on a  project and need to save tons of time, grab the Bolt UI Kit (it’s $88) . It’s sexy, insanely well put together and completely plug and play.

Just a quick heads up, if you’re watching this and you’ve never used After Effects, and you’re all like, ‘yo what the eff is going on here, son?” head over here and watch my ‘UI Animation with Adobe After Effects – Fast Start’ video. This will get you up to speed. And if you’re ready to turn yourself into an ass kicking UI animation machine, you can pick up the ‘Rapid Prototyping with Adobe After Effects’ training.

Shout out to Ehsan RahimiCreativedashChapps and Eddie Lobanovskiy for their awesome UI animation inspiration and reference material. Great job guys! Follow them on Dribbble and keep up to date with their latest work.

Not ready to join? Join over 1,000 other designers and watch my FREE ‘Rapid Prototyping with Adobe After Effects Fast Start’ video series.

Even if you’ve never worked on a timeline or with keyframes, I walk you through the 7 steps that it takes to create professional UI animations from your Photoshop file. It’s the training I honestly wish I had when I started learning this stuff. It’s free. It’s baddass. And it’s way easier than you think. [aweber_opt_in opt_in_id=”1234795980″ listname=”uxm-master-list” redirect=”https://uxinmotion.net/stoked/” meta_redirect_onlist=”https://uxinmotion.net/stoked/” adtracking=”Early_notification” split=”” button_text=”Get FREE training”]