Design Document


Administrative and Maintenance Details

Our client for this website assignment is Jean Yau, the Co-Vice President of the Wellesley Water Polo team. The website that we will create for the team will reside on the Wellesley Activities Server where it has currently been set up since April 22, 1999. Beth Romano, the other Co-Vice President, will use her own experience in website maintenance to ensure the upkeep of the website after the first semester.

Purpose and Goals

The primary goals of this website are to recruit new members and provide useful information in an efficient manner to current members of the team, as well as their family, friends and the greater Wellesley community. Considering the extensive audience to whom the site will be catered, we have designed the esthetics of the page to be enticing for prospective team members by providing several pictures, short video clips and informal biographies of all current members all displayed with bold colors and a repeated page layout to maintain continuity. The context of the page will provide information regarding team schedule, roster, record, explanation of the game, team/individual awards as well as a media section, all of which will be useful for not only prospective team members, but current members as well along with their family and friends and the Wellesley community that supports the team.

We hope the site will not only contain helpful information regarding the Wellesley team, but do so in a manner which elevates team spirit, excites prospective members, family and friends, and increases team visibility and support within the community. The last of these goals will be accomplished through a mailing-list/comments function which will give site users the option of signing up to receive news updates from current team captains as well as pose questions and make comments.

Page Layout and Appearance

With the exception of the home page, which will be a creatively assorted collage of pictures that will provide viewers with an enticing peek into the wonders of our web site, each web page will share a collection of common features. At the top of each and every page, there will be a graphically designed header in large font size reading “Wellesley College Water Polo” (header.gif). Underneath the header, there will be a horizontal bar that will hold the date, “HOME” link and “CONTACT” link. On the left-hand side of each page there will be rectangular navigation key. At the bottom of each page, there will be yet another horizontal bar providing small-sized website info (such as the date of the last website revision). This leaves three-quarters of horizontal space to the right of the navigation bar for all information and photos to be arranged.

