Client Name: Severance Hall residents and potential residents
Website Name: Severance Hall
Contact person: Suzanne Barth
3. Purpose, goals and audience
The Severance website aims to serve both current and prospective students.
The site’s goals include sharing news and events with the community, sharing the
history and traditions of Severance hall, as well as providing prospective students
with a resource where they get to see where they’ll be living for the next year.
The “sev-a-site” will provide biographies of the residential staff, a tab with
pictures of room floorplans, a social media feed to keep people updated among other
things that will further discussed in the content section. The intended audience
for our website is current and prospective residents of Severance Hall. This will
help current students living in Severance Hall to keep up to date with events and
find all information regarding specific information of the residential hall in one
platform. Furthermore, any Wellesley College student or faculty will be able to
find contact information as well as service information provided by the hall,
such as request-space arrangements and policies, right in one place. The site is
also a resource for incoming or prospective students and their families to explore
the hall before arrival.
4. Navigation Structure
The navigation structure of this Severance website will be a homepage with
seven other subsections that can be accessed through the navbar. This is similar to
the structure of the Hunger Games website that we did an assignment on earlier in
the semester. The navbar will allow users to go from any one of the subsections
(including the homepage) to any other subsection with just one click.
Our reason for choosing this type of navigation system is to allow users who are
potential students to have an easy way of looking through the site and to browse quickly.
None of the subsections have any significant sub-subsections to them because we figured
that the majority of the users of the website have a certain purpose (either potential
students looking for a quick overview of what a dorm at Wellesley is like, or a resident
of Severance Hall who is looking at announcements or for a specific form). Thus, this
layout is the simplest format for the amount of information we are planning to have on
our website.
5. Page Layout and Appearance
The page will have have text font Verdana with a standard font of 15 point for all text
that is not a title. The page has a universal color of maroon, as requested by our client.
The text boxes are the same, in that they will be behind all pictures and paragraphs.
They will change in dimension and color (as described below) but will be consistent in design:
the color is solid and the text boxes do not have margin designs. The navbar will be displayed
the same way in all pages, the way it is shown in the mockup. The chipmunk will also be a
constant fixture of all pages (see homepage for specific location and size). Any changes in
color and font size is mentioned below in the next section. These universal aspects of our
design help us in having a starting point for going into the specifics of what the final
product will be. The audience will be able to find some consistency that we hope helps
them browse and explore the website with ease.
Figure 1: Mockup for Generic Features
6. Content
There will be eight separate pages as follows:
Homepage-homepage.html
The homepage is the first page of the Sev-a site. It will contain the following tabs:
About, History and Traditions, Videos/Photo Gallery, Room Photos, Contact Information,
Testimonials, and a section dedicated to the Severance pet, Ginger. The homepage will also
include an icon of the chipmunk that represents Severance Hall (as seen in the mockup)
in the top right hand corner next to the title. This chipmunk will be recurrent in all of
the pages of the site. The size of this image is 172px X 161px. The name of the hall will
be centered at the very top next to the chipmunk (specified below and as seen in the mockup).
The homepage of the site will include a video of the the State of the Union made by
President Suzanne Barth for comedy purposes, while also containing a section of recent
announcements relevant to the Severance community. The box will be located in the right hand
corner and it will be in the form on of a container with scrolling abilities that could be
updated as needed. The announcement container will have dimensions of 345px X 500px.
The video will be 606px X 476px. At the bottom of the page above the footer, instead of having
testimonials (as it is a tab on our nav bar) there will be a welcoming remark paragraph that
goes across the page describing the mission of the website and that welcomes everyone.
All the text will be in Verdana font (for all pages too). The sizes of fonts in the homepage
are as follows:
Header “Severance”= 40pt color #A6EB8A
Header “Announcements”=15pt
Header “Homepage”= 30pt
Navbar, announcements box text, and paragraphs text = 10pt
All other color is #8A2140
The background image is of Severance in black and white as it is seen on the mockup,
and it will take up the whole page, staying put as the user scrolls.
Figure 2: Mockup for homepage.html
About-about.html
The “About” page will begin with a brief paragraph that tells the user specific information
about Severance Hall, such as location and amenities. The paragraph will be in a text box
overriding the background in the color #66FF99 (mint green, see mock up). Besides this paragraph,
there will be images that will change “on click” of amenities such as the laundry room, living room,
and dining hall. This will be our second use of Javascript; it will allow users to decide when
they want to change the picture after they are done examining it. Directions for this will
be included in the paragraph. The series of on going “on-click” images will be 438px X 364px.
Below we will have an unordered list of the residential staff and key people in House Council.
As seen in the mockup, there will be a small picture of each person to begin each item list,
and next to it there will be a couple lines describing what they do and something about themselves --
mini biographies. Each small profile picture will be 121px X 117px. Our client is still deciding
how many they want to include. The text of the page is consistent with the homepage specifications.
Figure 3: Mockup for about.html
History and Traditions-history_and_traditions.html
This page will begin with a brief description like in the previous page, but will immediately
follow with song lyrics in text boxes that will be about 323px X 434px. These will be floated left
because floated right will be another scrolling box, highlighting another severance tradition--the snap.
Snaps are short words people write during house council meetings and get read at the end.
These are random,funny, grateful, etc. compliments and the practice is something very important
to our client. Here their favorite or most recent snaps can be seen and never forgotten!
The box will be approximately 214px X 283px.
Underneath this box, there will be an image place that will change every time the page reloads.
This is our first use of JavaScript. Our client has informed us of the possibility of a video that,
if available, we would put on the left, below the song lyrics.
Figure 4: Mockup for historyandtraditions.html
Videos and Photo Gallery-videos_and_photo_gallery.html
This section will be dedicated to pictures from the Severance community to the public.
The point of this section is to have memories of past events and of anything related to Severance.
The images will be displayed with a white border surrounding them. Each picture will have dimensions
of approximately 287px X 241px. In the case the pictures look too small and we cannot compromise the size
because of the amount of pictures included, we will use the images as thumbnails that the user can click
and view a bigger version of. This would be another javascript use for the minimum requirements.
On the very top we will include a link to a YouTube page with all videos related to Severance to save space
and make the page neater and less cluttered.
Figure 5: Mockup for videos_and_photo_gallery.html
Room Photos-room_photos.html
This section was previously called Floorplan Overview in our project requirements page. Unfortunately,
we have had to change it because the floor plan pictures are only available to people with a Wellesley domain,
and we do not have permission to release them to the public.
In this modified version, we will have four sections, each with a title of a different floor in Sev:
1st main, 2nd main, 3rd main, and Crows. In each paragraph there will be a couple of pictures of each floor
and examples of what rooms look like on the inside. Each picture will be about 276px X 270px. The sections
will be in boxes with a background color of purple (#cc66cc).
Figure 6: Mockup for room_photos.html
Contact Information-contact_information.html
This page is dedicated to information for others to contact people in charge of Severance Hall.
As seen in the mockup, to the left there will be a text box with color #99FF33 (green).The text box will
vary in size depending on the amount of contact information provided. In it will be an unordered list
with key people and their contact information. Floated right, instead of having a space request form,
we will have a printable version.
Figure 7: Mockup for contact_information.html
Testimonials-testimonials.html
In this page we will include people’s testimonials about sev.
Each quote will be 20 pt font and will have a box background of color #FFCCFF. Each quote will follow
another and will be centered in the page as seen in the mockup. Below it, we will include a video of testimonials
that the client may want to include.
Figure 8: Mockup for testimonials.html
Ginger-ginger.html
This page is an attribute to Ginger.
It will display a picture of Ginger that is about 330 px X 500 px. Beside it, will be a an “About Ginger”
text box with a background color of yellow. Dimensions of 350px X 300px. For our final use of Javascript,
we will make a madlib below Ginger for fun that our client will create and we will put it on the page accordingly.
Figure 9: Mockup for ginger.html
7. Minimum Requirements
We plan to fulfil the minimum requirements of Javascript
applications in this way:
Kayla Jang will be in charge of implementing:
A Javascript function that will create an interactive madlib for the page
titled "Ginger." This will allow users to input information and for the website
to give back a story with the information inputted by the user. This is similar
to the madlib assignment we completed for homework earlier in the course.
A Javascript function that allows a pop-up window to display a larger
version of the thumbnail picture when clicked on. We will have many pictures
of the dorm rooms and amenities in Severance, so in order to decrease loading time and
not confuse the user, we will use smaller thumbnails, which the users will
be able to click on to enlarge. The resulting larger picture will be more descriptive
and helpful for the user.
Manuela Molina will be in charge of implementing:
A Javascript function that adds decoration to the navbar while the user
hovers over it. This will help the user keep track of where the mouse is and
where he or she is on the page. This hover affect is especially helpful for the
user when looking at the navbar, because the whole navbar is otherwise the same
blue color.
A Javascript that displays different pictures each time the page is reloaded.
This will make the website more lively; we want a good, vibrant contrast to the
black and white background picture.
8. Plan
We will be following the following organizational scheme
to create and store our files and the work division table to
keep track on who creates what and when.
Organizational Scheme
All of the following files will be gathered inside a folder Severance which
will be created in the coding phase of the project.
List of Files and Folders
homepage.html
about.html
history_and_traditions.html
videos_and_photo_gallery.html
room_photos.html
contact_information.html
testimonials.html
ginger.html
images/
background_image.jpg
ginger.jpg
state_of_the_union.jpg
talent_show.jpg
hoco.jpg
Hallways (have not gotten it from client yet)
Dorm Rooms(have not gotten it from client yet)
Laundry Room(have not gotten it from client yet)
Dining Hall(have not gotten it from client yet)
Videos (have not gotten it from client yet)
Form for Space (have not gotten it from client yet)
modularity
navbar.part
styling.css
Work Division and Deadlines
Filename
Description
In charge
Deadline
homepage.html
The homepage
Kayla
April 21
about.html
About Severance and the website
Manuela
April 21
history_and_traditions.html
History and traditions from Severance
Kayla and Manuela
April 14
videos_and_photo_gallery.html and contact_information.html
Videos and photos in one section and contact information of important people in
Severance in the other
Kayla
April 25
room_photos.html and testimonials.html
Pictures of rooms in Severance and testimonials from current residents
Manuela
April 25
gingerk.html
Fun facts about Ginger and madlib about Ginger
Kayla and Manuela
April 28
navbar.part
Kayla and Manuela
April 14
navbarHover.js
A Javascript to decorate the navbar while hovered over
Manuela
April 21
gingerMadlib.js
A Javascript that creates a madlib for Ginger's page
Kayla
April 21
picturesOnreload.js
A Javascript for different pictures on reload
Manuela
April 21
imageSize.js
A JavaScript to show a bigger picture when image is clicked on
Kayla
April 21
styling.css
The CSS file containing all styling for the website
Kayla and Manuela
April 30
Final check
Double checking each file for errors, checking the javascript and css
