Publishers of technology books, eBooks, and videos for creative people

Home > Articles

Writing for the Web: Adding Motion

  • Print
  • + Share This
This chapter examines the various media you might choose to show graphics in motion, such as video, animation, photo slide shows, and simulations. It also provides an overview and explains the ways to get started with adding moving images to your Web content.
This chapter is from the book

There’s no question about it: Moving images dazzle and mesmerize. Cinema has been around for over 100 years, and audiences are still willing to sit in dark rooms among strangers to watch the big screen. Video, even on the teeny screen of a mobile device, can hypnotize viewers. There is magic in telling stories with visuals in motion. If you get it right, there’s no better way to draw in your readers and keep their attention.

This chapter examines the various media you might choose to show graphics in motion, such as video, animation, photo slide shows, and simulations. It also provides an overview and explains the ways to get started with adding moving images to your Web content. The topics in this chapter include:

  • Deciding to use graphics in motion
  • Brainstorming
  • Developing a storyboard
  • Writing scripts
  • Using guidelines to produce video and animation

If you find your passions ignited about animation, video, educational technology, and so on, and you want to deepen your knowledge, see for a list of schools, Web sites, and books.

Getting Started with Motion

The good news about designing content for the Web is that you’re not limited to one media or another. You can incorporate video, animation, photo slide shows, illustrations, text, music, audio narration, and so on. You just have to make sure your story meets your readers’ expectations and needs. Think of your reader as Goldilocks. The story should be just right in terms of timing, pacing, style, length, and complexity. Plus it needs to have clarity, spark, and meaning.

Deciding to Use Moving Graphics

The first question you need to ask yourself is whether or not it’s a good idea to add moving graphics or animated text to your Web story. You don’t want to annoy the reader with gratuitous noise or motion, but there are definite cases in which moving pictures can get readers excited, show a message, or instruct much better than text, still images, or sound.

Your decision to incorporate moving graphics into your story might be easier when you know the types of moving graphics available to you and how to use them successfully.

Types of Moving Graphics

Technology, design, and computer terminology are in a constant state of flux, which blurs the lines between the different types of media. Nonetheless, the following list attempts to briefly describe some types of moving graphics and how you might best use each:

  • Video shows real-life, moving images, instantly immersing readers in place and time. Video is perfect for promoting products and messages, capturing personal histories, presenting interviews, and providing instructions.
  • Animation takes individual pictures of characters or objects and shows them in continuous movement. The kid in all of us loves cartoons. Animations work well for short ads, product demos, Web introductions, and games. For instructions on complicated activities, such as tying knots, dance steps, or juggling, animation works best.
  • Motion graphics are created by designers who work with software applications to make three-dimensional logos spin across the screen, film titles dance and weave, and images fly across the screen and then evaporate.
  • Software simulation models the experience of using a software program by showing the software screens and mouse movements for typical tasks. Simulation is ideal for promoting software packages and for instruction on tools within the software application. For example, simulation works well if you need to show readers how to use the Bezier Pen tool in a design application. Also, the simulation needs to be paced just right. If it’s too slow, readers will get distracted. If it’s too fast, readers will get frustrated.
  • Games provide entertainment and can be educational. Make sure your audience thinks the game is as fun as you do. As with all Web content, your audience is key. Games for the corporate environment are nothing like games you play at home.
  • Photo slide shows show people best. Still pictures can provide a more emotional experience than video, especially when combined with Burns effects (panning across the image and zooming in or out).
  • Digital storytelling works well for personal stories and educational purposes. You can find wonderful examples and more information at

But before you can narrow down the type of media you’ll use, you’ll need to come up with an idea to set in motion. Brainstorming is an excellent way to unearth ideas, and writing down your ideas can help you flesh them out.

Capturing an Idea for Video or Animation

Where do you get your ideas? That’s a question all authors are asked and asked often. It can be a difficult question to answer, because ideas can come from anywhere and anything. The more you think and talk about an idea, the more it morphs into something else. You’re driving in your car, listening to a favorite radio station and boom! A fantastic idea hits you. Or you’re talking with a friend and suddenly you stop listening, because something wonderful is percolating in your head. You don’t want to be rude, so you share that idea with your friend. The friend catches on and takes the idea a step in another direction. In a heartbeat, you’re collaborating. It’s a fascinating process when you’re just letting the thoughts gallop around in your head. However, trying to tie down ideas for a creative project can be exasperating.

  • Ever tried. Ever failed. No matter. Try Again. Fail again. Fail better.
  • —Samuel Beckett

You are the only one who knows what works best to capture an idea and begin the design process. But here are some ideas for brainstorming that have worked well for others:

  • Sticky notes. Jot down anything and everything that comes to mind on sticky notes (Figure 4.1). Place the notes on a large surface, such as a wall or tabletop. Move the notes around as you continue to add notes.

    Figure 4.1

    Figure 4.1 Use sticky notes to collect and sort ideas.

  • 3 × 5 cards. Index cards work the same as sticky notes but give you the added flexibility of designing on the go. Keep them in your back pocket while you’re out taking a walk.
  • Lists. Make lists of whatever you think of that relates to one or more ideas.
  • An outline. If you like working with outlines, this is probably the best way for you to begin.
  • Napkins. Seriously, napkins work as well as sticky notes and can be fun for collaborations.

When you finally have an idea that’s nearly hatched, you can begin developing it along a timeline. That’s where a storyboard helps.

  • + Share This
  • 🔖 Save To Your Account