Organizing the Web site design process by using storyboards can save a significant amount of time.

Site Design Using Storyboards

Step One: Talk with someone about the site. Those with marketing backgrounds are especially valuable. The obvious starting point for content is theme-related information.

Step Two: Decide what the main topics will be. If hosting a contest on the site, consult a lawyer regarding appropriate legal issues.

Step Three: Begin the storyboard. Draw the first box representing the home page. Next draw a row of major topic pages with links to subsidiary pages.

Step Four: Again discuss the site with someone, and decide what changes should be made. Revise the storyboard appropriately.

Create The Home Page

After creating the storyboard, sketch three or four possible designs for the home page on tracing paper. When a new idea presents itself, place a new sheet of paper atop the old one, trace the agreeable elements, then add the new elements.

During this process, put the different design elements into a page grid. Web sites are typically created using tables. After creating the mock-up, position all the elements in a table so the grid design will translate to the screen.

Besides sketching the layout of the home page, decide also on the following elements:

Color Scheme: For instance, you may wish to use muted colors for the links, the background, and the graphics. Use browser-safe colors if possible.

There are 216 "safe" colors that may be viewed by both Macintosh and Windows users without the image being dithered. ("Dithering" is the technical term for "messed up.") While 216 colors sounds like quite a few, it isn't. Make a choice — will pages be designed for everyone or will pages be designed to please the designer (or the client)? If clients must be pleased, let them make the final decision.

Fonts: The designer may have to accept the default fonts for the text, but might decide to use an alternate font for navigational text and/or headlines.

Image Theme: Consider the theme of the site carefully. Images should harmonize with the site theme.

After making these decisions, create the home page in a professional quality graphics application. Insert nonsense text until content has been decided upon. Dissect this image into individual graphic elements and insert them into an HTML document using tables to align them. Put time and effort into these graphics since they will be used on the site.

Use Images More Than Once

Use the original navigational images repeatedly throughout the site since the first time a page is loaded, the images will be stored in the visitor's cache. The next time the images are needed they won't have to be retrieved from the server. They'll be pulled from the visitor's cache and will therefore load more quickly. Repeating images throughout the site also adds consistency to the design.

Create The Rest Of The Site

Repeat this process for each of the main topic pages and subsidiary pages. The task will be easier now because the important design decisions will have been made. The only major effort that will remain is adding the actual content and creating what additional graphics may be required.

Site Documentation

Buy a site notebook and document everything that's specific to the site:

Text fonts (text size, leading, spacing, color and style)
Graphics
Colors (both hexadecimal and RGB values)
Image sizes
Filter settings including bevels and ancillary parameters
Anything else easily forgotten (such as the FTP site user name and password)

Trust me. Two days after you finish a project, you'll forget every parameter you set!