Your Names:

6.831 • User Interface Design and Implementation

Massachusetts Institute of Technology
Department of Electrical Engineering and Computer Science
Fall Semester, 2006

AC10: Graphic Design

The purpose of this activity is to learn more about graphic design techniques and concepts: the squint test, simplicity and contrast, visual variables, and Gestalt principles. You'll need a web browser to do this activity.

1 Information Display

Do a search in Google and look carefully at the list of search results. First, use the squint test to look at the whole page. What parts of the design stand out clearly?

Now look closely at the individual search results. Each result consists of several data fields. How is each data field displayed using visual variables?

Field Appearance
Page title Hue: blue; size: large font; position: first line

2 Contrast

Now go to www.drudgereport.com. Use the squint test to look at the whole page. What parts of the design stand out clearly?

What are the major sections of the Drudge Report, and how might you use visual variables to improve their contrast?

3 Alignment

Go to Google Advanced Search (www.google.com, then Advanced Search). How are the form controls aligned vertically? Sketch the alignments below. (It may help to resize the window so you can watch how the controls move around.) What alignment compromises were made, and why?

Now look carefully at the horizontal alignment between labels and textboxes. Where are text baselines correctly aligned, and where are they not? Sketch some examples below. (It may help to resize the font of your browser, so that you can see the baselines more clearly; in Firefox, use Ctrl + and Ctrl - to resize the font.)