VCA222 Web Design

Exercise: Map a Site

The design of most web sites begins with a site map. A site map is a graphical representation of how the various pages (or "screens") relate to one another. Given that most web sites consist of hundreds of pages of information, it is extremely important for a site builder to have everything organized and to be able to see quickly and clearly which page connects to which other page. It also helps with the design of the interface—a designer needs to know how many sections and "levels" a site will have before s/he can create the navigation for the site.

Assignment

In order to give to practice at creating a site map (and perhaps an appreciation for the complexity and scope of a web site), I'm going to have you map an existing site.

Procedure

  1. Visit the following site:
  2. http://www.banyancommunity.org

  3. On a piece of paper (the bigger the better) draw a box at the top and label it "Home Page." The links that lead away from this page should be represented as lines that lead to other pages (other boxes).
  4. Start clicking on the links to see where they lead. Add boxes to your map represent these pages (for example: "Our Programs," "Our Roots," etc).
  5. Look carefully at the pages you visit beyond the home page—note that some of these have links to yet more pages, deeper down in the site—"lower levels" (for example, under "Our Programs " you will find several sub-links). Map all of the lower-level links that branch off from the main pages.
  6. Make a note of links to external sites (for example, the link to the "Just Give" site).
  7. Chances are your site map looks a little messy by now. Create a neater, cleaner version that clearly shows the different levels of the site. You could draw it out on paper, or use an application like Illustrator or some graphing application. Note that you can not get full credit if you hand draw the site map.

Deliverables

Upon completion, give me a copy of your root folder for this project (with both files within).

Deadline

Next week.

Point Breakdown

4 pts

Found every link; presentation was professional: clean and easy to read (not hand drawn).

3 pts

Thorough but not exhaustive; presentation is clean & easy to read (not hand drawn).

2 pts

Has main links; presentation is legible.

1 pts

Missing some links and/or sloppy presentation.

0 pts

Incomplete, and/or very sloppy.

Class schedule

Syllabus

Student resource index