<?xml version="1.0" encoding="utf-8"?>

Add movement without animation

Add movement without animation Bad Practice
Add movement without animation Best Practice

Animation is a great tool to enhance interactivity and make your designs more impactful, dynamic, and alive. However, not everyone has the time and budget to animate their designs.

What if we told you that you could create motion in design without animation? It's possible to trick the viewer's eye into believing they see movement when, in reality, they don't.

Adding motion lines behind a design element is one of the most common visual cues to imply movement. At the same time, 3D shapes add depth, making the UI look more dynamic.

Other ways of adding motion to static designs include:

  • creating speed lines
  • depicting motion in the matter (e.g. ripples in the water from a bird water-landing)
  • overlapping layers of various transparencies
  • employing the “freeze-frame” effect (e.g. a bouncing ball suspended in mid-air)
  • adding motion blur
  • and using optical illusions[1]
Improve your UX & Product skills with interactive courses that actually work