-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
1/29
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
2/29
Graphic Design
Look and feel interface
Graphic Design Principles
Metaphor
Clarity
Consistency Alignment
Proximity
Contrast
Economy of Visual Elements Coding Techniques
Typography
Fonts
Color Icon Design
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
3/29
Metaphor
Uses letterbox type ofdesign
Uses a navigation bar or clickable graphic
Harvard Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
4/29
Metaphor
Uses the inverted-L format
Uses the table of contents area along the bottom side on its
home
page
Oxford Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
5/29
Clarity
Harvard Universitys site:
Collects simple photographs
Attaches some explanatory text for the user
Harvard Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
6/29
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
7/29
Consistency
Harvard Universitys site:
Columns are applied consistently and rationally
All tables in content pages use the same layout and fonts.
Harvard Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
8/29
Consistency
Oxford Universitys site:
The site is internally consistent
All tables in content pages use the same layout, color and
fonts
Oxford Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
9/29
Alignment
Harvard Universitys site:
Uses left alignment on its screen
Balance a large picture or text block
Harvard Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
10/29
Alignment
Oxford Universitys site:
Mixed (left and center) alignment on its screen
Useful for navigation
Oxford Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
11/29
NEXT SPEAKER
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
12/29
Proximity
Harvard Universitys site:
Never use the grouping box
Always use a list orientation
Harvard Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
13/29
Proximity
Oxford Universitys site:
The grouping information is clearer than Harvards site
Uses two kinds of grouping, similarity and proximity
Uses Grouping box for some pages
Oxford Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
14/29
Using Grouping Box
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
15/29
Contrast
Harvard Universitys site:
The font is clear
Explanation every part is clear
Fonts and background are relevant Uses search engine
Harvard Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
16/29
Contrast
Oxford Universitys site:
Uses white background and often use the silver font or blue
Doesnt use flying object or text, use slide and many little
pictures
Uses search engine
Oxford Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
17/29
Economy of Visual Elements
Harvard Universitys site:
Full color
Uses the minimal data text, uses the Border Font
Comfortable on menus or subs menu
Harvard Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
18/29
Economy of Visual Elements
Oxford Universitys site:
Uses the little font, blank page on the back ground and less
picture
Uses white background in all subs menu or subs page
Oxford Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
19/29
Coding Techniques
Harvard Universitys 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
Harvard Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
20/29
Coding Techniques
Oxford Universitys 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
Oxford Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
21/29
NEXT SPEAKER
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
22/29
Typography
Harvard Universitys 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
Harvard Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
23/29
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
24/29
Fonts
Harvard Universitys site:
Uses two different type of font, Georgia and Helvetica
Font color is red, background is black
Harvard Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
25/29
Fonts
Oxford Universitys site:
Uses one standard type of font, Arial
Font color is white, background is blue
Oxford Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
26/29
Color
Harvard Universitys site:
Uses black combine grey color at the background
Uses white and red color for the letter
Harvard Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
27/29
Color
Oxford Universitys site:
Uses dark blue, soft blue and other lightness or darkness
color
Uses white color for the letter
Oxford Universitys site
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
28/29
Icon Design
Both site:
There arent icon in the both web
the two of them replace the icon into picture
-
8/14/2019 Human-Computer Interaction (Graphic Design part.2)
29/29
