Storyboarding Overview
Storyboarding is the process of creating a graphical representation of a web site’s structure.
It involves diagramming the relationships, or links, between the various pages within a site.
Storyboarding often has been used in relation to other media, such as film, animation, and comic books. Much like its role in other production processes, storyboarding in web design allows you to conceptualize the “big picture” of your document—it prompts you to visualize how all the pages in a site relate to each other and how they work together (or not) as an organic whole.
Constructing a Visual Map
A storyboard is in essence a flow chart or outline of a site. The concept is to create a visual map of all the nodes and links. Rather than focusing upon the content of particular pages, your storyboard should highlight the overall structure of your document.
It should include the starting node (also called the home, index, or splash page), secondary nodes, subpages, and any downloadable files. Further, the storyboard should depict various the relationships among these different components. An example of a basic storyboard can be found below.
Figure 1: Sample Storyboard from
As you are constructing a storyboard (either for a pre-exiting site or one that is still in the planning stages), you first should identify the major areas of your site. Use the flow chart to get a sense of the framework of your site and the relative importance of its various elements. What are the primary categories of information and/or services addressed by this web document? What are the subcategories within these main areas? How are these issues related to one another?
In your visual depiction of these various categories, be careful to keep similar areas parallel in the flow chart. Also, make visual distinctions between different elements within the site. You can accomplish this through design elements such as color, shapes, repetition, proximity, and alignment.
Site Structure
One of the potentials of the web as a medium is the ability to create complex architectures for your presentation of information. Web documents often are discussed in relation to three broad structural categories: linear, random, and hierarchical.
The linear structure presents information in a set order, guiding the user to visit each page sequentially rather than via multiple paths. Because of the nature of their design, web sites often do not reflect traditional, linear outlines.
Sites also can use a random structure, in which nodes are linked together in seemingly chaotic ways. This sort of loosely defined organization tends to disorient users. Thus, it only is relevant to particular themes and purposes rather than general web usage.
The most common way to structure web documents is with a hierarchical layout. This layout usually begins with a starting page, which has links leading to other pages; these secondary pages, in turn, often contain links back to the starting page and to additional subpages.
Storyboarding Overview 1