Building Motion for the Web

I've recently been noodling on motion and its use in web interfaces. I've been frustrated that most examples and material you find about motion fall into a few common categories:

• Another rehash of Disney's motion principles
• Explanations of easing and CSS transitions
• Imaginary app interactions built entirely in prototyping tools
• Wild and technically complex demos that can be inscrutable. (Have fun reading that 3D shader algorithm...)

It all seems to be very low-level, limited-scope implementations, or so high level you might as well be reading a Wikipedia article. Very rarely do you find material on how a team considered motion as part of their design ideation, how the designer and developers collaborated on bringing it to life, and how they convinced the stakeholders that the time spent was worth the effort...

So I thought we should try to bridge that gap.

What I'm most interested in is:

• Creating shared language around motion
  • (Have you tried having a conversation on how something should move?)
• Empowering designers to be creative without blowing the entire development budget.
  • ("Yes, all the things can move, but like THIS rather than like THAT...")
• Create frameworks for talking to clients about motion and setting expectations around timing and cost.
  • (It never works if it's just tacked on at the end of a project or has no money allocated to it.)
• Testing collaboration methods and deliverables around motion to widen our process toolkit
  • (Spoiler: I don't think high-fidelity motion prototypes are helpful to anyone but the client.)

I feel like THESE are the social, financial, and collaboration barriers that have to be overcome for any successful technology integration, but we seem to currently lack these tools for motion on the web.

We've started a series over at Viget that I'm excited about as we work to explore these topics. The first post is here: Building Motion for the Web: In the 'Zone'. We explore classifications of motion characteristics in interfaces to start categorizing types of motion.

Check it out, it's only getting started...