Studying UI Animation
I analyzed and recreated a flow from the Nintendo Switch Album app. My goals were twofold:
Better understand UI animation principles and techniques
Add an animation prototyping app to my design toolkit
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.
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.
I knew I’d want to leverage Principle Components, so I grouped and named my Sketch artboards accordingly.
I imported the Sketch artboards as separate Principle Components, where I defined animations and touch event handlers.
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.