Harvard Univ. VS Oxford Univ.

By:

Egy Wisnu Moyo

Fitria Handayani Siburian
Sigit Widiyanto
Graphic Design
 Look and feel interface

Graphic Design Principles

 Metaphor Proximity  Typography
 Clarity  Contrast  Fonts
 Consistency  Economy of Visual Elements  Color
 Alignment  Coding Techniques  Icon Design
Metaphor

Harvard University’s site

• Uses “letterbox” type of design
• Uses a navigation bar or clickable graphic
Metaphor

Oxford University’s site

• Uses the inverted-L format
• Uses the table of contents area along the bottom side on its home
page
Clarity

HarvardUniversity’s
Harvard University’ssite:
site
• Collects simple photographs
• Attaches some explanatory text for the user
Clarity

Oxford
Oxford University’s
University’s site
site:
• Does not attach explanatory text in the content of its home page
• Uses the white space in its content pages
Consistency

HarvardUniversity’s
Harvard University’ssite:
site
• Columns are applied consistently and rationally
• All tables in content pages use the same layout and fonts.
Consistency

Oxford
Oxford University’s
University’s site
site:
• The site is internally consistent
• All tables in content pages use the same layout, color and fonts
Alignment

HarvardUniversity’s
Harvard University’ssite:
site
• Uses left alignment on its screen
• Balance a large picture or text block
Alignment

Oxford
Oxford University’s
University’s site
site:
• Mixed (left and center) alignment on its screen
• Useful for navigation
NEXT SPEAKER
Proximity

HarvardUniversity’s
Harvard University’ssite:
site
• Never use the grouping box
• Always use a list orientation
Proximity

Oxford University’s
Oxford site:
University’s site
• The grouping information is clearer than Harvard’s site
• Uses two kinds of grouping, similarity and proximity
• Uses Grouping box for some pages
Using Grouping Box
Contrast

HarvardUniversity’s
Harvard University’ssite:
site
• The font is clear
• Explanation every part is clear
• Fonts and background are relevant
• Uses search engine
Contrast

OxfordUniversity’s
Oxford University’ssite:
site
• Uses white background and often use the silver font or blue
• Doesn’t use flying object or text, use slide and many little pictures
• Uses search engine
Economy of Visual Elements

HarvardUniversity’s
Harvard University’ssite:
site
• Full color
• Uses the minimal data text, uses the Border Font
• Comfortable on menus or subs menu
Economy of Visual Elements

Oxford
Oxford University’s
University’s site
site:
• Uses the little font, blank page on the back ground and less picture
• Uses white background in all subs menu or subs page
Coding Techniques

HarvardUniversity’s
Harvard University’ssite:
site
• Uses many color and designs technology
• Not uses Marque text but uses many Slides.
• Needs strategy when the developer want to make it runs fast and
smoothly
Coding Techniques

Oxford
Oxford University’s
University’s site
site:
• Uses the Media library (Video and Audio). Blog page is also provided
• White background is one of the strategy to make the site can run
smoothly and fast.
• Link mark, Video, and RSS (Link to same tab and to another page)
• Uses many strategies to make a simple visualization and informative
NEXT SPEAKER
Typography

Harvard
HarvardUniversity’s
University’ssite:
site
• Uses all upper case on its name and its menu
• Uses medium font size and medium space
• Easy to read a lot of text
Typography

Oxford
Oxford University’s
University’s site
site:
• Uses all upper case on its name and its menu
• Uses so much text , use small font size
• The space is medium, so it’s quite easy to read a lot of text
Fonts

HarvardUniversity’s
Harvard University’ssite:
site
• Uses two different type of font, Georgia and Helvetica
• Font color is red, background is black
Fonts

OxfordUniversity’s
Oxford University’ssite:
site
• Uses one standard type of font, Arial
• Font color is white, background is blue
Color

Harvard
HarvardUniversity’s
University’ssite:
site
• Uses black combine grey color at the background
• Uses white and red color for the letter
Color

Oxford
Oxford University’s
University’s site
site:
• Uses dark blue, soft blue and other lightness or darkness color
• Uses white color for the letter
Icon Design

Both site:
• There aren’t icon in the both web
• the two of them replace the icon into picture