While storyboarding is most often used for motion pictures, Web developers and business consultants also storyboard websites. Storyboards help you visualize a large graphical project, such as the layout and design of your website. The process involves drawing pictures of what your website should look like before you actually develop the site, providing an effective tool to design the flow of the website. Storyboarding before you begin coding also saves you time and money in redesign.
Develop a conceptual plan for your website to create the rough guide for your storyboard. Determine the kind of content the site will contain, such as a blog, an image gallery, a biography page, a contact form, a message board and an e-commerce page.
Draw a mockup sketch of a container for your website using either paper or a digital drawing surface. A container is a set of graphical elements that consistently appear on most or all of your Web pages. It typically includes your website banner, navigation menu, footers at the page bottom and column layout. Using a container makes the Web pages on your site consistent, even if they display vastly different content. Setting these consistent standards for your Web pages makes it easier for your viewers to navigate the site. It also gives you more opportunity to build a distinctive brand.
Draw mockup sketches of each type of content page. Use your container as a starting point, then place the graphical elements required by the content for the page. For example, on a blog template page, design the look of blog post titles, the body text of blog entries, any tags and other metadata to include, links to make a comment on the post and divisions to visually separate blog posts. Be very specific, identifying the pixel dimensions and locations of the elements on the page as well as listing color codes for the color scheme. The storyboard is for your benefit, or that of your hired design team, and becomes more useful as you add specificity.
Review the entire storyboard when complete to ensure consistency without unnecessarily constraining the appearance or functionality of certain types of content pages. Make revisions as necessary.