Our audience includes current and prospective club members, current and prospective students of Wellesley College, and anyone else with an interest, general or specific, in the club or Wellesley religious life. Therefore, we will have various sections of the website especially geared toward these different groups of audience.
For example, the current members of the group will find upcoming events, sign-up sheets, meeting locations, and such. For the viewers who are interested in joining or simply finding out more about Wellesley Real Life club, we will put an informational survey, past bible studies, and galleries to give a sense of what Wellesley Real Life does. For those who have a general interest in the club or Wellesley College's religious life, not only would they enjoy all the content of the website as the members or prospective members would, but they would also be directed to external links such as other religious affiliations in Boston.
Our main goal is for the website to accurately portray Wellesley Real Life. We want to give the audience a sense of the personality of the club through interactive media, officer biographies, bible study examples, and the general look of the website. Besides simply figuring out what Wellesley Real Life or Wellesley religious life is like in general, the process of figuring it out will be a pleasant experience for the viewer because the site will be visually appealing (the client requested that the website be "pretty") and also easy to navigate.
The title of the page will be Wellesley Real Life. At the top-left corner of the page, there will be a "Wellesley Real Life" logo that we will create on fireworks. This logo will be in the same position on every page. Across the rest of the top of the page, there will be an imagemap containing links to the other webpages that will act as our navigation bar. It will be a 2-row table with 9 sections containing links to the pages on the website. The sections are: Home(WellesleyRealLife.html), About Us (AboutUs.html), Meet the Officers (Officers.html), Announcements (Announcements.html), Past Bible Studies (BibleStudies.html), Form (Form.html), Pictures (Pictures.html), Real Life Groups (LifeGroups.html), and Affiliations (Affiliations.html).
Below the logo and navigation bar on the left side of the page, we will embed an interactive music player. To the right of the player, it will say "Real Life Music" in bold text. Beneath, there will be a scroll-down menu that allows the visitor to choose from a selection of 10 songs that the E-board members have personally chosen. The player will have a "play" and a "pause" button, as well as a volume controller.
In the center of the page, there will be a large group picture approximately 3 x 5 inches big. Underneath the picture, there will be a caption that says "Welcome to Wellesley Real Life" in 24 pt font.
At the top of the right corner across from the interactive music player will be a digital clock that tells the local time at Wellesley.
Toward the bottom of the page, there will be a slideshow of various pictures submitted by the E-board members. The images will scroll from side to side at a medium speed, and when the mouse rolls over a picture, the slideshow will pause, revealing a short description of the picture. The description will appear right on the photo, and the actual photo will become transparent enough for the text to be visually clear. There will be 20 pictures in the slideshow. On the left side of the slideshow, there will be a button in the shape of an arrow pointing to the left that will cause the slideshow to quickly scroll to the left, and then continue at its normal pace. There will be another arrow button on the right of the slideshow that will scroll the pictures to the right.
At the bottom of the page, it will say "Contact Us:," and underneath will be a mailto link to Liz Pierce's email.
Beneath the contact section, it will say "Created By: Chriss Cho & Emily Hung." Underneath this, we will put the date the site was completed, and below that date, there will be the date that the site was last modified. These 3 lines of text will be centered.
This page will have the Wellesley Real Life Logo and navigation bar at the top like the other pages. Below, there will be a centered header that says "About Us," in size h1.
Underneath the header, there will be 3 sections that give the visitor some background information about the club. First, there will be a header titled, "Mission Statement," in size h2. It will be aligned to the left, and beneath the header will be a brief and concise description of the club's mission statement, which was written by the E-board members themselves. The text will be centered and will have a background of an image of a scroll, which we will find on the internet. The second section will be titled, "History," in size h2, also aligned to the left. Beneath the header there will be a centered set of bullet list of important dates in Wellesley Real Life history. We chose to put the club's history for simplicity reasons, and also to make it easier for the visitor to skim. The third section will be titled, "Campus Crusade for Christ," in size h2. The title will also be a link that takes the visitor to the "Affiliations" page on the website. It will go directly to the Campus Crusade portion of that page.
This page will also contain the Wellesley Real Life logo and navigation bar at the top of the page. Underneath this will be the centered title, which will say "Meet the Officers" in h1 size. The rest of the page will consist of a large table that spans the whole screen. Each cell will contain a picture of the officer as well as several basic facts about them to the right of their photo, i.e. name, club position, hometown, graduation year, major, extension number, dorm, and cell phone number. Below their picture, each officer will say a few sentences about themselves. To the left of their quote, we will have a header in size h3 that will say "[officer name] on [officer name]..."
The announcements page will again have the Wellesley Real Life logo and navigation bar at the top of the page. Beneath, the centered title will read, "Announcements," and will be in h1 size. Below the title will be a calendar, which we will construct from a table. We will employ JavaScript in a way that the browser will determine the current month and therefore bring the visitor to the calendar for the proper month. The top of the calendar will also have 2 scroll bar menus One will contain the 12 months of the year, and the ohter will contain the year. These will allow the visitor to go directly to the date he or she desires.
In the calendar, we will also employ JavaScript using rollovers. When the user rolls over an event on the calendar, a small box will show the event's details.
Like the other pages, there will be the Wellesley Real Life logo and navigation bar at the top of the page. Below in the center will say, "Past Bible Studies" in size h1. Underneath the header, it will say "Most recent study:" in size h2, and will be aligned to the left. Beneath this, we will put the latest bible study material. At the bottom of the page, we will a hyperlink that will be called "Printable Version," and will command the computer to print the Bible Study material.
This page will also have the Wellesley Real Life logo and navigation bar along the top. Below this, we will have a centered header in size h1 that will say, "Contact Form." Underneath the main header, we will have another header aligned to the left in size h2. It will say, "Getting to Know You Better." Below this header will be a short paragraph about the process of choosing a church and how Wellesley Real Life strides to address others' needs in any way possible. Below this explanatory paragraph, we will put a mailto link to Liz Pierce that will say "Help us help you."
At the top of the page will be the Wellesley Real Life logo and navigation bar. Below, we will put a centered header that says, "Real Life Pictures" in size h1. Below the main header, there will be a scroll bar that allows the visitor to choose the gallery he or she wants, according to the year. There will be a button that says, "Go!" that will take the visitor to their desired gallery. The browser will automatically bring the visitor to the gallery of the current year. The rest of the page will be organized by a table that will have 3 columns and as many rows as needed. In each cell, there will be a thumbnail image that will represent a certain event. Below the thumbnail, we will specify the event and its date. The thumbnail will be a link to a public photoalbum website that will contain all the pictures for the event.
Again, at the top of the page will be the Wellesley Real Life logo and navigation bar. Below this will be a centered header that says "Life Groups," in h1 size. Underneath the title, there will be a short, centered paragraph describing life groups and how they are unique to Real Life. At the end of the paragraph, we will include a quote from a club member describing how the life groups have affected her and her everyday actions. This quote will be in a different color from the regular text.
Below this paragraph, we will align all the text to the left. We will list the life groups in size h2. Below each life group's heading, we will include one image, with a few basic facts wrapped to the right side. These facts will include: the group leader, discussion topics, and meeting times.
At the top of the page, there will be the Wellesley Real Life logo and navigation bar. Below this, there will be a centered header in size h1 that says "Affiliations." Below this header, there will be another header in size h2 that will say "-Real Life Boston-." Underneath this header, there will be an image of Boston city life on the left hand side, with text wrapped to the right explaining Wellesley Real Life's connection to Real Life Boston. Underneath this text, there will be a hyperlink that will connect the user to Real Life Boston's website. The link will be called "Real Life Boston."
Beneath this link, there will be another centered header in size h3 that says, "How to get there:" and below this link will be 2 other links. The first link will take the user to a page with mapquest directions from Wellesley College to Harvard Emerson Hall, which is Real Life Boston's citywide meeting site. The 2nd link will have directions from Wellesley College to Harvard Emerson Hall using public transportation.
Underneath these links, there will be a centered header in size h2 that will say, "-Campus Crusade for Christ-." Beneath this header, there will be an image of Campus Crusade's logo, and there will be text wrapped to the right of this image describing Wellesley Real Life's connection to Campus Crusade. Underneath this text, there will be a hyperlink that will take the user to Campus Crusade for Christ's website. This hyperlink will be named, "Campus Crusade for Christ."
The last section on this page will have a centered header in size h2, and will be called, "-Boston Area Churches-." This header will also be a link to an absolute URL and will take the user to a page on an MIT website that contains a vast list of Boston Area Churches. Below this header, there will be a paragraph of text that explains how Wellesley Real Lifers go to various churches all over the greater Boston Area. It will also touch on the advantages of living near Boston, seeing as there is a multitude of diverse churches to choose from.
We plan to have two rows of navigational table at the top of every page in Wellesley Real Life Website. To distinguish among the hyperlinks that have already been clicked on and those that haven't been clicked on yet, the hyperlinks at the top will be red, even though the overall color scheme of the website will be blue.
Therefore, our viewers will have an easy time navigating through the website, whether they know exactly what they are expecting to find from the website or they are just browsing, for every page will have the same, constant navigational table at the top, in alphabetical order except "Home".
Each page will resemble each other in our website. Furthermore, we will underscore simplicity, so that no thing overwhelms or annoys our viewers into leaving the website (especially those who were simply surfing the web without any specific intention in our website). So at the top of each page will be the navigational table that will be constant in every page. The font sizes will differ depending on the context of each page, but the font style will remain the same: Arial Narrow Sans-Serif. The background color will be white so that the background does not interrupt the text nor make it hard for the viewer to read the text. The dominating color scheme of the webpage will be blue, except for hyperlinks to distinguish whether or not they have already been clicked before.
Chriss will be responsible for:
Emily will be responsible for:
Real Life Logo:
Homepage (WellesleyRealLife.html):
About Us (AboutUs.html):
Meet the Officers (Officers.html):
Announcements (Announcements.html):
Past Bible Studies (BibleStudies.html):
Form (Form.html):
Pictures (Pictures.html):
Real Life Groups (LifeGroups.html):
Affiliations (Affiliations.html):
Minimum Requirements
Final Check-up