I’ve always loved prototyping and interaction design. There’s something magical about that moment when ideas suddenly come alive through movement. I’ve also found that people are able to grasp prototypes far easier than static images, and I’ve had great success getting team, client and user buy-in when producing something clickable.

While I use a variety of tools from Axure to Quartz Composer/Origami to Invision, Balsamiq and Pixate, recently I’ve been dabbling more and more with Framer.JS. It’s an interesting tool, that requires users to write a simplified version of JavaScript to create rich, detailed interactions. Here are some of the things I’ve been working on:

Snowfall Concept

Aside from its changing, photo backgrounds, one of the things I enjoy most about the Yahoo Weather app is the way it changes based on the current weather conditions. When it’s raining, you get condensation and droplets, when it’s foggy, you clouds…so I thought it would be fun to try to create a snowfall effect.

Among the (decidely nerdy) details: there are 21(!) different snow flake shapes, and they appear in two “layers” to create the appearance of perspective. The large ones fall faster, while the small ones fall slower and go behind the trees and hills.


Blast Off!

I’m a sucker for good loading animations, because they aren’t just there to be cute. A good loading animation replaces a moment of user boredom/frustration with one of happiness–instead of simply waiting for the information, you’re distracted and noticing the hard work a company did to make a good product. This distraction has the practical outcome of making the wait seem shorter as well reinforcing the relationship with the end user.

Page Switcher

This was an attempt to add some life to the very utilitarian Nav menu–wouldn’t it be cool to represent the various pages as actual pages and add some whimsy? In practical application, this would only work for apps with a small number of pages. I’d also dial back the elasticity effect in real life, but left it in here because…fun.