Flowcharts and Storyboards:
The Pre-requisite Steps before Creating Websites
Introduction
The purpose of this lesson is to provide you with the skills to create flowcharts and storyboards.
The benefit of learning these skills is that you will produce visual representations of your
websites. It is important to see what a website looks like before writing the XHTML code or
using Dreamweaver because a website not only takes a lot of time to create, it requires many
resources such as information, images, links, and so forth. By detailing the front-end, you will
save time during the design and implementation stages. In the last lesson you learned how to
create job aids and complete usability tests. The skills you enhanced in that lesson such as
organizing content, creating visual appeal, and testing documents are useful in mapping out a
website and drawing its features.
Objectives
At the end of this lesson you will be able to:
• Define a flowchart;
• Name four reasons for creating a flowchart;
• Define a storyboard;
• Create a flowchart; and,
• Create a storyboard.
Outline
What is a Flowchart?
What is a Storyboard?
Create a Flowchart
Create a Storyboard
Summary
Copyright 2013 – Mary L. Lanigan
Flowchart/Storyboards
Page 1
Background
What is a Flowchart?
Examples of a Flowchart
What are the four Main Reasons for Creating a Flowchart?
Copyright 2013 – Mary L. Lanigan
Flowchart/Storyboards
Page 2
What is a Storyboard?
Example of a Storyboard
Visit these URLs to see examples of storyboards used to create websites.
http://www.mcli.dist.maricopa.edu/authoring/studio/guidebook/images/storyboard1.gif
http://vfowler.com/wp-content/uploads/2009/06/storyboard3.gif
http://mcclurken.umwhistory.org/jahc/images/storyboard.gif
EXERCISE
To obtain a first-hand look at how a flowchart and storyboard work together to create a website,
follow these instructions.
Step 1:
Go to www.marylanigan.com and click through the website.
Step 2:
Plug in your headphones to view this video. Watch a brief video about the
marylanigan.com website by going to:
www.hpandt.com/755/flowchart/flowcharts_story.AVI
Step 3:
See the flowchart up close by going to:
www.hpandt.com/755/flowchart/flowchart.pdf
Step 4:
See storyboards with SME feedback by going to:
www.hpandt.com/755/flowchart/storyboards_withSMEfeedback.pdf
NOTE: For your upcoming assignment you will be creating a flowchart and storyboard. However,
your website will be focused on a training workshop NOT on a personal portfolio. Thus, the
flowchart and storyboard will depict a website more like this: http://www.hpandt.com/overview/
Copyright 2013 – Mary L. Lanigan
Flowchart/Storyboards
Page 3
Target Lesson
Creating a Flowchart?
There are six steps to creating a flowchart.
1.
Using an 8.5 x 11 blank paper for each webpage, draw free-hand the information you
would like to include such as headings, images, links, etc. Don’t worry about being
artistic. The purpose of this step is for brainstorming; you are NOT creating the actual
storyboards yet.
2.
Complete step one for each webpage for the website.
3.
On the floor layout the paper to form a flowchart. In other words, the index/homepage is
on top. The homepage buttons, that is, page 2, page 3, and page 4 are placed
underneath. Any supporting materials for pages 2 – 4 are placed underneath each
corresponding paper.
4.
Using the paper flowchart that is laying on the flow, draw the flowchart using Microsoft
Office or like software.
Example resources: http://msofficesupport.blogspot.com/2011/04/create-flow-chart-in-msword.html#comment-form
http://youtu.be/WDUwqYLlAA8
5.
Review and edit flowchart as needed.
6.
Create final flowchart.
For our purposes we will use these shapes to create our flowchart.
Rounded rectangle will represent our starting point, which is the
index/homepage.
Parallelogram will represent each webpage with the exception of page 1,
which is the index/homepage.
Ovals will represent attached videos, audios, e-mail link.
Copyright 2013 – Mary L. Lanigan
Flowchart/Storyboards
Page 4
Document shape will represent attached documents.
Example
I followed the above steps to create: http://www.hpandt.com/overview/
The final flowchart looks like this: www.hpandt.com/755/flowchart/flowchart_overview.pdf
Practice
Your future class assignment will be to create a four page website in which you teach your
trainees a technology topic such as the various storage space options available to instructional
designers. In order to practice the above complete these steps.
1. Take out 4 blank sheets of paper. On a single paper, write one of the following headings
of each page: Welcome; What is Storage Space?; Storage Types; Summary
2. Brainstorm what you want on each page by following steps one and two above.
3. After drawing on each of the four papers, lay them out on the floor to see the flowline.
4. Open Word and draw the flowline.
Copyright 2013 – Mary L. Lanigan
Flowchart/Storyboards
Page 5
Creating Storyboards
After you created your flowchart, you are ready to create storyboards that you will use to design
your website. There are 5 steps to creating storyboards.
1.
Review your flowchart to make sure all the headings and subheadings are correct. You
may have elected to change some items after finalizing your flowchart.
2.
Using the flowchart for guidance, gather all the information you would like to use for your
website including images, text, links, etc.
3.
Using your flowchart, draw out each web page using a template as illustrated. You can
create a template in Word using the horizontal page setup. Create a table like the one
below.
Screen __ of 4
Your Name Here
Date
Draw images in this area.
Description:
Links, URLs:
Write in detail what is contained on the left
side bar such as your buttons; what is in the
heading or footers; and notes regarding text
information in the body.
List links and URLs that will be on each page.
Images:
List image names and sizes
4.
Review each storyboard page to make sure you have all the correct information.
Make sure the flow of your storyboard pages seem logical.
5.
Finalize your storyboards.
Copyright 2013 – Mary L. Lanigan
Flowchart/Storyboards
Page 6
Exercise
To get you started with creating storyboards, complete these two tasks.
1.
Create a template in Word similar to the one illustrated on page 6. Thus, your template
should look like this:
Screen __ of 4
Description:
Links, URLs:
Images:
2. Print out your template. On the hard copy, write “1” next to slide. Write your name on the top
as well as the date as illustrated in the example on page 6.
3. Next, draw your Welcome page, which will include an introduction, objectives, and outline
similar to a structured lesson introduction.
4. In the Description box, enter appropriate information as suggested on page 6.
5. Write some URLs that will be your links and write down two images including their sizes.
Copyright 2013 – Mary L. Lanigan
Flowchart/Storyboards
Page 7
Summary
In this lesson you learned what a flowchart and storyboard are. You saw examples of each and
how they are integrated to create a website. You also practiced creating a flowchart and
storyboard. These tools will be useful in the future when you have to create online websites for
your trainees.
Discuss Dreamweaver assignment.
Copyright 2013 – Mary L. Lanigan
Flowchart/Storyboards
Page 8