This is an example of a multimedia design document describing a simple interactive slideshow program about waterfalls. A mockup is a great way to work out the details of a project before it is produced. In the images below, each screen is displayed similarly to the layout the actual functional program might have.
This program should run efficiently in a web browser as a Shockwave or Flash movie. The navigation scheme should be easy to use, and the overall dimensions of the program should not exceed 640 x 480, or 800 x 600 pixels.
Title Screen - From here the user may go to the Information (Credits) screen, or the Main Menu.
Main Menu Screen
The user may go to the Information (Credits) screen, or choose one of the navigation arrows. The left navigation arrow button takes the user to the last image in the available images. The right navigation arrow button takes the user to the first image in the available images. Clicking a thumbnail image takes the user directly to that image. The cursor changes to a "Pointing Hand" when any navigation element is rolled-over. Text labels will be placed under each waterfall image, and clicking the text label for each respective picture takes the user to that image.
For all full-screen images below, the Main Menu button takes the user to the Main Menu. The left and right arrow buttons navigate to the next and previous image respectively for all the available images. If the user clicks the left arrow button at the beginning of the available images, the Main Menu comes up. If the user clicks the right arrow button at the end of the available images the Information (Credits) screen comes up.
Columbia River Gorge
Fall Creek Falls
The above images show the results of navigation from the title screen.
The images below show the overall navigation options available to the user from the various screens available in the program.
The above mockup image screen layouts were assembled with Adobe Fireworks, and are available here. The mockup images are also available as .PNG and .JPEG images here. You may download the finished source Adobe Director 11.5 Waterfalls movie here.
An example of a finished Shockwave movie of the above design is available here:
Note: Waterfall images were obtained from the following URL: http://grandcanyon.free.fr/images/cascade/thumb.html.