QR Code Generator — Motion Design

for QR-Code-Generator.com, a subsidiary of Bitly 



Expressive Editorial Style


I developed the principles of the animation style that would carry Bitly Europe’s expressive illustration style into the world of motion.







Productive Interface Style

Squash & Stretch

This animation principle provides the illusion of “life” by stretching an object in motion, and compressing —or squashing— a moving element as it comes to rest.

Do



Do keep things strightforward and mechanical by omitting squash & stretch from your Productive Interface Style Animations.

Don’t



Don’t include squash & strtech in your Productive Interface Style animations.


Anticipation

Anticipation is a small movement immediately before the primary movement in a scene that draws attention to the object that is about to move.

Do



Do keep things strightforward and mechanical by omitting excessive anticipation from your Productive Interface Style Animations.

Don’t



Don’t include anticipation in your Productive Interface Style animations.


Timing

Timing refers to sequencing animated elements in such a way as to make things feel effortlessly and natrally sequential, and giving the viewer’s eye smooth and clearly laid out path to follow throughout the scene.

Do



Do utilize sequential timing in your Productive Interface Style animations to give transitioning elements a sense of purposeful direction.

Don’t



Don’t use timing that interferes with the natural flow of the main scene.

Productive Interface Style in Action