CS552. User Interface Design

Assignment 5. Icon Design

Size of team: 2 (Team A is Chisholm and Nelson; Team B is Schlatter and Wang)
What's due: Web page following example format, in a file called asst5.html.
When it's due: Midnight on Tuesday, May 19

To Do...

For this assignment, you will design a small collection of icons intended to be used for an online (specifically, a World Wide Web) database that would describe hotel "amenities," or special features and services offered for the convenience of the traveler. The idea is to give potential customers a clear idea of what facilities will be available to them - and do so before they arrive at the hotel so that they can, for example, not bother to pack a hair-dryer. The database will list all hotels, including address, phone number, etc., plus a row of icons symbolizing the amenities available.

Each icon should be prepared as a separate .gif or .jpg file; to view them together (and to turn them in), link them to a tailored copy of the example solution page. The meanings to be associated with each icon are as follows:

  1. in-room hair dryer
  2. in-room mini-bar
  3. in-room coffee-maker
  4. wakeup calls
  5. data port (for computers) on phone
  6. movies on-demand
  7. voice mail
  8. room service (meals or drinks)
  9. dry-cleaning service
  10. exercise room
Do not include a text string naming the concept - your images alone must be enough to convey the right associations. However, you may use up to one "iconic word" (short, simple word conveying a concept that is difficult to express graphically, such as "fax" or "loan") in the icon set.

For purposes of uniformity, make all icons 1 inch wide and 1 inch high; if you use a border, that must be included in the inch. You are also limited to a maximum of four colors (black and white count as colors), although you do not have to use all colors for all icons. Note that the size and color restrictions severely limit the amount of detail you can use for a given icon.

The icons will be evaluated as a set, so pay special attention to recognizability, consistency, and discriminability. Be sure to try out your solutions on different monitors before turning them in, to ensure that they are as "readable" as possible.

Helpful hints... It may be helpful to see how students solved a somewhat similar assignment the last time this course was taught. Their set of associations was:

  1. savings accounts
  2. checking accounts
  3. home mortgage loans
  4. car loans
  5. business loans
  6. credit cards
  7. ATMs
  8. travelers' checks
  9. drive-up services
  10. safe deposit boxes
and their solutions, based on teams of 3 people each, can be viewed online.

You might also want to review the Guidelines Relating to Icon Design.

Collaborating with Others...

You may discuss general ideas with any of your classmates, but each team should develop and describe a unique set of icons.

To Hand In...

Use the hand-in form to submit the location of a directory containing your asst5.html file and the associated .gif or .jpg images.