Transcript
Harvard University VS Oxford University
Team: Egy Wisnu Moyo Fitria Handayani Siburian Sigit Widiyanto (50407301) (50407954) (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.