What Is Storyboarding in Web Design?

When a website's creators are in the design process, storyboarding is often part of the initial stages. A storyboard is a way to get a sense of how the website will look, feel and behave before it gets to the official design or copy writing stage. Both creative and technical professionals use storyboards, which can streamline the design and development process.

A website storyboard usually starts with a series of blank rectangles on a page, one for each page of the site. Depending on the company and designers, space may appear near the blank boards for notes or questions. An information designer, graphic designer or web designer fills out the storyboard with a basic sketch of each page to demonstrate how it will look and feel; it can be as simple as boxes on the page or as complex as a full sketch. Storyboards help a design team and/or clients arrive at the same understanding of what the page will do currently, and make initial changes to the basic design.

One of the most important roles of a storyboard is to provide a basic wireframe diagram of what each page will look like. The diagram should provide just enough information to give a sense of how much space each element on the page should have. Elements in a basic diagram include the navigation bar, main links, area of imagery and space for website copy. A wireframe diagram is a useful part of evaluating the information hierarchy of a page; with a visual layout, it is easier to see if the main elements will have enough space to attract viewers' attention.

The layout of a website often guides the ways users will interact with it and how they will get to various parts of the site. A storyboard can show the direction of movement through the website by laying out the different buttons and links on each page. When previewing a website by means of a storyboard, experts look for things like links that are visible without the user having to scroll down, clear navigation buttons, and a limited number of choices so users are not overwhelmed. The storyboard should give a sense of the overall organization and structure of the website, and show how all of the pages work together.

A powerful website gives only as much information as the user can handle at once. A storyboard helps segment the copy and imagery in a way that draws the reader in, piece by piece. By laying out each page, designers can get a sense of how much information should appear. Most storyboards don't contain the actual text and images that will be on the site, but offer a general sketch that shows the layout, line width, and embedded links.