There's one particular question that I get asked most often about UI animation. After nearly every talk or workshop I do, someone asks a variation of this question:
"How do I convince my teammates (or boss, or client) that we should be using animation in our work?â€
That's a tough challenge. It can be lonely as the only member of team animation in your office.
The way to bring them around is to slowly but surely bring animation into your design discussions. Be an undercover animation hero!
Here’s how:
Show and tell
Share the articles or examples you find that highlight animation being used effectively. When you come across examples purposeful animation in your favorite apps or sites, share that with your teammates as well.
Don’t wait for anyone to ask for storyboards or animated prototypes, just make them! Include storyboards with your design explorations. Prepare an animated prototype and present it with your usual static deliverables. Back these up with an explanation of how those animations improve the user experience. The first rule of UI animation is to have purpose. Show them that, and you’ve made a rock-solid case. Go, you!
- Val
News, tools and inspiration!
Even More Prototyping Tools
Invision has thrown its hat into the ring of UI animation prototyping tools. And just this week, Adobe announced Project Comet as their new prototyping tool too. With so many different players, we can expect some big improvements in our web animation prototyping options soon!
Motion Design Inspriation
Watch the Inframe Title Sequence for a little motion design inspiration. Lovely shapes, colours and fluid motion. It's hard not to imagine an SVG version of these animated shapes! For more insipring motion design, check out Wine After Coffee's Vimeo collection.
Inspiration
Halo Waypoint Visualizer#webgl #dzy 3D particles flock together to form halo helemts with an especially nice wavy timeline interface from Active Theory.
Sequoia's new web site #inspiration #uianimation #dzy
A little texture, fluid animation and solid art direction. Bonus points for keyboard accessibility too. Nice work from Instrument.
YUME Chrome Experiment#webaudio #experiment
Control the music and animation by interacting with the floaty shapes in this interactive music exploration from Whitevinyl.
GASP + SVG for Power Users Part 3#tutorial Another installment on advanced SVG animation from the super cool Sarah Drasner. This one covers all the newest GASP features and how to apply them to SVG.
Physics for Motion Design#podcast In Episode 7 of Motion and MeaningCennydd puts his Physics degree to good use explaining the physics concepts that are most useful for creating realistic animation. I learned a lot recording this episode!
Tools
GreenSock’s MorphSVG Plugin#SVG #JavaScript
Morph from one SVG path to the other. Even if the two paths have a different number of points! (What!?) It’s currently in private beta, but I have it on good authority it will be released publicly in the next few days. Here's one example of what it can do.
Popmotion JS physics library#library #JavaScript
physics, animation and input tracking! This could be a useful one. Their docs breakdown how the library works in great detail too.
Sketch to Principle Tutorial#sketch #tutorial Sketchapp TV shows you how to go from Sketch to Principle for Mac to make an animation prototype.
I'll be speaking at CSS Dev Conf, Oredev and edUi in the next few weeks. If you're there too come say hi!
Like the UI Animation Newsletter? Share it with your friends: