Description - MIT

Header and Footer:

The header sits on a red background, so does the footer. The top left of the header features the MIT logo. The letters are in white and in a unique font. The lower part of the "i" is in a gold color. Next to the logo the full name of the school is written out, with today's date sitting beside it. To the far right of the header is a search bar. The box is empty with a white background. There is a button with the text "search" immediately to the right. Above the search box there are 3 radio buttons with the headings "MIT Google", "People" and "Offices". The "MIT Google" is selected as default.

The header is typical of these kinds of websites. A few links, about us, the school's address and phone number, then links to follow the school on a social network. I think it is worthwhile to note that in the far right of the footer there is a link/button in white that says "GIVE TO MIT".

Main Block:

The main block can be visually separated into three columns. The left and right column stay pretty much the same. The center column is one that changes often.

The left column is a directory of links to different pages for the school. These links are all typical of college website. The series of links are stacked on top of each other. The groups have a gold colored header, while the links within the group are white text and separated by a "|". Headers and links in lower case unless a proper noun all lower case, the only thing upper is OpenCourseWare, which is a service that was developed by MIT (known through research). Use of certain symbols in place of conventional ones. "labs+centers" (all run together as well, no spaces) instead of "labs and centers" or "labs & centers. "life@MIT" instead of "life at MIT".

The right column has a structure that remains the same despite the center column changing often. It has two headings stacked on top of each other. "news" and "events", these are in gold, matching the headers on the left side. They are also in lower case. The items below news are short lines about a news article. Clicking the link will take you to that article. The content of the articles matches the theme of technology for the school. An example is the "Quantum computing with light" title. The second header is "events". Again these are short blurbs about a full story behind the link. The content of the story is relative to MIT. Beside the blurb they can feature a word in parenthesis. Either (tomorrow) or (today), all in gold. These mean that the event listed here is either going on tomorrow or today, respectively.

Finally we have the center column. This column changes often. We know this by searching the archives. Today the center column is mostly just a picture. This picture spans across all three major columns. The majority of the picture sits in the middle though, unobstructed by the words on either side. We have what we know as a "black box" sitting on a black background. The actual color of the black box though is an orange-red. This is the same color used in the header and footer. The box is sitting on a reflective surface and we can see its reflection coming across the page. Beside the box in the lower left there is a text box. The background of the text box is a translucent black, with white text. The text inside has the title "today's spotlight". The rest of the text is relevant to black boxes, as well as the story that the box links to, so therefore, the story is relevant to the picture on the page, and therefore MIT.

The page that exists outside of the set parameters is simply grey background. So if you have a wide enough monitor and you are in full screen browser, you will see lots of grey bordering.

Notes - MIT

Consistent use of lower case throughout the site.
Consistent use of symbols like "+" and "@".
The content of the site that doesn't deal with thing like admission and campus life etc... is technical in nature.
We can assume that people here value technology.
The constant changing of the site shows their technical ability? That technology is always changing?
The "give to mit" button is large and has presence within the footer. They are not shy about getting/wanting donations? For a page that doesn't have a ton of content, this made it in.

Description - Rice

Header and Footer:

The header sits on a white background, which matches the overall wrapper for the web page. On the left side of the header there is a crest. The crest has three white owls on it, and two white lines that form a pyramid shape. The background color of the crest is blue. Beside the crest there school name "Rice" is spelled out in large letters. Each letter is the same size, no lower case. Underneath in small black print is the text "Unconventional Wisdom". To the left side of the footer there is a search bar which features a text area for input, and a button with the text "Search". The space in between is blank, white.

