Lesson 1: Storyboarding

Overview:

Storyboarding is one form of planning. If you take the time to think through a project before you start construction, you save time, work and, if you were designing professionally, money. The old saying, "Twice measured is better than twice cut." speaks the notion that a little planning and thought before the actual work reduces the number of mistakes and revisions that can plague a project. In this assignment, you'll sketch the look of the home page of your personal web site as well as make decisions concerning the technical parameters of the page. Because we are only doing a revision of the home page you won't need to concern yourself with the rest of the pages in the site.

As was mentioned in the previous unit, the redesign will entail the following features: 1. Your portrait as the central focus, and 2. At least six navigation buttons arranged in a curve flowing around part of or all of the portrait image. Both of which must be contained within the same master table.

Learner Outcomes:

At the completion of this exercise, you will be able to:

1. Demonstrate the ability to evaluate and assess effectiveness and success of the preliminary design, and whether the story board sketch meets design criteria.
2. Accurately describe the layout of graphic elements in pixel units given a specified monitor resolution setting.

Activities

1. Complete the storyboarding worksheet first, and show your instructor the completed worksheet.
2. On the graphing paper, sketch the look of the page.
3. Lightly sketch vertical and horizontal guide lines to determine the number of rows and columns necessary to hold all the elements in place in a table.
4. Make notes as to which cells need to be spanned, what content in cells needs to be aligned vertically and/or horizontally, and when nesting tables would be advantageous.
5. Assign widths and where necessary heights for cells.
6. Label each graphic element with its file name, width and height.
7. Determine which cells will not have graphics. What will be contained in the cell, text or nothing but background?

Resources/Online documents

• graphing paper,
• pencils,
• straight edges,
• "Step-By-Step Site Planner" is an article by Keith Reichley at webmasterbase.com which spells out in exhausting detail the preliminary steps a professional developer or development firm might undergo prior to coding a web site for a client.

All done?

Maybe not. Have your instructor review your sketch and be prepared to do revision.

Also, use the web site evaluation tools the class created in unit one to see if your design meets the criteria of a quality web site.