CS552. User Interface Design
Assignment 5. Icon Design
|Size of team:
||2 (Team A is Chisholm and Nelson; Team B is Schlatter and Wang)
||Web page following
example format, in a file called
|When it's due:
||Midnight on Tuesday, May 19
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:
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.
- in-room hair dryer
- in-room mini-bar
- in-room coffee-maker
- wakeup calls
- data port (for computers) on phone
- movies on-demand
- voice mail
- room service (meals or drinks)
- dry-cleaning service
- exercise room
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.
It may be helpful to see how students solved a somewhat similar
assignment the last time this course was taught. Their set of
and their solutions, based on teams of 3
people each, can be viewed online.
- savings accounts
- checking accounts
- home mortgage loans
- car loans
- business loans
- credit cards
- travelers' checks
- drive-up services
- safe deposit boxes
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.