Storyboards & Flowcharts

C I S 6 7Fo u nd ati o n s fo r C re ati n g We b Pa ge s

Professor Al Fichera

Storyboards & Flowcharts

Rev. August 25, 2010.

Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

A Cart Without a HorseA presentation without a storyboard is like a cart without a

horse. You have no idea which direction whomsoever is going to

pull the cart.

August 27, 20102


Storyboard, a Film ConceptStoryboarding a borrowed concept from filmmaking.Scenes or Web pages are placed in the order in which they

will occur.Storyboarding provides an overall plan for the film and/or

Web site.

August 27, 20103


The Cart Doesn't Hold It AllDon't put everything that's going to be a part of your

finished presentation into your storyboard.The storyboard is an intermediate stage.It's a link to preserve your ideas for use in the actual

finished product.

August 27, 20104


Storyboard Text Suggests IdeasIf the text is too long for the Storyboard, put in the

beginning lines to suggest which text you would be using on the page.

August 27, 20105


Storyboarding Refines IdeasStoryboarding is never the beginning of any creative

project, because you cannot get to this stage unless your concept and vision are completely clear.

Storyboarding is an element to capture and refine ideas, not to create them.

August 27, 20106


Every Topic Has a PageThe storyboarding concept works well for developing a

Web site by providing a clear outline.

August 27, 20107


Every Topic Has a PageA good storyboard will have each topic a separate page.Each topic broken down to its lowest level.Include detailed primary links between the internal and

external pages.

August 27, 20108


Every Topic Has a PageA good Storyboard provides the visual organization (site-

structure) for all pages within the entire Site. In other words, It clearly details each page's content and provides a

map showing how individual pages fit into the whole.

August 27, 20109


Storyboards Can Be SimpleThe actual storyboard can be as simple as a sheet of paper

that represents each page.

August 27, 201010


Storyboards Can Be SimpleEach sheet has a detailed list of topics, or content

descriptions.Like a menu.

August 27, 201011


Storyboards Can Be SimpleWhen possible, include the graphics that will be used on

each topic page.Introduce the color palette to be used. Show the Font Faces to be used.

August 27, 201012


Storyboards Can Be SimpleChoose a graphic metaphor that best complements your

message. A child's site could use a childlike font .

A teenager's site could use hip contemporary colors and graphics.

A photographer might choose to have a filmstrip which opens to a full scale image when clicked.

August 27, 201013


Three Main Storyboard PartsA well done web site storyboard has three parts:a quick sketch of the site's structure a detailed structural outline a detailed sketch of each page

August 27, 201014


Quick Sketch of It's StructureThis site for the (fictional) Acme Company has a total of

seven (7) pages.

August 27, 201015


A Detailed Structural Outline

The URL of each page is listed in an organized formatwww.acme.com

www.acme.com/serviceswww.acme.com/services/lawnwww.acme.com/services/sheepwww.acme.com/services/woolwww.acme.com/clientswww.acme.com/personnel

August 27, 201016


Detailed Sketch of Each PageEach page is sketched in detail (by hand or with a page

layout program of your choice) showing placement of all… Text

Graphics

Hyperlinks.

August 27, 201017


Sample Storyboard Layout

August 27, 201018


Online Storyboarding ExamplesA Hand-Drawn Storyboard

http://www.uncc.edu/webcourse/sb/sample3.htmA Graphic Storyboard

http://www.uncc.edu/webcourse/sb/sample2.htmGerald Forton's Storyboarding Web site

http://www.home.earthlink.net/~movieboards/fortonboard1.html

August 27, 201019

http://www.uncc.edu/webcourse/sb/sample3.htm

http://www.uncc.edu/webcourse/sb/sample2.htm




Using Web Site MockupsOn the next several slides you will see examples of Mock-

Ups that can be purchased from http://www.smartdraw.com/resources/examples/software/websiteinterfaces.htm

Building your own Mock-Ups and reproducing them as single page Storyboards could speed up the whole process.

August 27, 201020

http://www.smartdraw.com/resources/examples/software/websiteinterfaces.htm



Web Site Mock-Ups

August 27, 201021


Web Site Mock-Ups

August 27, 201022


Web Site Mock-Ups

August 27, 201023


Web Site Mock-Ups

August 27, 201024


Web Site Mock-Ups

August 27, 201025


Using Sitemaps for DirectionOn the next several slides are Sitemaps examples, some

can be purchased from:http://www.smartdraw.com/resources/examples/software/websiteinterfaces.htm

Microsoft Office can create these maps as well as HTML production software, such as, Adobe Dreamweaver and MS FrontPage.

August 27, 201026




Web Sitemap Example

August 27, 201027


Web Sitemap Example

August 27, 201028


Web Sitemap Example

August 27, 201029


Web Sitemap Example

August 27, 201030


Web Sitemap Example

August 27, 201031


Web Sitemap Example

August 27, 201032


Web Sitemap Example

August 27, 201033


Web Sitemap Example

August 27, 201034


Web Sitemap Example

35 August 27, 2010


Web Sitemap Example

36 August 27, 2010


What Did You Learn?

August 27, 201037

Sorry for the graphics heavy presentation, but that’s what it’s all about here.

Did you get any new ideas after viewing?Did it clear up any misgivings you might have had?Having a clear roadmap of what is to be done and by

whom will certainly speed up the process of building a site.

Documents

Storyboards & Flowcharts