Each page will share the same color scheme, using a palette of complimentary colors, including a light yellow (#FFCC66), a more vibrant yellow (#FF9900), and a teal (#66CCCC). The font-face we will use for our primary text will be “Arial”, but for our navigation bar and main title we will use “Garamond”, a serif font that will help stylize all of the general information. The font color will be black (#000000) for all primary text, white (#FFFFFF) for all smaller-sized text on the vibrant yellow horizontal bars, and maroon (#CC0033) for all of the “Garamond” writing on the navigation bar and for all the category titles. By having only three main background colors and three main text colors, we will maintain the continuity of the site and thus keep the page simple, yet interesting, for all viewers. The font size will be “+1” for all general text, “+2” for the rollover text on the navigation bar, “H1” for all category titles, and “H2” for all subsequent titles.

All of the aforementioned stylistic features will remain consistent on each page of our website, providing viewers with a familiar web page template to maintain continuity and avoid user frustration.

Navigation Structure

The website will have a left-side clique navigation bar which will appear on every page except for the welcome page. This will increase the user-friendliness of the site by creating consistency and organization. At any point during the user's time on the site, he or she will be able to switch to the section of his or her choice. A "clique" navigation structure implies that every page will be connected to every other page. A clique navigation structure allows for quick access to information. Such a structure of navigation may be unwieldy for larger websites, but is adequate for our projected size.
*All subsequent pages will have a side navigation bar that allows the user to switch between pages
**Archived information from various years in the past still need to be collected from Jean, the Water Polo co-president.

Content

Welcome Page
The first page to appear upon accessing this site will be the welcome page. This will be the only page on this web site that does not share the uniform template. Instead, it will consist of a Fireworks-created collage of images in the center of the page, with an image map that will link users to the Wellesley Water Polo homepage. In order to provide equal access to site users with disabilities, a link will be set underneath the image map reading “Click to enter our site” A video clip will play upon accessing the site of a water polo team cheer used to energize themselves before a game. This clip is intended to spark the interest and excitement of site users as well. At the top of the welcome page, we will implement JavaScript to type out the words, “Wellesley Water Polo.” The objective of this welcome page will be to lure users, particularly prospective team members, family, and friends, to enter the web site and become more active in Wellesley’s Water Polo team, whether as a player, a fan, or an interested non-member.

Homepage
A recent team photo will be centered immediately following the header, and in doing so, it will have a personalized effect for all users. Underneath the group photo, a welcome message will appear welcoming friends, family, fans and current team members as well as prospectives.

Water Polo at Wellesley College
This page will contain a brief history of the water polo team at Wellesley College. Included will be information addressing the date and manner of the club’s formation as well as it’s evolution since that time. In addition, this page will display the division in which Wellesley Water Polo competes and a link to this division. Accompanied will be a bullet list of the other teams that compete in this division as well as links to their respective athletics/water polo pages. Following will be a brief description of the time commitment involved with being a member of the team and who is eligible to play. Each of these categories of information will be organized under sub-headings (H2), in order for viewers to efficiently find the data they are looking for. Toward the bottom of this page, users will find a link to the “Contacts and Mailing List” page of this website, where a site user can send his or her questions and comments to obtain further information about the team that may not be accessible through the website.

History of the Game
This page will briefly describe the game’s origin and how it has evolved since its inception. Additionally, there will be relative URLs that take users to brief summaries of how the sport has developed in both the male and female arena. To make the page and content matter more appealing to users, we will include (and in small font document their sources) two black-and-white photos of Water Polo games, giving a historic look to the page.

Rules and Regulations
This page will provide general information regarding the game of water polo (i.e. the number of players per team, length of a match, method of keeping score, how the game is won). As this information is only a brief overview of the game, it will be arranged in bullet format, so that viewers (especially prospective members) can get a quick feel for the game. Below these bullet points will be two links, one connecting users to “How to Play,” the other to “Rules of the Game,” so that if family members, friends, or prospective Water Polo members are interested in furthering their knowledge of the game, they can choose to continue on.

The “How to Play” page will discuss the basic moves and techniques of water polo (i.e. dribbling, passing and catching). To the right of navigation bar there will be pictures of the key Water Polo moves, followed by a brief summary to the right of each respective picture.

The “Rules of the Game” page will begin with an image created through Fireworks showing a swimming pool with figures in the water to show the relative placement of player positions. The image (positions.gif) will have a roll-over feature which will display the name of the position as well as the player’s purpose/responsibilities in that position. This information will become apparent directly below the image, as the cursor rolls over specific areas of the image, prompting viewers with curiosity to find out more about the other player positions. Underneath this image and the space provided for player position information, there will be two sections, the first of which will discuss “Ordinary Fouls,” the second section discussing “Major Fouls.” In addition, this page will have a list of the major rules of the game as well as a link to the 2006-2007 NCAA Water Polo Rules and Regulations Page. As is obvious, the more complex the information and rules are, the further down on the page it is located, meaning that viewers who have little grasp of the game can get an immediate feel for it, and if further interested, they can make the initiative to scroll down for more information.

Team Roster
This page will have thumbnail pictures of each team member and coach in subdued colors. To the right of the picture will be her name. When the cursor is placed over her picture, the thumbnail picture will resume full clarity and the text where the name was will change to a more detailed biography, including her name, position, graduation year, number of years involved in the sport and a short personal statement.

The thumbnail photos will be divided into two columns, fitting a total of approximately ten photos on the screen at one time. The photographs and respective blurbs will be separated from one another by a thin line, subtly making a distinction between each player. This will allow users to quickly scan over the pictures and pinpoint the person they are most interested in retrieving more information about. This feature will be particularly beneficial to family and friends of Water Polo players who want to efficiently track down the player they are personally affiliated with.

Schedule
This page will include the game schedule for the 2006-2007 water polo season. It will be organized by month. When the month is clicked upon, a relative URL will link the user to a calendar for the month, as well as game dates for that month, where the game is being played and the opposing team. The opposing teams’ names will once again be linked to that school’s respective athletics/water polo page. To the right of the listed months will be directions and mileage to each game location with Wellesley College as the departure location.

The organization of this page will be geared primarily to friends, family and fans who want to attend a Water Polo game and would like access to the logistical details. By having a list of upcoming months as the first thing on this web page, viewers including fans, parents, friends, and players themselves will be able to quickly jump to the monthly schedule they are most interested in. The box aligned on the right-hand side of the web page will offer a brief overview of how to get to the game location, a feature which should be immediately made visible for anybody who needs quick and clear directions.

Media Gallery
This page will include thumbnail pictures as well as two short video clips, organized into two categories:

  1. Current Team
  2. Past Teams
In addition, two brief movie clips will be available to watch (MIT_tournament.avi, BU_Polomatch.avi).

The thumbnail pictures will be sized 1” by 1.5” so that many will be able to fit on the visible screen at one time. This is important so that we don’t lose viewers’ attention by forcing them to scroll down in order to see all of the photos. Instead, they will be able to scan over the majority of the photos, chose the one that interests them the most, and click on it for enlargement. The current team photos will be placed first on the web page, as we are prioritizing the Water Polo team’s current players and fans over its past members. We are also choosing this organization structure so that users are aware that the team is currently active.

Captain Hall of Fame
This page will include a brief synopsis of the responsibilities of being a team captain and the process through which one obtains such a position. In addition will be a list of past captains, ordered chronologically beginning with most recent. Each name will be a link to that captain’s biography which will include her name, position, graduation year, number of years involved in the sport, awards/accolades, a short personal statement, and an accompanying picture.

This page will be arranged so that the present and past team captains’ headshots will be aligned to the left of the open space (to the right of the navigation bar), with their brief synopsis aligned to the right of their photos. Again, as was done on the roster web page, there will be a line dividing each captain and her information from the preceding and following captains so that everything is neatly organized.

Archives
This page will have a series of years listed, all of which will be links directing users to win-loss records for the year in question as well as any pertinent information regarding changes to the team made during that year.The Archives web page will consist only of a list of years, staying clear of pictures or any additional text, giving users a clear and direct route to finding archived information.

Links
This page will provide users with links relevant to the sport of water polo as well as Wellesley College. Included will be links directing users to:

This page will consist of only a neatly organized list of links, so as to provide users with immediate access to outside information, without the hassle of unnecessary text or pictures.

Contacts/Mailing List
This page will provide team contact information with e-mail addresses for both captaions. Additionally, it will have a form, requesting the user’s name and a brief message which will be directed to the captain’s e-mail. This form will be centered on the page, drawing users’ immediate attention to it. Additionally, users will have the option of providing their own e-mail address in order to receive news and updates from the team regarding game schedule changes and other pertinent information. We will create this using JavaScript.

Minimum requirements

Grace

Stephanie

Timeline

11/10/06
Grace: Encode Homepage and Water Polo at Wellesley pages. Format audio clip for Welcome page
Stephanie: Create collage.gif imagemap for the Welcome page as well as the header.gif for all subsequent pages

11/14/06
Grace: Encode History and Rules and Regulations pages
Stephanie: Create navigation bar with roll-overs and the animated graphic for Welcome page

11/18/06
Grace: Encode Team Roster and Schedule pages
Stephanie: Create roll-overs using JavaScript for the Team Roster images as well as positions.gif for the "How to Play" page within Rules and Regulations

11/23/06
Grace: Encode Media Gallery and Captains Hall of Fame pages. Format video clips for Media Gallery
Stephanie: Encode Archives and Links pages

11/27/06
Grace: Format JavaScript for the mailing-list/comments function as well as the date object
Stephanie: Ensure client approval, complete final changes, testing
P: E-MAIL STATUS REPORT TO ADVISOR

12/4/06
P3: PROJECT CODING DUE

12/10/06
P4: PROJECT TESTING DUE

Image List

welcome_page.html

homepage.html

Wellesley_polo.html

history.html

rules_regulations.html

rules_regulations/how_to_play.html

rules_regulations/rules.html

roster.html

schedule.html

media_gallery.html

captains.html

archives.html

links.html

contacts.html

Needed From Client:


This page was created by Grace Oplinger and Stephanie Brown. 11/05/06.