Harvard University VS Oxford University

Team:

Egy Wisnu Moyo (50407301)

Fitria Handayani Siburian (50407954)
Sigit Widiyanto (50407806)

GUNADARMA UNIVERSITY

2010
Metaphor
 Harvard University

This site uses “letterbox” type of design. In this site, the designer chose a
letterbox design to avoid the screen problems of having too much text on the screen.
Typical of letterbox designs, this site uses a navigation bar or clickable graphic that may
be viewed at resolutions of 640x480 and higher without cropping, distortion, or the need
for scrolling.
The navigation bar is also a “rollover”. So that, when the user places the cursor on
top of a “clickable” area on the navigation bar, the graphic changes in order to signal
some kind of navigation cues to the end user. Also, as is typical of letterbox designs, this
site repeats the same design elements throughout the site. Users will find the same
navigation bar using the same rollovers on every screen, and users will find the same
header block with key words (in the same size and type of font) at the top of each screen,
signaling the purpose and main idea of each screen to the users.

 Oxford University

This site uses the inverted-L format. This type of design looks like an “L” that has
been turned upside down and flipped. In this site, a designer might choose to reduce the
size of the logo and name at the top in order to create space for a high-level navigation
bar that will take users to major divisions in a site. Then the table of contents area along
the bottom side on its home page might be used for navigation with the subsections of
each major division.
Clarity
 Harvard University
In this site, the designer collects simple photographs that are in sync with
university’s mission or philosophy. This site attaches some explanatory text for the user
when they highlight the content on the right top navigation bar. The overall design of this
site is clear and intuitive so the user can navigate the content easily.

 Oxford University
This site is quite different with Harvard University’s site. This site does not attach
explanatory text in the content of its home page. The designer must have considered that
this site’s already clear and does not need it. This site also uses the white space in its
content pages to provide symmetry and balance.
Consistency
 Harvard University
The designer might use this design to maintain consistency among the pages or
panels of a multiple-view document. So the users easily can explore this site, know what
should they do and where should they go. For example, in this site, when we choose
“college” on the right top navigation bar, and then choose “Academic Program” on the
left side, we will get the same platform. Columns are applied consistently and rationally
(three-column layout) for overview pages with multiple links. All tables in content pages
use the same layout, colors and fonts.
 Oxford University
In this site, the designer makes sites easier to use, because the users do not have to
learn new tricks as they move around. For example, a user who encounters the “Search”
at the top right on one page will easily moved to different locations on other pages of the
site because the site is internally consistent.
Alignment
 Harvard University
The Harvard University’s site uses left alignment on its screen. Left alignment is
standard for body text in Western documents. Its tone tends to be neutral, objective, and
scientific. The designer maybe used this alignment in this site to balance a large picture
or text block.

 Oxford University
In general, we usually keep one major alignment in a document, such as left,
center, and right. But, in this site, the designer mixed left and center alignment on its
screen. It might be used for screen with high resolution. So, it will be useful for
navigation without causing disorder in serving the information on home page.
Proximity
 Harvard University
Proximity is one of the two most general and powerful grouping information
strategies. Proximity uses Gestalt principle, which attends on closing the objects to each
other that have related. In Harvard’s site, the grouping almost uses proximity than use
similarity. Different with proximity, similarity use an orientation, color, shape, or texture
to make a relation in the grouping.
Many kind methods to make visualization on grouping likes use a group box or
make a list which is the point of list was closed. Harvard sites never use the grouping
box, it always use a list orientation. But if we attend it, the grouping not clear, from the
name or from the method which is used. We can’t assume that use proximity or
similarity.

 Oxford University
Little different with Oxford’s Site, we can see the grouping information is clearer
than Harvard’s site. We can see the point o f list “COLLEGES”, all the point have
relation to the main list, it is about College. In this site also use two kinds of grouping,
similarity and proximity. In the picture below the site uses proximity.
 In the picture below the site use similarity grouping, where the list of links is like
each other. The site also uses the grouping box. It makes clearer on the grouping field,
but not in the font.

Contrast
 Harvard University
We know the Harvard site use modern template, it makes this site is very contrast.
Everything which we want, it is provided. The font is clear, so we can find the important
information in every part. The flying object and slide also make the information more
complete.
Explanation every part is clear, with the fonts and background which relevant.
The important element which appears in the all part is Search. The element is easy to be
found on the corner or bottom page. Why the Login Form doesn’t appear in the all part?
It is caused the Login Form is only used for the authentication.
  Oxford University
Oxford site use white background which often use the silver font or blue. The
situation can make the user confuses about the information. Little font and thin font are
always in the part of pages site. Like Harvard site, Oxford site also use the search engine
on all pages.
Oxford site doesn’t use flying object or text but use slide and many little pictures.
It is very different with the Harvard site. Harvard site is full with flying object. Oxford
site is casual and many thinks which is provided, but sometimes we don’t know the
important.
We often find the ambiguous figure-ground contrast that we can’t easily resolve
what is placed in front of and what is in back.

Economy of Visual Elements

 Harvard University
It is very important thing if we want to develop a website. Economic strategy is
used for consideration on design element. Harvard site is full color. Perhaps it makes the
site runs slowly, but when we click some links or a button to move another page, the site
runs fast.After we attend deeper, we find the answer. The Harvard site uses the minimal
data text. Although the font is big more than Oxford, the information on the page is not as
many as on the Oxford site page.
On the home page, which is every person start to access the site, Harvard Site
uses the Border Font, but on other side it uses little data base and links. Harvard is more
comfortable on menus or subs menu.
  Oxford University
The strategy Harvard site designer is making a home page with many information,
but use the little font, blank page on the back ground and less picture than Harvard Site.
The designer wants to show us the simple site but full information. Little different with
Harvard site, Oxford site uses white background in all subs menu or subs page. Although
many links in the home page will make the site runs slowly.

Coding Techniques
 Harvard University
In the university college usually doesn’t use the video on the front page. So it
makes simple the site. Generally the university site is simple to show the information.
But, different with Harvard site, it uses many color and designs technology. So, it needs
strategy when the developer want to make it runs fast and smoothly.
 Oxford University
Little different with Harvard, Oxford uses the Media library, like Video and
Audio. Blog is also provided by Website. The media to save the huge data also have to be
attended. We know the database in this site can not be doubt.
The developer of the Oxford site uses many strategies to make a simple
visualization an informative. White background is one of the strategy to make the site can
run smoothly and fast.
Typography
 Harvard University
The Harvard University’s site uses all upper case on their university name
“HARVARD UNIVERSITY” and their menu, for example, SCHOOLS, OFFICE, etc.
There is not much text in this site, they replace their text into picture, except the
discourse, story, etc. In their text, they use medium font size and medium space, so it’s
easy to read a lot of text.

 Oxford University
The Oxford University’s uses all upper case on their university name
“UNIVERSITY OF OXFORD” and their menu, for example, NEWS & EVENTS, IN
THEIR FOOTSTEPS, etc. There is much text in this site, because they do not uses a lot
of picture. They use small font size. But the space is medium, so it’s quite easy to read a
lot of text.

Font
 Harvard University
The Harvard University’s site uses 2 different type font. It is Georgia and
Helvetica. There are words use bold and underline together. This site’s uses 3 point size.
The font color is red and the background is black, so the words are clear to read.

 Oxford University
The Oxford University’s uses just one standard font type, it’s Arial. There aren’t
words use bold and italic, only normal and capital words. This site’s uses 1 point sizes.
The font color is white and the background is blue.

Color
 Harvard University
The Harvard University’s site uses black combine grey color at the background.
For the words, this site’s uses white and red color. The background color is darker than
the words, so the words easier to read.

 Oxford University
The Oxford University’s uses blue color only. But, this site uses dark blue, soft
blue and other lightness or darkness color. All the words use white color.
Icon Design
There is not icon in the both web. But, the site replaces the icon into picture although the
pictures haven’t same function with the icon.