Storyboarding Matt Franks Professor, Austin Center for Design

Scenarios - Recap Creating a written story that explains how a person will use a product, service, or system to achieve a goal.

A Good Scenario

1.  Acts as a bridge between an initial design idea or problem and a solution

2.  Advances the fidelity of an idea 3.  Stands on its own, without explanation 4.  Does not prescribe interface elements in any

great detail 5.  Includes a rich description of a person 6.  Includes a rich description of a goal

7.  Is credible

Writing Scenarios 1.  Identify the people involved 2.  Identify the starting state/context 3.  List the goals a user may have, as they pertain

to your product or service 4.  Prioritize the goals based on your

understanding of your users 5.  Craft stories

Storyboards Sketching a comic-book style visualization of your written narrative, to illustrate scenes and screens.

Storyboards Sketching a comic-book style visualization of your written narrative, to illustrate scenes and screens.

Storyboards Sketching a comic-book style visualization of your written narrative, to illustrate scenes and screens. You are not creating a detailed service or product yet. Think of general layout, navigation elements and core concepts. The goal is to capture relevant information and remove extraneous information.

Storyboards Sketching a comic-book style visualization of your written narrative, to illustrate scenes and screens. Why is it important to put people in their physical context? •  Cultural / interpersonal relationships •  Workflow or information handoffs •  Sequence of use •  Evolution of your product over time

Storyboards Sketching a comic-book style visualization of your written narrative, to illustrate scenes and screens. A Good Storyboard

1.  Emphasizes screens over scenes 2.  Advances the fidelity of an idea 3.  Stands on its own, without explanation 4.  Dedicates one panel to one idea, and uses panels generously

8

9

Melvin is packing for vacation; he’s going to Mardi Gras, where he’s planning on meeting some friends.

As they wander the streets, they keep bumping into new and interesting people – and because they have our software installed, they are able to both find new parties, and log the experiences they have easily and seamlessly.

When Melvin’s having a particularly interesting time at a party, he grabs his phone and points it at the crowd. A number of the people at the event start to crowd around..

Sketching Storyboards

10

1.  Using your scenario as a starting point, divide the story up into individual

sentences & draw empty boxes (approximately 4” x 4”) for each sentence in

the story. Number each box (1, 2, 3, etc..)

Note: For most people, the thought of drawing is terrifying. This is OK – it takes a lot of practice and iteration to be proficient at visualizing your ideas. Consider starting the creation of your storyboard on a whiteboard where marks are easily erased and feel “less permanent.”

Sketching Storyboards

11

Example: 1.  Bill dreams of sending his favorite toy, a LEGO space explorer, into space. 2.  Bill describes his dream, while his dad thinks of ways it might actually happen 3.  Bill and his dad build a weather balloon to carry the explorer into space. An onboard camera

will catch all of the action. 4.  Bill and his dad launch the LEGO space explorer on the home-made space craft. They wave

goodbye as the explorer rises into the sky. 5.  The LEGO Explorer reaches the edge of space.

Sketching Storyboards

12

2.  Directly below each box, write the sentence from your scenario.

•  Each sentence should encapsulate a single idea or step in the story.

•  Sometimes you can combine sentences into a single frame by splitting the

frame into two parts (this is useful for drawing rapid sequences, or when two

sentences describe emotional states of the same step in the story).

Sketching Storyboards

13

Bill dreams of sending his favorite toy, a LEGO space explorer, into space.

Example:

Bill describes his dream, while his dad thinks of ways it might actually happen

Bill and his dad build a weather balloon to carry the explorer into space. An onboard camera will catch all of the action.

Bill and his dad launch the LEGO space explorer on their home-made space craft. They wave goodbye as the explorer rises into the sky.

The LEGO Explorer reaches the edge of space.

Sketching Storyboards

14

3.  Think about each scene or screen you want to create. Is it a close-up, zoomed

out, a landscape shot? How much of the scene is required to tell that part of

the story?

•  If it’s a close up shot – write “CU” and then the character name

