Copy
Motion audits FTW + inspiration, resources & links | View in your browser
A bird’s-eye view your brand in motion 

Over the last couple of days I’ve been preparing a motion audit for a client of mine. In our case we’re using it as a first step towards creating a motion style guide, but a motion audit can be helpful anytime you need a big-picture view of how your brand is using animation.


How to conduct a motion audit:

1: Collect screen recordings of every animation currently on your site. 
2: Assemble all the video clips into one document. (I like using Keynote for this for the ease of playing each video on click.)  
3: Group the animations in your audit document by their primary purpose.

 

What a motion audit can tell you
 

Seeing all the animation you use in one place let’s you evaluate it as a whole and identify both strength and weaknesses of your animation efforts.

Using your audit you can identify: 

  • The most common purposes you’re using animation for. 
  • Unnecessary or frivolous animations. (if you can’t identify its purpose…)
  • Duplicate animation efforts. (10 different fade-outs might be 9 too many...)
  • Both consistencies or inconsistencies in how you apply motion across the experience.
All of these things are a big help for being more purposeful in your animation efforts moving forward.

Now on to this week’s links and resources!

- Val
(@vlh)


 

Tools, learning, and inspiration!
Dark Sky loading to temperature


UI Animation of the week: Dark Sky

Dark Sky’s pulsing loader turns into the temperature display once your forecast data has loaded. It’s a perfect pairing of animation that gets your attention and the information you most want to see. Your gaze is already focused on the black circle while you’re waiting for the app to load, and conveniently it transitions into what is likely the most important bit of weather data for most users. Well played!
 



Inspiration


Spotify's love note playlist #webanimation #dzy
There’s some lovely fluid motion throughout this quiz along with some creative animated interactions. I love how the wave concept plays through the motion, the typography, and the graphic elements. If there’s a place to be playful with motion, a quiz to create an anagram love note playlist is certainly the place. (I am a little worried that I got a track from Toto in mine though.)

A gallery of heart animations #microinteractions
A nice reminder that there isn’t just one single way to do even the simplest animations. There’s room for style and personality even in the smallest state changes.

Two plus one #motiondesign #characteranimation
The subtle movements of the large monster's horns and his eye movements speak volumes to set the mood in this short animated scene. 

Robotter love #svg #canvas 
What can I say? I have a soft spot for robots. And for interesting combinations of  canvas  and SVG. It's like a big web animation party in this pen. 
 

Learning

 
Getting started with WebGL part 2 #webgl #3d #tutorial
Start working with some WebGL 3D geometry to get some cool shapes in your 3d scene. If you missed part 1 be sure to read that one first. 

Trumpdonald deconstructed #JS #GSAP #tutorial
Petr deconstructs how that wacky Trump site was made by walking you through exactly how it was done. It's a really interesting breakdown and there were a lot more .pngs involved than I would have guessed!

Pixar in a box on Kahn Academy #animation #course
Looks like a really interesting course even if it’s aimed at kids. The section on animation curves covers a whole lot of useful info.

Use CSS variables in transitions #CSS
CSS variables are exciting. Using them in transitions is even more exciting. This opens up a lot of possibilities!

ShopTalk Show covers WAAPI #WAAPI #podcast
Everything about the Web Animation API covered by the fine folks of the ShopTalk show! So much to be learned from this episode!
 

Tools

 
Spirit JS #JS #library 
It’s still in beta and hasn’t been released yet, but the promise of a visual timeline and a focus on performance I know I’ll be keeping an eye on this one. The site is worth checking out for the cute ghost animations alone. (They’re all animated .gifs though if you were wondering) 

WAAPI spec updated #standards
More details have been added to the plans for the Web Animation API. Very exciting to see this keep moving forward! 
 
CSS Animation course with Val Head

Upcoming web animation workshops: 

Animating the User Experience
Triangle UXPA (Raleigh, NC) on April 1st 

Web Animation Techniques
Beyond Tellerrand on May 11th

Motion Prototyping Essentials
UX London on May 20th with Motion and Meaning co-host Cennydd Bowles 


 
Tweet
Forward

 
Follow me on Twitter for more web animation fun.
Copyright © 2016 UI Animation Newsletter, All rights reserved.


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list

Email Marketing Powered by Mailchimp