Motion Perfection

Oh, So You Can Walk? Now, It’s Time to Run.

For years, we’ve been pushing pixels — crawling towards digital perfection. At this point, it’s second nature. Pixel perfection is no longer a surprise, it’s an expectation. No one is impressed with your “nearly-OCD” obsession with pixels — it’s average. It’s expected. Yawn.

So what is unusual? What will set you apart from the competition? Interactions — great ones. Well thought out animations, motion graphics, and interactions are the future. Why now? We have amazing web and mobile tech that allows us to be spoiled. The distance between what we can imagine and what is feasible is smaller than ever.

But, you were never taught motion graphics or interactions in school! Well, consider yourself lucky. You’re a pioneer now. You get to set the trends and you get to teach the lessons. Still worried?

Here’s a quick guide to help out.

Prototyping Tools

You can’t start running without shoes. Here’s a list of tools to help you communicate your interaction design.

1. After Effects: AE seems to be the most popular choice at the moment. It’s extremely powerful; used frequently in film making. A tad bit overkill, but who doesn’t like shooting skeet with an RPG. Spits out videos, no interaction. Plays nice with PS and other Adobe products.
2. Quartz Composer: Quartz composer is conveniently bundled with Xcode. The Facebook Home team famously used Quartz Composer to prototype interactions and animations. You can also produce interactive prototypes using Xcode’s Storyboard feature — Meng To tells more. The learning curve gives the most grizzled Designers nightmares; but hey, don’t let that scare you.
3. Keynote: Extremely simple, yet quite versatile piece of software. Many designers swear by it. Extremely convenient to integrate a prototype within a presentation. Easy to learn, but not quite interactive.

Study the Pioneers

A handful of designers are already out there trailblazing. They eat default platform animations for breakfast. Here’s a couple of my favorite:

1. Creative Dash: A small Design studio focused on high-end creative projects. They make quite a splash on Dribbble with their animated interactions.
2. Agence Me: A one-man army. Couples clean design with simple animations.
3. Julien Renvoye: Founder of Juiiicy.com, he breathes life into designs with quirky animated elements.

Outside Influences

Web and mobile interactive design is still in it’s infancy, we can learn a lot from the work done by Motion graphic designers and Movie interfaces. Here’s a couple of my favorite:

1. Bradley G. Munkowitz: A motion-graphics veteran — worked on interfaces for movies such as Oblivion, TRON, and Batman.
2. Random: A studio of four highly talented visual/motion designers. Their work merges cg, graphics, and motion to create some awesome videos.
3. Smoke&Mirrors: One of the largest studios, with offices in London, New York, and Shanghai. Tons of reel material to gleam inspiration from.