Interface Design: Week 1

Topics: Basic Interface Vocabulary, Icons and the Graphical User Interface
Lab / In-class activity: Everyday Object Analysis, Creating Small Graphics from Photographic Images
Homework due next week: Web Interface Graphics: Icons & Widgets

Inspiration: Susan Kare, Pixture Studio
HW Link: GUI widgets wikipedia

Assignment #1: Due Week 2
Web Interface Graphics & Widgets:
The purpose of this exercise is to collect and compare interface graphics, and note the Unity, Graphic Quality, and Conceptual Representation in the graphics.

Part 1: Widgets: Research
Research the widget assigned to you in class.
Find 3 examples of that widget used in different software or web situations.
Bring a screenshot of each situation, be prepared to show the class your examples next week.

Part 2: Collect at least 50 Web Interface Graphics
While going about your usual internet business, locate at least one website that uses interface graphics.
Examples of interface graphics: icons, buttons, tabs, navigation menu graphics, info graphics, custom widgets or cursors, etc..
Take screenshots of the site, and isolate the interface graphics into one document (copy and paste).

Collect 50 Graphics total:
- If you collect icons from more than one site, separate them into groups.
- If a graphic is repeated, such as a tab graphic, it counts only once (so a row of tabs counts as one graphic).

Part 3: Analysis
Answer the following questions:
2-3 sentences each, use complete phrases with correct grammar.
Turn in as Word, RTF or TXT file, or on paper.

1) Unity: Do the icons share a similar style with the others from the same site? Describe the styles used.

2) Graphic Quality: Are the graphics easy to recognize? Why or why not?

3) Conceptual Representation: Do you understand what the icons mean? Did the artist choose good symbols to represent the different functions? Why or why not?

4) What would you do to improve the icons on this site? If nothing, then what makes them so perfect?

Grading: 10 points total

__ (3) Widgets: Find 3 examples of the widget assigned to you in class.

__ (2) Collect screenshots of Web Interface Graphics (turn in as individual JPG or PNG files)

__ (3) Isolate 50 interface graphics in a separate document (JPG or PNG file)

__ (2) Analysis: Questions are answered completely, (Word, RTF or TXT file, or on paper).

__ Total out of 10 points