The illusion of movement in graphic design

You may not be a renaissance master, but by employing certain simple design techniques you can evoke a physical and mental experience in your viewers by making your design move—even if that movement is only implied.

Keep reading for a tour of these effective techniques.

There are three key categories of movement in design:

Kinetic—how designs change their position in space and time

Rhythmic—they way lines, forms and colors guide the eye throughout a composition

Illusory motion (or motion illusion)—how elements interact with each other to imply motion

In this article, we’ll be focusing primarily on how to create illusory motion in design.

Take ‘em for a ride
—

Your brand may actually have something to do with physical, mental, or spiritual movement, or you may simply want to stand out from the designs of your competition. In either case, a design that employs illusory motion can give you the edge you’re looking for.

Using the illusion of motion, you can reach out and touch your customers through a phenomenon called kinesthetic empathy: a cognitive action where the observer knowingly or unknowingly reproduces or senses an action or motion they merely see. The feeling might be so powerful that the viewer is physically drawn forward, nudged backward, or even sways from side to side like a mini roller coaster ride! This instantly engages you in a visual relationship with your prospects.

Bear in mind that simplicity is key. Using more than one implied movement technique on a given composition can confuse the eye and even make viewers nauseous. Also, beware of using the “blurred outlines” method on typefaces. There’s a fine line between effectiveness and the kind of overkill which makes the font hard to read.

Color and shade combinations should also be handled with care. Hotter colors and shades tend to pop out, while cooler ones can recede into the background. Be aware of how this phenomenon can affect the perception of directional of movement within your design. Generally, this color matter applies more to a composition’s rhythm than illusory motion, but it can be one of those crossover issues, so make sure contrast isn’t working against the desired perceived movement of your design.

Here, we’ll detail 9 techniques which can be employed to generate the illusion of movement.

Let’s start moving!
—

Motion lines

Using the simple motion lines technique, an object that seems inert can quickly be imbued with a sense of movement. This technique is the easiest and most intuitive. Kids from one to ninety-two will often apply it automatically when drawing stick figures. A circle for the head, three lines for the body, a few horizontal lines behind and BOOM! Stick figure in action. Sometimes the simplest solution really is best.

A bunch of motion lines, and this sloth is bolting! Design by dalajlampa.

Two of these motion lines are broken, adding style. Design by Designerhere.

Medium disturbance

Moving through water creates wave motion or a wake. The same is true for burning objects or those moving through other kinds of matter. Demonstrating how an object disturbs its environment is another simple way to indicate movement.

This technique is really a more fleshed out version of motion lines. They both indicate the effect of an object moving through space, but whereas motion lines are more of a hint, medium disturbance adds more detail. The level of detail can vary from stylized to realism—the choice is yours. As you can see from the Orange Fury example, this orange is comin’ in hot!

Anticipated movement

This technique uses the suggestion of motion on a fixed two-dimensional surface. Its success relies on the observer’s previous exposure to a comparable scenario—like a leaping monkey. We’ve all seen a slo-mo video of a monkey leaping forward (if you haven’t, YouTube it. It’s fascinating). If we see a monkey leaning forward like it’s about to leap for a branch, we’ll automatically be triggered to turn to that video, now stored in our mind. This reaction plays out when we see a design of any being in anticipated movement. We can feel what the next movement would look like.

Multiple images
—

Start. Change. Stop. That’s a cycle of action. Multiple images is a structural technique depicting a cycle of action by presenting the subject in different poses which communicate a narrative to the observer. Nowadays digital filmmaking has become the norm, but all you dinosaurs out there will remember that back in the day, celluloid film operated on the same principle—putting multiple images together to produce the illusion of movement.

Transparency

In this technique forms of differing opacities are layered on top of one another to replicate movement. If the hummingbird’s wings in the Astoryo logo were opaque, it would simply seem like a mutant with four sets of wings. But, because the wings are transparent, we understand that the bird has one set of wings, it’s just that we’re seeing the process of its range of motion.

Transparency and color to create Illusion of motion. Design by
Aleksei.

Great use of transparency to create Illusory motion. Design by Lorenzo Rojas.

Blurred outlines

Objects that are moving quickly appear kind of blurry. This phenomenon causes us to associate blurry edges with motion. Hold a camera still, photograph a fast-moving object as it passes by the lens and you’ll get this effect without the use of graphic design. In these examples, the blurred outlines technique gives a sense of agility while also lending a ghostly effect.

Lines of force

These are typically invisible (but suggested) lines which guide the direction of motion with compelling visual emphasis to an implication of movement. In the ocean painting, notice how diagonal lines could be drawn starting from right to left in at least three places: at the shoreline, where the white frothy water turns into the wave and at the crest of the wave. These lines converge as they move left toward the vanishing point, where they crash into a symphony of horizontal, vertical and diagonal lines, creating a sensation of turbulent movement.

Here, the typically invisible lines of force are made visible. By Fafahrd Deustua.

Optical movement

This one crosses over into the rhythm category, but it also creates an illusion of motion, so it’s on our list. Curved shapes tend to direct the eye in circles around a composition. This is known as optical movement and enables the viewer to dynamically perceive the various parts of the whole piece. Follow the path of heat, and get lost in the circles of this badass hairdresser’s mane. Wait a minute—they’re roses!

Optical illusion

We’ve saved the most dramatic one for last—the snake illusion. Gaze at it for long enough, and it starts moving. The operating principle here is called apparent motion. It happens because there’s so much geometric repetition and other data impacting varying portions of our retina all at once. This mother-lode of details is forwarded to our visual cortex instantly, and is a total head-scratcher for the mind which is fooled into believing there’s movement.

Move it
—

Illusory motion is your way to engage in a physical and mental dialogue with your audience. Reach out and get their attention with designs that move them. You get extra credit points if the mood of the implied movement technique corresponds with your design and the story you’re trying to tell. Your customers might not consciously realize it, but they’ll feel the authenticity of your work if your elements are in alignment.

Now that you know a bunch of different ways to create the illusion of movement in design, it’s time to nail down which technique makes the most sense for you and moves your audience.