Regardless of chosen media, it is generally a good idea to outline your instructional materials prior to production. These outlines may take many forms from storyboards to index cards to flowcharts.

Storyboards were originally created to plan and script video programs but can also be useful to plan the content of computer screens. Storyboards allow one to design the look of their interface, consider common placement for navigation buttons, and make decisions about the placement of titles, text, and video. Alessi and Trollip (1991) recommend a sequential process of storyboarding: write essential instructional text, questions, and feedback; write scaffolding text, directions, navigational screen cues, and prompts; produce storyboard with text and sketches of graphic elements; check for overlap and design adequate space for any pop-up text or interactive elements that supplement the original presentation; describe time-dependent media that has a distinct start and stop point (e.g., sound file X runs concurrently for 25 seconds through screen 4.8 and 4.9; animation/video of explosion displays in 2x2 frame, upper right portion of display, for 15 seconds). Note, storyboard-like drawings can be captured or reproduced on Index Cards which allow designers to flexibly modify and adjust the sequence of their instructional materials. A large flat-top table or bulletin board will facilitate the shuffling and rearrangement of lesson components. The size of your storyboard sketch window should correspond to the technology delivery medium (i.e., 3:4 horizontal ratio for computer-based instruction and multimedia or 4:3 vertical ratio for web delivery and traditional print).

Flowcharts are useful for depicting the flow of lesson segments, web sites, or multimedia interactions, feedback loops, and extension tasks. Flowcharts contain standard symbols. A circle represents the start and end point in a flow, a square or rectange represents a step in the flow, and a diamond represents a decision point for the learner in the flow (e.g., choose a menu item, take a quiz, input variables into a simulation). Flowcharts are especially useful when developing new materials in a team, as everyone must reach consensus on major presentation and interaction sections in the media item. Concept mapping software (MindMeister [Browser; free], MindJet MindManager [Win/Mac; $399], XMind [Win/Mac/Linux; free], FreeMind [Java; Free], iMindMap [Win/Mac/Linux; $99-295], Curio [Mac; $69-145], MS Organization Chart) will facilitate the creation of flowcharts. Alessi and Trollip (1991) recommend an iterative process of flowcharting, starting with a simple diagram of the major units in a lesson (level 1), followed by more elaborate steps and major decision points (level 2), and finally detailed lesson blueprints outlining all lesson components a media developer must produce (level 3).

The three examples below were contributed by Reese Voshell, Department of Entomology, illustrating the process of flow-charting a course web site with major headings shown at far left, lecture groupings shown in the center, and multimedia text components shown at far right. Click any image thumbnail to open a larger graphic.