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.

Designers and developers often like still frames because they can load faster, are quick to look at and can be put together without sometimes expensive software or training.

Creating motion will add life to a project and can be as simple as composition, placement of frames, color or editing and effects.

Types of Motion

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.

Composition

The easiest way to create motion in a still image is to take a photo of something moving.

Create motion with directional cues – objects weighted to one part of the image, items with strong directional flow or pointing can accomplish this.

But photos are not the only images that can imply movement.

Art, graphics and even simple shapes can as well. These are actually the most common tools for creating a feeling of movement. Arrows or other elements that point are used in a variety of ways – from navigational elements to functional pieces of the design. The pencil pointing down on Lorenzo Verzini’s landing page is a great example; it is part of the image and encourages you to scroll. (That pencil is used to create a host of directional tips throughout the site.)

Color and shading can also affect how active something appears. Shading and tints can show motion, such as wind in the Aspect Photography photo. Varying between black and white and color images can also contribute to a feeling of movement.

Placement of Frames or Objects

You don’t need a photo to imply movement of direction. Stacking frames, objects or shapes can create motion as well. Typically these elements are placed in such as way as to create balance and harmony, but when grouped without balance, elements can feel loose, chaotic and like they might fall. This disturbing motion can also be accomplished by tilting objects or placing them in an order that is seemingly random.

Imbalance can further be created with varying sizes of frames, off-kilter alignments, or with harsh or dramatic color combinations.

Try combining a series of smaller shapes or objects with a larger one to create an almost elliptical effect, where the smaller objects seem to circle and frame the larger one.

Editing

Sometimes the most important element in creating motion happens in the editing process.

Dramatic cropping, such as unusual shapes, can contribute to a feeling of motion.

Using the rule of thirds to frame photos can also add more flow to an image. By placing the subject of an image in the far left or far right third of a photo, the eye is forced to move across the image to fully understand it. This incurred movement can make the image feel like it contains movement of its own.

Editing images can help you bring out certain parts of an image as well. In the Fatum image, the trail of water behind the surfer is emphasized (maybe more than the surfer himself) to show how fast and forceful the sport can be. By framing the objects in a photo in different ways, the designer can control where the user looks next. Are the subjects all looking in one direction? Either left or right? It is very likely that users will follow that same eye pattern.

When thinking about scrolling images and slideshows, consider how each image pairs with the one before and after it. Where is the action in the frame? Moving that action to different places in each image can create motion as well.

Effects

Three simple effects can really help add movement to more “flat” objects. Shadows, blur and depth immediate add a sense of direction.

Often these effects are used in combination with other “action” tools.

Shadows can look natural, such as long shadows to signify a fading sun, or small almost unnoticeable shadows that help lift an object off the background. The key to using shadows is to look natural. Shadows that are too dark or pronounced can create an almost unnerving effect.

A slightly blurred image can also look more active. Think of capturing someone running in a photo or video. Items should be recognizable through the blur and any action and blur should have the same directional pull to be most effective.

Finally you want to create depth. Action does not happen in the one-dimensional sphere. Objects should appear to be moving toward or away from you to have the most impact. Think about angels when creating objects or frames and remember to add shadows as necessary.

Text

One of the easiest ways to imply motion is to state it.

Pair images and words that carry the same action. Write copy that contains plenty of active verbs that create a sense of motion and action that users can relate to.

Using a combination of showing (with an image) and telling (with related words), you can create a distinct feeling or activity or call to action.

Conclusion

There are a variety of ways to create a sense and feel of motion in projects. Many of the most successful combine a variety of these tools.

Using motion and action will help you create a link between your project and the user. Just as people like to see other people, they also like to see life and action.

Make your projects come alive using techniques that imply and showcase motion, even if nothing on your site actually moves.