Facebook Home in in 20 minutes: Designing and prototyping UI in After Effects

fbhomeIt should just, boom, rotate, and make a swooosh-like turn at 90 degrees and then bam, bounce a like jelly in outer space, but more whop-whop-bang in a microwave. Right?

Blank stares. One guy nodding. At his phone. Still, it was the best explanation I could do in 20 seconds. In fact, it was the best I could do without spending hours hacking Javascript. For something we might decide to abandon the instant we see it.

Getting to know the feature
Product design is really just a race to getting to know the product. It’s about balancing interpretations and knowledge gaps as smoothly as possible, but really, we’re just guessing until we are able to fill the gaps with animations, prototypes and eventually the final product.

know

Quartz Composer

Embraced by Apple and Facebook, QC seemed like a good idea to try out. It’s fun to work with, but it turned out to take up a significant amount of time – 3 times more than After Effects, from my experience. Also, it can seem a bit confusing to some people:

Pasted_Image_8_1_13_12_00_PM-2
(slide from a QC talk at Evernote)

When I decided to check After Effects out, the only tutorials I could find were how to make it look like your car exploded and hatched alien blood. Not plain old interface design. So I decided I’d make one, and I decided that basing it on David’s excellent tutorials for Quartz Composer might be able to help you compare the two options.

What we’ll build

This is the final animation as it will look (before we add it to the skyscraper)

fbhome

Part 1: Basic animation

1-chathead

Using just this you’ll be able to do 80% of anything you would ever want to do. Not bad for 3 minutes.

Part 2 and 3: Don’t repeat yourself

2-flyout
This gets a bit hairy, but hang in there, this can save you hours.

Part 4: Anchorpoints

4-alert

Easy one. Learn how to make it look like the speech bubble comes out of that guy’s mouth.

Part 5: Modal dialog

5-message

Bounce animate a big modal dialog and make the rest of the interface darker.

Part 6: Exporting the video file and creating an animated GIF

The secret sauce. Paste the GIF into G+, emails or presentations and your audience will know exactly what you mean.

Part 7: Motion tracking onto a real skyscraper

fbhome It could be any object, really. Like a mobile phone if you’re into those.

A projector drone that follows its user

A fast-food restaurant with exit treadmills

A self-driving recreational vehicle

Buying Kindle books at the physical bookstore

An app that makes your phone worse as you gain weight