Illinois Online Network: Instructional Resources : Pointers and Clickers : Storyboards

Using Storyboards in Online Course Design
Virgil E. Varvel Jr.
2004

Example Storyboards

Below I have included two storyboard examples to help demonstrate the uses described in this article. I usually create my storyboards on paper for projects that I complete on my own, so I have had to convert these for Web purposes. I have added comments not present in the storyboard as brackets.

The first example is from a tutorial presented within a shockwave flash document.

Unit: WebCT Tutorial
Lesson: A - Instructions
Frame #: 001 of A [Rather than trying to keep track of all of the flow chart numbers, I simplify by just giving a number in reference to the lesson.]
Date: June 5, 2002

File Name: intro1.swf [Here the filename was very important because there were eventually several hundred filenames in the final production.]
Description: How does the tutorial work [In this storyboard, I gave a description, but I did not continue for the rest of the frames within this lesson in order to save precious time.]

Text Outline: This tutorial is presented in both audio and text. The text transcripts appear at the bottom of the movie window. When there is too much text for it all to fit within the trascript box, scroll arrows will appear to the bottom right. Press these to move through the text. If an arrow is missing, you are either at the top, bottom, or both of the text. [Normally I only put an outline in here, but since I was narrating this entire production, I included my entire text. This also helped to insure that I wasn't trying to say too much per slide.]

Instructions <title-red/bold>

[blank space]

[the organization of the following boxes was designed to allow arrows to their respective items not to intersect]

[red box was here with following text.]
Text transcripts will appear in this area.
[arrow to transcript box]

[red box here with following text]
Use these arrows to scroll through
the text transcripts.
[arrow to scroll bars]

[red box here with following text]
Click the arrow to continue
[arrow leading to button 4 which is forward button]
<note to self - Note choice of red. Red for descriptive elements and blue for interactive elements. This will continue throughout presentation.>

[Here were 4 nav circles. The following notes were present.]
<grey out 1-3><link 4 - 002> [002 refers to frame number]. Since no specific point within the page is linked, only the number is given.]

Transcript <black on yellow bkgd> [I also drew the scroll bars to the right of this box with a red divide line]

Rationale - begin with a description of what it is as well as how to navigate as that is the first action the user will need to take.

[no extra notes were needed.]

This example is a storyboard for this page. Although I didn't actually use it, it is presented for example and comparison purposes.

Unit: Storyboard Lesson: F - Examples Frame #: 001 of F Date: August 9, 2004	File Name: page6.asp	Text Outline: -Intro -Sample 1 (multimedia example) -Sample 2 (this page) -Nav links
Top of page will follow Pointer template ///pointer graphic////////// ////Home</default.asp> \| Index <../default.asp>///////////////////breadcrumbs Titles Example Storyboards Intro//////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////// Keep it short Example I - description Graphic - 95% wide <center> / keep as short as possible ////////////////////[I would have a graphical drawing here]/////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////// Example 2 - description Graphic - 95% wide <center> / keep as short as possible ////////////////////[I would have a graphical drawing here]/////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////// [blank space] Navigation Keep same scheme as before. <navtexts css>
Rationale - User will want to see the process in action.		Will use text instead of importing graphics to save development time.

Introduction
Why Use Storyboards
Creating Storyboards
Putting Storyboards into Practice
Simplified Storyboard Template
Example Storyboards
References

ION Home | Pointers and Clickers

University of Illinois

Online Courses | Institutes and Workshops | Instructional Resources | Initiatives | Institutional Partners Home | Calendar | Contact | Sitemap

Use of this site indicates you accept the Terms of Use and the Privacy Statement