NOT AS IN RIDING A STORY LIKE A SKATEBOARD, BUT AS IN PLANNING OUT YOUR WORK STORYBOARDING.
-
Upload
philomena-wright -
Category
Documents
-
view
218 -
download
0
Transcript of NOT AS IN RIDING A STORY LIKE A SKATEBOARD, BUT AS IN PLANNING OUT YOUR WORK STORYBOARDING.
![Page 1: NOT AS IN RIDING A STORY LIKE A SKATEBOARD, BUT AS IN PLANNING OUT YOUR WORK STORYBOARDING.](https://reader030.fdocuments.net/reader030/viewer/2022033108/56649f295503460f94c42633/html5/thumbnails/1.jpg)
NOT AS IN RIDING A STORY LIKE A SKATEBOARD, BUT AS IN PLANNING OUT YOUR WORK
STORYBOARDING
![Page 2: NOT AS IN RIDING A STORY LIKE A SKATEBOARD, BUT AS IN PLANNING OUT YOUR WORK STORYBOARDING.](https://reader030.fdocuments.net/reader030/viewer/2022033108/56649f295503460f94c42633/html5/thumbnails/2.jpg)
What is a storyboard?
![Page 3: NOT AS IN RIDING A STORY LIKE A SKATEBOARD, BUT AS IN PLANNING OUT YOUR WORK STORYBOARDING.](https://reader030.fdocuments.net/reader030/viewer/2022033108/56649f295503460f94c42633/html5/thumbnails/3.jpg)
How Pixar Does Storyboards
Let’s look at how Pixar does storyboards. https://www.youtube.com/watch?v=7LKP
VAIcDXY
![Page 4: NOT AS IN RIDING A STORY LIKE A SKATEBOARD, BUT AS IN PLANNING OUT YOUR WORK STORYBOARDING.](https://reader030.fdocuments.net/reader030/viewer/2022033108/56649f295503460f94c42633/html5/thumbnails/4.jpg)
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
![Page 5: NOT AS IN RIDING A STORY LIKE A SKATEBOARD, BUT AS IN PLANNING OUT YOUR WORK STORYBOARDING.](https://reader030.fdocuments.net/reader030/viewer/2022033108/56649f295503460f94c42633/html5/thumbnails/5.jpg)
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…
![Page 6: NOT AS IN RIDING A STORY LIKE A SKATEBOARD, BUT AS IN PLANNING OUT YOUR WORK STORYBOARDING.](https://reader030.fdocuments.net/reader030/viewer/2022033108/56649f295503460f94c42633/html5/thumbnails/6.jpg)
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
![Page 7: NOT AS IN RIDING A STORY LIKE A SKATEBOARD, BUT AS IN PLANNING OUT YOUR WORK STORYBOARDING.](https://reader030.fdocuments.net/reader030/viewer/2022033108/56649f295503460f94c42633/html5/thumbnails/7.jpg)
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.
![Page 8: NOT AS IN RIDING A STORY LIKE A SKATEBOARD, BUT AS IN PLANNING OUT YOUR WORK STORYBOARDING.](https://reader030.fdocuments.net/reader030/viewer/2022033108/56649f295503460f94c42633/html5/thumbnails/8.jpg)
Types of Storyboards (Overall Structure)
Non-linear structure – Free navigation. Very fluid navigation, but can feel disorganized if not done right.
![Page 9: NOT AS IN RIDING A STORY LIKE A SKATEBOARD, BUT AS IN PLANNING OUT YOUR WORK STORYBOARDING.](https://reader030.fdocuments.net/reader030/viewer/2022033108/56649f295503460f94c42633/html5/thumbnails/9.jpg)
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.
![Page 10: NOT AS IN RIDING A STORY LIKE A SKATEBOARD, BUT AS IN PLANNING OUT YOUR WORK STORYBOARDING.](https://reader030.fdocuments.net/reader030/viewer/2022033108/56649f295503460f94c42633/html5/thumbnails/10.jpg)
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
![Page 11: NOT AS IN RIDING A STORY LIKE A SKATEBOARD, BUT AS IN PLANNING OUT YOUR WORK STORYBOARDING.](https://reader030.fdocuments.net/reader030/viewer/2022033108/56649f295503460f94c42633/html5/thumbnails/11.jpg)
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!
![Page 12: NOT AS IN RIDING A STORY LIKE A SKATEBOARD, BUT AS IN PLANNING OUT YOUR WORK STORYBOARDING.](https://reader030.fdocuments.net/reader030/viewer/2022033108/56649f295503460f94c42633/html5/thumbnails/12.jpg)
Share Storyboards
Constructive criticism! Praise + additional desires Think as you watch: can I make this web site
with this storyboard?
![Page 13: NOT AS IN RIDING A STORY LIKE A SKATEBOARD, BUT AS IN PLANNING OUT YOUR WORK STORYBOARDING.](https://reader030.fdocuments.net/reader030/viewer/2022033108/56649f295503460f94c42633/html5/thumbnails/13.jpg)
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.