Studying UI Animation

I analyzed and recreated a flow from the Nintendo Switch Album app. My goals were twofold:

  1. Better understand UI animation principles and techniques

  2. Add an animation prototyping app to my design toolkit

Timeframe
December 2018 – February 2019

Tools
Principle
Sketch
Google Sheets

Reference Materials
Designing Interface Animation

 
UI Animation Study.jpg
 

Deconstruct

I recorded the Album’s Delete flow, since it uses a variety of tasteful, well-choreographed animations that can work well in native and mobile apps.

The Delete flow. Not having a video capture card, I recorded this on my iPhone.

 

Next, I stepped through the video frame-by-frame, recording every animation into a spreadsheet.

 
Animated properties in the last step of the  Delete  flow.  See the full spreadsheet in Google Sheets .

Animated properties in the last step of the Delete flow. See the full spreadsheet in Google Sheets.

 

Reconstruct

With animation timings and video in hand, I set out to recreate the Delete flow with Sketch and Principle.

The first step was redlining key video frames to measure each UI element. Since I was focused on animation, I getting accurate proportions was more important than pixel-perfect matches.

 
Redlines.jpg
 

I knew I’d want to leverage Principle Components, so I grouped and named my Sketch artboards accordingly.

 
The Album’s elements in Sketch, in static form.

The Album’s elements in Sketch, in static form.

 

I imported the Sketch artboards as separate Principle Components, where I defined animations and touch event handlers.

 
Principle Sidebar Closeup.png
 

The result was a living prototype that looked and felt like the original. (Mobile viewers: it’s a 9MB video, so mind your data!)

 

The finished prototype, recorded in and exported from Principle.

 

Analyze (coming soon)

Check back in August to see the full case study! I’ll share the four most interesting moments with you, highlighting the animations and choreography with the biggest impact.

 

Want to see more of my work?