6.831 | Spring 2011 | Graduate

User Interface Design and Implementation

In-Class Activities

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, but it doesn’t particularly matter which browser you use.

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? (For example, the page-title field uses three variables: hue: blue, size: large font, position: first line of result. Write your findings on a whiteboard.

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?

Alignment

Go to Google Advanced Image Search (Google, then Images, then Advanced Image Search). How are the form controls aligned vertically? (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? (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.)

Course Info

Instructor
As Taught In
Spring 2011
Level