Major Assignment: Design Document

This assignment has three parts:

  1. Design Document
  2. Flowchart
  3. Storyboards

1. Design Document

First you will write a design document that will explain and describe your instructional project.

Your design document, not counting the storyboards and flowchart, will be 900 to 1200 words for the body of the paper. In addition to the 900 to 1200 words you may also include charts, figures, graphs, etc. and you must have a references page. Your design document will be in HTML, and will be posted on the web and linked to your launch page.

Design Document Examples

When you prepare your design document, you will need to address the following items. Use the numbered items below for headings in your design document:

  1. Type of computer-based instruction (tutorial, simulation, game or combination);
  2. Description of subject matter and content of your particular CBI (for example: calculus environment, genetics simulation or computer programming game);
  3. Description of target audience and their learning characteristics (e.g., 11th grade Biology students) 
  4. Description of learning objectives (what they will learn);
  5. Description of learning principles. What is the theoretical basis for your instructional activities? This should be substantial, and should have at least three references cited.
  6. Description of how your instruction fits into an overall course of study, and strategies to integrate your lesson into an overall course of study
  7. Flowchart (saved as a GIF or JPG)
  8. Storyboards (described below)

2. Flowchart

A flowchart is a diagram that shows how a user will navigate through your instruction. There are other kinds of flowcharts, but this is the type you will create. If you are unfamiliar with flowcharts, here's a good place to start. View these 12 examples of kinds of flowcharts at smartdraw.com. Note that you can view each of these in full size by clicking on it, such as this example.

It is important that you create your flowchart first, as you plan your instruction. This forces you to decide the main components of your instruction, and what interactions it will contain. You must do this planning and flowcharting before you ever start working on the project itself.

To understand the basics of flowcharts, first read this introduction to the basic types of navigation in flowcharts.

Next, read this explanation of flowchart symbols for designing software. Note that you will not need to use all of these symbols, but you will definitely use many of them, and you must follow common flowcharting conventions so the viewer can understand your flowchart.

Now, study this example of a flowchart for a simple interactive program.

You will create one flowchart diagram which shows how the user may navigate through your instruction.

Flowchart Examples

Use a dedicated flowchart or drawing program, which will help you incorporate standard flowcharting symbols instead of trying to draw your own symbols. My experience with students indicates the drawing tools in PowerPoint, Excel, and Word are not very effective for creating good flowcharts. It can be done but is quite difficult to create good flowcharts with these Office tools. Again, based on experience, I suggest a dedicated flowchart tool. If you do not have one, I recommend these that have 30-day free trials you can download:

For Windows users:

  1. SmartDraw (an excellent program with an excellent tutorial on how to create a flowchart)
  2. Inspiration

For Mac Users:

  1. Omnigraffle (an outstanding program)
  2. Inspiration

Save your completed flowchart as a GIF or JPG and upload it to the Web, and link it to your Design Document narrative and your launch page. Note: if you use a Microsoft Office program, save your chart as a GIF or JPG. Do not "Save as Web Page". In other words, do not create an HTML document from a Microsoft Office program. Office programs create non-standard HTML.

3. Storyboards

Storyboards are visual representations of what your end user (learner) will see on the computer screen. They are small sketches of your final project screen design. They are tiny versions of what your screens will look like. You create them in the planning stage of your project. You as the designer create these so that you or the client or both can see what the project will look like before it is actually created. Storyboards are meant to be a time-saving device. If the client doesn't like the storyboard, you haven't invested so much time that you cannot start over with another concept.

Storyboards are also useful when working with a team. A picture is worth a thousand words--meaning, you can describe what you are going to do, but it is better to show me.

Designers and creators from many fields use storyboards. Here a storyboard from an animation masterpiece--yes, the Flintstones. Here's a storyboard from a planned video shoot of a talk show. Here's one for a planned instructional software program, similar to what you will do, and another about how to start a car.

Here is a template in Microsoft Word you can use as a guide. Your storyboards should be six per page, as in the template. Each large box represents a screen, just like what you see in this example. Use this template, or something very much like it. That is, you can create your own template but it should look a lot like this first example.

You will create a storyboard for each "screen" in your instruction. Use a template like the one above, where you put six storyboards on one page. Do not spend a large amount of time on these storyboards (I suggest no more than four hours total). They are only sketches of the look and feel of the final product. If you have repeating elements, you can sketch them in detail on one storyboard, and that is sufficient. Exception: you must create 3 storyboards that are extremely detailed for presentation to your client (me).

I suggest you sketch your storyboards on paper, then use a scanner to scan them and save as a JPG to post to the Web. Some people are reluctant to draw anything, which is unfortunate. I will allow you to create your storyboards with a drawing program if you prefer. I recommend sketching by hand because I think it is faster and easier.

Storyboard Example: