NOT AS IN RIDING A STORY LIKE A SKATEBOARD, BUT AS IN PLANNING OUT YOUR WORK

STORYBOARDING

What is a storyboard?

How Pixar Does Storyboards

Let’s look at how Pixar does storyboards. https://www.youtube.com/watch?v=7LKP

VAIcDXY

The Overall Layout

First, we must figure out how your site will flow.

In your groups, work together to create a Navigation Map of your site.

This is the overall view of your site that shows the progressions users take to get from one page to another.

But first…. Home Page

About Me M81 Catalog

Pop-Up

Yes, and…

What does it mean to be constructive with our feedback and not destructive?

You are coming up with ideas – there is more than one way to do something!

Reserve judgment. Model with the Yes, and…

Getting Started with Your Map

Step 1: Draw a square for the home page. Step 2: Think of a page that you can click

something on the home page to get to (About Me, Contacts, Photos, etc)

Step 3: Draw an arrow from the home page to the new page.

Step 4: Write what type of transition it is.Step 5: Repeat the above steps for all pages, not

just the home page. Think about what pages lead where.

Home Page

My Pets

Pop-Up

Types of Storyboards (Overall Structure)

Linear Structure – One page to the next in one order.

Hierarchical Structure – Looks like a tree with branches. Pages break down into more specific pages the lower in the branch you go.

Types of Storyboards (Overall Structure)

Non-linear structure – Free navigation. Very fluid navigation, but can feel disorganized if not done right.

Types of Storyboards (Overall Structure)

Composite structure – A mixture of linear and hierarchical. Some parts are linear, others are hierarchical depending on the site’s logic.

Detailed Storyboard Elements

Compare the storyboard art to the “final” animation.

Are they similar? How much so? What level of detail is in the storyboard

pictures?

https://www.youtube.com/watch?v=lHr-dvYxP1I

Make Your Storyboards!

Start with the basic layout: Where is the navigation bar?Where is the main content?Fill in the details: What items are on the navigation bar?What main content is this page showing?Describe the colors of the page!If someone took your storyboard, they should

be able to create the site.

Write

note

s on

th

e sid

e m

arg

ins!

Share Storyboards

Constructive criticism! Praise + additional desires Think as you watch: can I make this web site

with this storyboard?

POMS

Point of Most Significance On a half sheet, write down what the most

significant thing you learned about in the last two days.

It can be related to the concept of storyboards as a whole and how it helps with organization…

Or it can be something about storyboarding techniques (“Linear vs. hierarchical…”)

Turn this in before leaving the class.