Web Design & Development

This is where the storyboard comes into play. When I'm designing a site, I usually begin with 3.5 index cards. I put just one topic per card, and then I can rearrange the cards in various ways to find the best organization. I look for topics that might fit under one heading, and then use another card to list that heading. In terms of the site the topic cards will become the individual web pages, and the headings will become sub-folders. You can then turn the card over to the blank side and actually rough-out each page.

Once I have all the cards set, then I make a story board. This could be a drawing on paper or a board, it could be pinning the cards to a bulletin board, or it could be using some graphic program on the computer to create the visual blueprint of the site.

As you are creating the hierarchy (or linear) design of the site, you need to consider the accessability of each page by the user. The problem with a linear design is that the last page may be 8 or 9 clicks away. In a hierarchal design most pages should only be 3 or so clicks away. In the diagram below (first seen in my comments to Lesson 3)you will see a very simplified storyboard for a site. The first folder is the www folder (as you should know from your ftp work). There follow 3 layers or levels within the site.
The 1st Level contains: three folders -- course, pics, portfolio.
The 2nd Level contains: in the course folder three pages -- index.html, practice.html, and practice2.html -- and one folder -- project; in the pics folder five images -- me.jpg, map.gif, bike.gif, dog.jpg, and homebutton.gif.
The 3rd Level contains: in the project folder three pages -- index.html, links.html, and resume.html.

Notice that the folders have a single name with no suffix, while the pages and images have the suffix of .html or .gif or .jpg. This is important for saving your pages/images, and will become very important when we get to links.

Also notice that there are 2 index.html pages. Because they are in different folders they will not be confused by the browser. I hope it will be fairly apparent that it would be easy to expand this site by adding folders to the 1st (or any) level, and that it would be very easy to add folders and/or pages to the portfolio, which has not been started as of yet.

If you begin to understand the ideas of structure, hierarchy and/or linear design, levels, and the differences between folders and pages/images you'll be well on your way to dealing with Planning and Organization. And then you will begin to appreciate the Storyboard and Organization necessary when your site is much larger.

For a little self-promotion, you might take a look at a site I did that is a Murder Mystery I wrote for a Bed & Breakfast and adapted for the web. It contains over 40 pages and over 2 dozen images. A storyboard was absolutely vital to creating the site. It's at:
No Love Lost