•  Over the shoulder (good for showing a mobile device being used – “OTS”

•  Extreme close up (good for showing product details) – “ECU”

•  Long shot (good for showing a big space / lots of people) – “LS”

•  Medium shot (good for showing people from the waist up) – “MS”

Sketching Storyboards

15

Bill dreams of sending his favorite toy, a LEGO space explorer, into space.

Example:

Bill describes his dream, while his dad thinks of ways it might actually happen

Bill and his dad build a weather balloon to carry the explorer into space. An onboard camera will catch all of the action.

Bill and his dad launch the LEGO space explorer on their home-made space craft. They wave goodbye as the explorer rises into the sky.

The LEGO Explorer reaches the edge of space.

CU - Explorer

MS - Bill Dreaming MS – Bill & Dad ECU – Building ECU of Explorer over a LS of Bill and dad

ECU of Explorer over a LS of Earth

Sketching Storyboards

16

4.  Inside of each box, sketch what happens in the scenario.

When you sketch people, emphasize their hands and eyes.

When you sketch human touchpoints, show both humans in the frame at once.

When you sketch digital products, first introduce the product in context (in

someone’s hand), and then sketch what the user actually sees on the screen.

Note: Start with stick figures – or crude outlines of each element. After you get all of the elements in the frame, come back and add in more detail. Good sketches don’t happen the first time. They always have multiple iterations – sketch lightly, then refine (see next slide).

Sketching Storyboards

17

Bill dreams of sending his favorite toy, a LEGO space explorer, into space.

Example:

Bill describes his dream, while his dad thinks of ways it might actually happen

Bill and his dad build a weather balloon to carry the explorer into space. An onboard camera will catch all of the action.

Bill and his dad launch the LEGO space explorer on their home-made space craft. They wave goodbye as the explorer rises into the sky.

The LEGO Explorer reaches the edge of space.

Sketching Storyboards

18

5.  Complete a rough version of your storyboard, share, & get feedback.

•  Find someone who has not viewed this storyboard before. Give them

the storyboard and have them read the story back to you.

•  You should immediately see where the story needs additional

refinement. Do another version of your storyboard and share it

again. Repeat this process until your storyboard is clear.

Sketching Storyboards

19

Sketching Storyboards

20

6.  Optional: Refine the storyb0ard

After getting the elements in the frame and successfully having someone

comprehend your story, come back and clean up the details. Tips:

•  Use thicker line weights at the bottom of elements to add depth

•  Put a little more into the focal point of the cell (Screen or scene)

•  Clean up the boxes of each cell – consider stacking them like a comic

•  Add expressive lines to indicate emotion

•  Add arrows to indicate direction

Sketching Storyboards

21

Bill dreams of sending his favorite toy, a LEGO space explorer, into space.

Example:

Bill describes his dream, while his dad thinks of ways it might actually happen

Bill and his dad build a weather balloon to carry the explorer into space. An onboard camera will catch all of the action.

Bill and his dad launch the LEGO space explorer on their home-made space craft. They wave goodbye as the explorer rises into the sky.

The LEGO Explorer reaches the edge of space.

Sketching Storyboards

22

Bill dreams of sending his favorite toy, a LEGO space explorer, into space.

Bill describes his dream, while his dad thinks of ways it might actually happen

Bill and his dad build a weather balloon to carry the explorer into space. An onboard camera will catch all of the action.

Bill and his dad launch the LEGO space explorer on their home-made space craft. They wave goodbye as the explorer rises into the sky.

The LEGO Explorer reaches the edge of space.

Example:

Sketching Storyboards

23

7.   Optional: Enhance with selective use of color or gradients

Use color only to make a point – to emphasize a particular element in each

frame (such as a device or handoff of information), or to differentiate characters

from one another. For example (see next slide).

Sketching Storyboards

24

Bill dreams of sending his favorite toy, a LEGO space explorer, into space.

Bill describes his dream, while his dad thinks of ways it might actually happen

Bill and his dad build a weather balloon to carry the explorer into space. An onboard camera will catch all of the action.

Bill and his dad launch the LEGO space explorer on their home-made space craft. They wave goodbye as the explorer rises into the sky.

The LEGO Explorer reaches the edge of space.

Sketching Storyboards

25

8.  Optional: Enhance with washes of color, gradients & cell layouts

Bringing a storyboard to this level of fidelity takes a lot of time, and is no more

effective in communicating the story than its line drawing counter part.

Consider using this technique only when high fidelity is important (client

meetings, board meetings, etc..)

Using gradients of grey, browns, or blues in your frames; try and fill the frame

with color without losing the contrast of your focal color.

Washes and gradients should only be used to “fill the frame”, creating contrast

between the fill color and the focal color. For example (see next slide).

Activity: As an individual, create a storyboard for the scenario your group created earlier today. Think scenes and screens! Before we begin, let’s practice sketching! 1.  Divide your scenario up into individual sentences

•  Create and number a box for each sentence •  Directly below each box, write the corresponding sentence

2.  Indicate what type of “shot” you are trying to create inside each box 3.  Sketch what happens inside of each box 4.  Complete a rough version of your storyboard, share, and get feedback 5.  Use overlays to refine your storyboard.

Matt Franks Professor, Austin Center for Design Mfranks@ac4d.com

Download our free book, Wicked Problems: Problems Worth Solving, at http://www.wickedproblems.com