How to Create a Storyboard for a Website

A storyboard is a sketch of how you want to approach a particular project. Popular in filmmaking, storyboards can also be used to help construct a website. Creating a storyboard before you begin your website will help you work on the computer more efficiently because you'll have a plan to follow and will have already thought out the overall site organization, the page layout and the page contents. The storyboard gives a "big picture" perspective to the overall web project while also breaking down a complex project into workable units that can be addressed individually.

Instructions

  1. Draw a Site Map

    • 1

      Using a paper and pencil, draw an upright rectangle to represent your website homepage at the top of the paper.

    • 2

      Draw similar rectangles to represent the other pages you think will be linked to that home page below the starting rectangle, like a pyramid.

    • 3

      Examine each second level page and think about what might be linked from each of them and create a third row of rectangles. Repeat for as many sublevels of your site you feel you need.

    • 4
      Site Map on Paper

      Draw lines between the rectangles to show how they are linked to one another. This drawing will serve as a rough "site map" for your website.

    Plan Layout and Content

    • 5

      Draw a large rectangle on a new piece of paper to represent your home page. Now, think about the layout and content of the page.

    • 6

      Draw boxes and lines to represent banners, graphics, navigation and text to give yourself a rough idea of how you envision the page coming together on the web.

    • 7
      Layout and Content Plan

      Repeat Step 2 for each page of your site. When you have drawings of all your pages, your storyboard is complete and you are ready start up your web design tool and put your plan into action.

Tips & Warnings

  • Web editing products such as Adobe Dreamweaver create file site maps for you as you construct your website that you can compare to your storyboard as you work.

Related Searches:

References

Resources

Comments

You May Also Like

Related Ads

Featured