Sitemap
Modus

A former Medium publication about UX/UI design. Currently inactive and not taking submissions.

Follow publication

The Art and Science of Designing With Motion

5 min readAug 16, 2019

--

Illustration: thirteen23

First, think like an engineer

The science: Learning how to physically build motion

Showing an easing curve next to its visible motion (Source: Google Material)
Each of these examples have the same starting and ending values, but because their interpolation is different, the motion between those points differs. (Source: Jeffrey Chou)
See those dots at the bottom? Key frame markers! Each of those key frames marks a point in time where the object has a specific set of values. (Source: Nicolas Roard)
And if you’re using After Effects, get used to these bad boys, which represent (A) linear, (B) hold, (C) auto bezier, and (D) easy-ease key frames.
Source: UXinMotion.net

Then think like a designer

The art: Understanding motion qualities, principles, and best practices

How important is this interaction?

How can this interaction express the brand language?

How can motion help support the user experience?

And, finally, how are all the elements choreographed together?

Finally, observe and learn

--

--

Modus
Modus

Published in Modus

A former Medium publication about UX/UI design. Currently inactive and not taking submissions.

Responses (1)