The footer of the page, like the header, sits outside of the main wrapper. So it is also white in the background. On the left site there is a physical address, does not specify what for. Below that sits a defined mailing adress, a P.O. box. Still below there sits a mini toolbar with a few different options. The toolbar is enclosed in a format that resembles a standard button, like the "search" button in the header. There are several icons within the "button" A white plus sign on a blue background. Text "Share / Save", a facebook icon with just an "f" with a blue and light blue background, a bird (twitter), another symbol that looks like a circle with lines chasing one another,
and lastly an arrow head pointing upwards sitting on top of an arrow head pointing downwards. When hovering over the "button" a box appears directly above the "button". The box contains 3 tabs. "Share/ Save" with the mention circle with chasing lines to the left, "Email" with an icon of an envelope from the back to the left, and"Bookmark" with an icon of a yellow star to the left.

"Share / Save" Tab
Below the tabs sits a search bar. Inside of the search bar on the far left sits an icon of a magnifying glass. Below the search bar there are two columns of hyper links. The hyper links are to well known social networking sites and social media sites. Each hyperlink has a corresponding icon that sits to the left of the link. Below these two columns there is a button that takes up the length of the box. It has a white background and has a downward facing arrow head in the middle. Hovering the mouse over the button changes the color of the button to grey, leave the cursor over long enough and next to the cursor a text box will appear with the text "Show all". If you click on this button then an extended list of hyperlinks appears. (too much to detail) Finally there is another button below that that is on white background. The text on the button reads "Powered by AddToAny". Hovering over that will do all the same things except the text will ready "Share and Subscribe buttons.

"Email" Tab
Like the previous tab there are two columns of hyperlinks. Each link is a popular email service. There is a grey horizontal rule, then two buttons. One button reads "Any email" and has the same envelope picture to the left. The second button, which sits directly to the right of the previously mentioned button, has 4 icons. Hovering over the button changes the background color to grey, but nothing else. Same "Powered by AddToAny" button at bottom.

"Bookmark" Tab
The only text here is text that instructs you how to bookmark the page in your browser. There is also the same button at the bottom as in the other tabs. (note: this is in firefox. If you click this tab in Internet Explorer you are given a dialog box that prompts you to save the bookmark right then and there.) End of box description

To the other side (the right) of the footer there is a list of links. The links sit in two rows. The top row is a darker shade of grey. Link text - "Community", "News", "Information Technology", "My.Rice", 2nd row - "Contact Information", "Maps + Directions". Below these two rows sits 3 text boxes. Each one has text on the left, with a hyperlink (with reverse colors - instead of grey text on white background, white text on grey background)on the right. They are all grey except for the link in the in the 3rd box. It is white text on blue background.

End of Header and Footer

Navigation Bar and Flash Box:

Directly below the header sits the navigation bar and a flash driven box area. The background color for the navigation bar is blue. White text is used. Headings for the nav bar = "Parents", "Undergraduates", "Grad Students", "Faculty & Researchers", "Staff", "Alumni". Hovering over each element will cause the background color to a darker shade of blue.

The flash box is split into three different sections. By hovering your mouse over a certain section the other two section will shrink in size, allowing the selection currently being hovered over to expand. The order of the sections never changes. Each section has a background image. Also, after a second of having the section expanded, in the bottom left of the section will slowly fade in a hyper link with the text "Know More". The text is white and his a rightward facing arrowhead on the left side.

Section One: Section one's background pictures is that of a group of younger individuals sitting around a set of stairs outside in front of a building. They are all facing a man. The man is older and is dressing more formal that the younger individuals. It is day time and the weather is sunny. Super imposed on the lower right side of the picture is a blue box with white text inside. The header for the text reads "Unconventional Wisdom". (come back and add the actual text?)

Section Two: The background image for this section is that of a bird's eye. To the left and center of the section is a text area with a grey background and white text, header reads "The Centennial Campaign". The text is italicized. Inside of the birds pupil there is a loop of images that plays. The images have a grainy texture to them and they appear to have some sort of sepia-tone filter on them. One image is actually a moving clip. The other images are still, but they slowing zoom in for the few seconds that each image appears in the loop.

Notes


I stopped since I was at about 1,100 words. I think you said it was supposed to be 300-500. Too much detail? Is this detail necessary at some point though? Good? Bad?
There are no comments on this page.
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki