Design Proposal for WCCC Website

Administrative Details and Location/Maintenance


Our clients are Mary Kloppenberg and Darlene Howland, Executive Director and E.C.P. coordinator, respectively, of the WCCC. Our clients currently have a website located at wccc.wellesley.edu. They have asked us to redesign a specific portion of the website dedicated to the Early Childhood Program. After completion of the project, our design will reside on their current server. The current plan is for us to maintain the website once it is finished. However, the Center currently has a webmaster for their site, who could take over when needed.

Purpose and Goals


The target audience of this website is parents of current and prospective students of the WCCC. The purpose of the site is to provide a brief overview of the Center's philosophy, goals, and facilities. Users will have access to forms, photos, and important information about each of the different classrooms and how they cater to their specific age range. Our intended design is simple and user-friendly, to help users find the information they need without having to search for it.

Content

index.html
The index page provides a brief history of the WCCC. Because the WCCC encompasses many different programs, the index page will have links to the Early Childhood Program, After School Program, and Upstairs at the Middle School. However, our task is only to redesign the Early Childhood portion of the website. All other sections will remain intact. To draw the user in, we will create child-themed graphics and have interactive elements such as rollovers.

ecp_home.html
Since the home page is the most important page of the website because it is the first thing a prospective parent will see. It will include the philosophy of the Early Childhood Program, as well as a brief sampling of photos of the exterior and interior of the building where the program is housed. Here, the users will familiarize themselves with the navigational structure (menu bar) and have access to all other relevant information on the website.

Classroom Pages (infant1.html, infant2.html, toddler1.html, toddler2.html, purple.html, yellow.html, orange.html)
The classroom pages will have information about the daily routines and intended curriculum for each age group. Photos of children in their classroom setting will appear to the left of the text. Here, parents can learn about the environment their child will be exposed to during their everyday care.

enrollment.html
Basic information about enrollment, admissions, and tuition will be found on this page. Information about the school's accredidation will also be featured on this page. Links directing parents to neccessary forms will be accessible through the menu at the top of the page (available for download in .pdf format).

jobs.html
The jobs page will provide Wellesley College students in search of work study and potential employees information about jobs at the WCCC. Students and prospective employees will be able to find information about setting up an interview and the documents required to apply for a job. Relevant contact information will also be listed on this page.

contact.html
This page will serve as a gateway for users to contact our clients (directors of the ECP) with any questions they may have. We will create a form that can send an email directly from the page for convenience. Telephone and fax numbers will also be listed as alternative means of contact.

Navigation Structure


The intended navigational structure of our website is modeled after the "clique" structure. Every page will be linked to every other page via a navigation bar at the top of each page. When users mouse over the links within the navigation bar, a small drop-down menu will appear, containing additional links relevant to the heading. For example, when a user scrolls over "Classrooms," a drop-down will appear, containing the links to "Infant 1, Infant 2, Toddler 1," etc. This will be accomplished through the use of Javascript. For accessibility reasons, we will also provide text links to all pages in the footer.

Page Layout and Appearance


The home page will look like this:

The menu bar at the top serves as a drop-down menu; when a user hoves over a link, a list of other links will drop down. This is accomplished using a mix of CSS and JavaScript elements. In place of the photo that is there currently, there will be a JavaScript slideshow that shows the exterior and interior of the building.
The same template will be used for each of the other pages with different content. This is intended to maintain fluidity and uniformity throughout the site. The main font used on the website is Arial. However, a font-family is defined within the CSS document, in the event that a user does not have that font on his/her computer.
DIV elements provide the general structure for our design. We have several DIV elements nested within one another to create the header, left and right columns, and footer. The design is positioned relatively and centered with a fixed width and height.
The color scheme is meant to visually appealing without being distracting. Relatively neutral colors allow for more vivid color photographs and other graphics to be displayed without taking anything away from the general design.

Minimum Requirements

public_html
	index.html (Julie, 11/8/06)
	ecp_home.html (Julie, 11/8/06)
	infant1.html (Brittany, 11/29/06)
	infant2.html (Brittany, 11/29/06)
	toddler1.html (Brittany 11/29/06)
	toddler2.html (Brittany 11/29/06)
	purple.html (Julie 11/29/06)
	yellow.html (Julie 11/29/06)
	orange.html (Julie 11/29/06)
	enrollment.html (Brittany 11/18/06)
	jobs.html (Brittany 11/18/06)
	contact.html (Julie 11/18/06)
images/
	logo.gif (Julie 11/8/06)
	banner.jpg (Julie 11/15/06)
	rightbg.jpg (Julie 11/15/06)
	leftbg.jpg (Julie 11/15/06)
	ecp.jpg (Julie 11/15/06)
	ecp_r.jpg (Brittany 11/17/06)
	asp.jpg (Julie 11/15/06)
	asp_r.jpg (Brittany 11/17/06)
	ums.jpg (Julie 11/15/06)
	ums_r.jpg (Brittany 11/17/06)
	chalkboard.jpg (Julie 11/8/06)
	center.gif (Julie 11/21/06)
	home_img1.jpg (Brittany 11/27/06)
	home_img2.jpg (Brittany 11/27/06)
		/classrooms
			infant1_img1.jpg (Brittany 11/29/06)
			infant1_img2.jpg (Brittany 11/29/06)
			infant2_img1.jpg (Brittany 11/29/06)
			infant2_img2.jpg (Brittany 11/29/06)
			toddler1_img1.jpg (Brittany 11/29/06)
			toddler1_img2.jpg (Brittany 11/29/06)
			toddler2_img1.jpg (Brittany 11/29/06)
			toddler2_img2.jpg (Brittany 11/29/06)
			purple_img1.jpg (Julie 11/29/06)
			purple_img2.jpg (Julie 11/29/06)
			yellow_img1.jpg (Julie 11/29/06)
			yellow_img2.jpg (Julie 11/29/06)
			orange_img1.jpg (Julie 11/29/06)
			orange_img2.jpg (Julie 11/29/06)
		/other
			enroll.jpg (Brittany 11/18/06)
			job.jpg (Julie 11/18/06)
			contact.gif (Brittany 11/18/06)

Plan

Please see above list for due dates and responsibilites.
By the 30th of November, each of us will have finished coding and debugging our own JavaScript applications. Julie's JavaScript applications are: a rollover and slideshow. Brittany's are form validation and password protection.
Some of the deadlines are contingent on information we get from our clients; they are busy compiling it for us now.

Date created:11/5/06
Authors: Julie Freitas and Brittany Sundgren