Techniques for Creating Motion in Web Design

Everyone wants to create a page that is active and engaging and one of the best tools to achieve those goals is through motion. With a few great ideas and handy tips, a designer can create a great feel and sense of motion without any video or animation. This type of creative display can be just as active and engaging as video or animated design concepts. That’s not to say that video and animation aren’t great tools. They are. But they are also not the only tools available to you.

Direction: Motion can be implied by direction. Arrows, a person looking a certain way or an image that showcases movement, all imply direction and can make a user feel the appropriate action.
Gravity: Use the planet’s natural pull to create vertical motion. Visuals with distinct vertical elements or direction can make you feel like the movement is going up and down. Think about how a person’s hair looks when they jump or how stars can “feel” weightless.
Balance: Objects, groups of frames or images that lack balance can feel like they are falling, creating a very specific type of motion.
Depth: Create “lift” and depth by adding shadows, lighting and other effects to elements. This depth can imply simple actions such as peeling a sticker, lifting a spoon or zipping a jacket.