Creating Your First Storyboard

Designing with Storyboards

Teaser

At the end of this topic you will have a storyboard telling the story of how a person using a phone app to find a movie.

What you need

To start, you need a couple of screens in a project. For a walkthrough on how to create a screen, see Creating Your First Screen. To follow this example, you can use the FindFlix project sample, available from the Workspaces tab in the Application Menu.

In Brief

These are the main steps of the procedure:

  1. Creating a new storyboard.
  2. Adding content to the first step.
  3. Adding more steps.
  4. Adding a screen to a scene placeholder.
  5. Saving your storyboard.

Step by step

(a-1) 1. Create a new storyboard.

In the Project tab, click on the + icon and then select the Storyboard option.

A new storyboard is created, containing a single empty step.

(a-2) 2. Add content to the first step.

Storyboards are made up of steps with a box to hold a picture, screen, or both, and some text.

  1. Type a summary for your first storyboard step.

    Tom calls his friend.

  2. For writing more details, simply press Enter and type below the summary.

    They haven't seen each other in a while and he suggests they should get together.

  3. Add content to the box.

    For box content, you can use a screen, an image from your computer, or a scene.

    Select a scene from the Scenes tab in the Toolbox and drag it onto the box.

    Now you have a step with a scene and narrative beneath it.

(a-3) 3. Add more steps.

  1. Hover the mouse cursor over the step. The context menu appears.

  1. Click the arrow to add the next step. You can drag it if you want to specifically position the new step.

When a step is selected, you can also use the Tab key to create a new frame.

You can continue adding steps by using the Tab key and writing the narrative below them. Once you have all the steps for your story, you can add the images.

These are the remaining frames in our example:

Jane picks up the phone. She feels like going to the movies.

Jane opens the FindFlix phone app. She sees options for box office and top rated movies.

Jane goes to the top rated section. She finds the perfect movie.

(a-4) 4. Add a screen to a scene placeholder.

The third step in the example has a scene with a scene placeholder. A scene placeholder is a part of the scene where you can add a screen. This enables you to include a screen showing an image of the actual application prototype.

  1. Go to the Scenes tab in the Toolbox.

  2. Select the scene with a scene placeholder and drag it onto the box.

  3. Go to the Screens tab in the Toolbox.

  4. Select the screen and drag it onto the scene placeholder.

    The image automatically adjusts to the hotspot.

The screens available in the Screens tab in the Toolbox are the ones in the current project.

(a-5) 5. Save your storyboard.

  1. Right-click the Storyboard tab.

    The context menu appears.

  2. Select the Save option.

    The Save dialog appears.

  3. Click the Save button.

    You can choose to change the name of the storyboard or the project it is in at this point.

Learn More

Here are some suggested topics: