Tools of the Trade: Storyboards

Google Storyboard

Storyboards are a great tool primarily used by filmmakers. Storyboards have been adopted by other industries because of the benefits they provide. They provide a great way to plan out visual elements of your project before you commit to the heavy lifting. You can prove out an idea without writing any code or getting something on film. Think of storyboards as comics that highlight important scenes in your project.

Here’s a great example of storyboards used to make a scene in Pixar’s Monsters Inc. Notice how the storyboards tell the story without filling in all the details. Try watching the video with the sound muted. Do the storyboards tell you what’s happening in the story?

Google Storyboard

How can you use storyboards as a software developer? The exact same way that filmmakers use them. Pick key scenes in your UI and put them on paper. Here is an example of the auto complete used on Google’s home page. The first image is the home page without any typing. The second image shows what happens after a user has typed in ”Story” to the search field. I like to use storyboards that have extra space for notes. Notes are important because you can create a list of stories associated with your scene.  What happens when a user presses the escape key after they enter text? What happens when the user presses tab? You can answer all these questions in the notes underneath your storyboard image. You probably don’t want to create a storyboard for each and every case because that might be too granular. A quick note should do just fine.

Interested in making a few storyboards for your project? Check out the Paper Browser templates made by Rain Creative Lab.