Skip to content

Web Motion Studies: Interface Motion Design Frames

By · · Web
Web 2018
Web Motion Studies: Interface Motion Design Frames
by Heebok Lee

Web motion has a hard ceiling that broadcast never faces: it has to ship as code and run on someone's phone. Heebok Lee's studies live inside that limit. Micro-interactions, scroll-driven sequences, and product animation are all built to survive the trip from timeline to browser without turning into a bloated video.

The After Effects and Lottie pairing is the whole story. Lottie exports vector animation as lightweight JSON, so a designed motion plays back crisp at any resolution and weighs almost nothing. That constraint shapes the craft. You can't hide behind heavy raster effects or motion blur, so timing and easing have to carry the appeal on their own. Lee's frames read as someone who designs to the export, not around it.

For a learner crossing into product work, this is the reference to sit with. Ask early: will this animation Lottie cleanly, or am I making something only a video file can hold? The best interface motion feels effortless precisely because it respects the medium's budget. Restraint here is engineering, not just taste.

Production notes

This frame comes from a web and interface study, where motion stays legible at small sizes and short durations. Heebok Lee produced it in 2018, and the styleframe records the look decisions made before a single second of animation existed.

It was built using After Effects for compositing and animation timing and Lottie for lightweight web playback. That toolset is what gives the motion design its specific weight, from how light falls to how the type settles into the frame.

Follow the attribution link above to see this work in its original context on Heebok Lee's own portfolio.

Look at how the motion is engineered to stay readable inside a loop only a few seconds long.

Attribution: Original work by Heebok Lee (2018). Featured in the Art of Styleframe showcase for its motion design craft; all rights remain with the designer.

Original source: https://www.behance.net/heebok