Back to: Homepage > Homework & Projects CSCI 217
Site Planning Phase

In this phase you are to develop a design plan that includes

• a statement of site goals,
• the site structure including page specs, and
• a prototype of the site.

This is to be done on paper. A "professional" design plan might use tools such as word processors, image editors, and UI design tools.  Look at a short  Guide to Web Site Planning. Check the site design process. This Website Planning Worksheet shows information that professional designers want from clients. Patterns provide one technique for building a page prototype.

Here is what you are to hand in.

1. A statement of the goals and purpose of the web site you want to develop. This should include an identification of the target audience.
   
   
2. A flow chart that maps out the site structure. Identify the purpose of each page and how the pages are related. As the term progresses your flow chart will expand. Here is a partial flow chart to get you started:
   
   
   
   
   The pages E, F, ... are pages that relate to the specific topic of your site. Of course, additional pages will link from the ones given here. For example, the "Homework" page will contain links to homework starting with assignment 5 in addition to the Design Document.
   
   Note: each box (page) contains a brief description of what goes on the page.
   
   
3. Specs for each of the pages A, B, etc. The specs for a page should include
   1. its filename,
   2. a list of content to be placed on the page (You don't have to write the text nor prepare the images yet; at this stage you just want to determine what has to be done.)
   3. a list of links and menu items on the page.
   Here is an example of a spec for a fictitious page about a roommate.
   
   

   Filename:	john.html
   Content:	Text: describe John's interests and why he's a cool roommate Text: creation date Image: head shot of John Image: John with girl friend Image: John with his car Movie clip: John doing pushups
   Menu items:	link to "About" page link to Course Material page link to Company page link to Home page
   Links:	link to full size image of John with girlfriend link to john with car link to movie of John doing pushups

   
   

   By developing the specs you will know what work must be done: what images to obtain, text to write, audio/video to record, and so on.

4. A prototype of the layout of each page (or category of pages). In your mock-up of each page sketch how the items in the spec will be related to each other and what the page will look like. Here is an example mock-up for a fictitious page about a roommate.
   
   
   

---