Motion

Design one interface where motion does real work, not decoration. Pick a single screen or flow and define how elements enter, change, and leave as the user moves through it. The motion should help explain hierarchy, attention, and feedback.

Focus on a small set of moments: opening, selection, confirmation, and any loading or error state that belongs to the flow. Show what moves, what stays fixed, and what changes size, position, opacity, or emphasis. Keep the animation language consistent so the product feels like one system, not a collection of effects.

Document the motion rules in the mock itself: duration, easing, delay, and what triggers each transition. Include a reduced-motion version that keeps the same information structure and still makes the next step obvious.

Incorporating motion thoughtfully can turn static designs into captivating experiences. Remember, sometimes less is more—subtle animations often make the biggest impact!