Storyboards & Flowcharts

Storyboards & Flowcharts CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. August 25, 2010.

A Cart Without a Horse • A presentation without a storyboard is like a cart without a horse. • You have no idea which direction whomsoever is going to pull the cart. Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

Storyboard, a Film Concept • Storyboarding 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. Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

The Cart Doesn't Hold It All • Don'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. Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

Storyboard Text Suggests Ideas • If the text is too long for the Storyboard, put in the beginning lines to suggest which text you would be using on the page. Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

Storyboarding Refines Ideas • Storyboarding 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. Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

Every Topic Has a Page • The storyboarding concept works well for developing a Web site by providing a clear outline. Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

Every Topic Has a Page • A 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. Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

Every Topic Has a Page • A 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. Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

Storyboards Can Be Simple • The actual storyboard can be as simple as a sheet of paper that represents each page. Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

Storyboards Can Be Simple • Each sheet has a detailed list of topics, or content descriptions. • Like a menu. Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

Storyboards Can Be Simple • When 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. Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

Storyboards Can Be Simple • Choose 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. Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

Three Main Storyboard Parts • A 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 Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

Quick Sketch of It's Structure • This site for the (fictional) Acme Company has a total of seven (7) pages. Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

A Detailed Structural Outline • The URL of each page is listed in an organized format • www.acme.comwww.acme.com/serviceswww.acme.com/services/lawnwww.acme.com/services/sheepwww.acme.com/services/woolwww.acme.com/clientswww.acme.com/personnel Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

Detailed Sketch of Each Page • Each page is sketched in detail (by hand or with a page layout program of your choice) showing placement of all… • Text • Graphics • Hyperlinks. Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

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

Online Storyboarding Examples • A Hand-Drawn Storyboardhttp://www.uncc.edu/webcourse/sb/sample3.htm • A Graphic Storyboardhttp://www.uncc.edu/webcourse/sb/sample2.htm • Gerald Forton's Storyboarding Web sitehttp://www.home.earthlink.net/~movieboards/fortonboard1.html Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

Using Web Site Mockups • On 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. Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

Web Site Mock-Ups Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

Using Sitemaps for Direction • On 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. Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

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

What Did You Learn? • 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. Storyboards & Flowcharts by Professor Al Fichera http://profal2.com

Storyboards & Flowcharts