1. STORYBOARDING
Not as in riding a story like a skateboard, but as in planning out your work

2. What is a storyboard?

3. How Pixar Does Storyboards
Let’s look at how Pixar does storyboards.

4. 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
Pop-Up
About Me
M81 Catalog

5. 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…

6. 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
Pop-Up
My Pets

7. 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.

8. Types of Storyboards (Overall Structure)
Non-linear structure – Free navigation. Very fluid navigation, but can feel disorganized if not done right.

9. 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.

10. 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?

11. Make Your Storyboards! Write notes on the side margins!
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 notes on the side margins!

12. Share Storyboards Constructive criticism! Praise + additional desires
Think as you watch: can I make this web site with this storyboard?

13. 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.