Winter 2000
Art 435/SI664, Introduction to Visual Interface Design
MW 8-11, Rm. 1054 Art & Architecture Building
The graphical user interface revolutionized computing by utilizing a rich visual information layer to mediate the interaction between a person on the one hand, and a computer system on the other. By supporting this dialog, the interface makes it possible for people to take advantage of computer processing power with relative ease. Whether using an ATM, surfing the Web, or composing a document in a word processing program, the interface is the medium through which one is able to engage with the underlying computer system.
While the GUI is one compelling example of a visual information display that can benefit from consciously applied graphic design, many other examples exist. Because knowledge is increasingly represented and disseminated through a wide range of visual techniques--some dynamic, some static, some in print, some onscreen--familiarity with the principles of graphic design has become essential for visual literacy in the late 20th century.
Through hands-on exercises and group critiques, this studio course will introduce basic graphic design skills in typography, layout, color, and symbol development to students with no prior training in art or design. It will also provide the opportunity to apply these skills in individual and group projects that focus on graphic design in the interface.
By the end of this course, you will have gained practical skills in basic graphic design and visual interface design, paper and digital prototyping, usability testing, and iterative design.
| Note: Readings and assignments are due the class following the assignment date. | |
| Week 1: Introduction to Graphic Form & Meaning | |
| WED 1.5 | Syllabus review. Basic exercises in graphic composition focusing on line, shape, and placement. Discussion of gestalt principles. |
| Homework | Create 2 visual studies in black and white that express the words provided (1 study per word). Your studies should utilize black elements (created from ink or cut black paper) within a white 8" square. You may not complete this assignment on the computer. |
| Readings | Mullet & Sano. Part 1, Introduction Staples, Seeing is Believing Crampton-Smith & Tabor, The Role of the Artist-Designer
|
| Week 2: Visual Structure | |
| MON 1.10 | Critique of homework exercise. In-class page layout exercise focusing on the use of grids, margins, and columns as structuring devices. |
| Homework | Create another version of your page, incorporating critique feedback and information from readings. |
| Readings | Mullet & Sano. Part 4, Organization and Visual Structure |
| WED 1.12 | Critique of page layout homework exercise. In-class layout exercise focusing on visual organization for the screen, including control representation & grouping. |
| Homework | Create another version of your screen layout, incorporating critique feedback. |
| Readings: | Mullet & Sano. Part 2, Elegance and Simplicity, and Part 3, Scale, Contrast and Proportion |
| MON 1.17 | MLK day, no class held |
| Week 3: Typography & Intro to Macromedia Director |
|
| WED 1.19 | Critique of screen layout exercise. Typography lecture focusing on historical development of Western typefaces, typeface families, type classification and identification, letterform characteristics, contemporary typography, technical considerations for use of type on computer screens. |
| Important: | From MON 1.24 to WED 2.23, and again on 4.12 we will meet in the Media Union Macintosh training room. |
| MON 1.24 | Introduction to Macromedia Director as a prototyping & painting tool. |
| Readings | Persidsky. Visual Quickstart Guide: Director 7 for Macintosh & Windows
|
| Week 4: Intro to Macromedia Director (cont'd.) & Designing "Versions" |
|
| WED 1.26 | Screen layout exercise in Director. Practice using Director's paint tools, stage, and score to layout multiple versions of a design. |
| MON 1.31 | Screen layout exercise in Director observing different sets of design parameters. You will create an alternate version of Monday's design. |
| Readings | Mullet & Sano. Part 5, Module and Program
|
| Week 5: Sequencing |
|
| WED 2.2 | Pick one version of the 2 designs you completed last week and apply its "visual language" to a successive screen, paying attention to the attributes of that language and the way in which you re-apply them successively. |
| MON 2.7 | Continue working on your screen pair. If you complete your design quickly, create another version that utilizes a different visual language. |
| Week 6: Color |
|
| WED 2.9 | Lecture on the use of color in information design. Color models and attributes: hue, saturation, and value. The use of color in information layering. Computer color space and considerations in designing with color for the screen. |
| MON 2.14 | Identify opportunities for the application of color in your screen pair. Apply your color strategy to the design. |
| Readings: | Mullet & Sano. Part 6, Image and Representation |
| Week 7: Symbols & Icons | |
| WED 2.16 | Lecture on the use of symbols in graphic design. The differences between symbols, pictograms, logotypes, and icons as types of pictorial signs. Representing things vs. ideas. Branding & identity as communicated through visual signs. Developing simple symbols. Icons in software design. |
| MON 2.21 | Identify opportunities for the application of symbols or icons in your screen pair. Develop and incorporate them into your design. Make any adjustments necessary to reconcile the use of color in your icons/symbols, and the use of color elsewhere in your design. |
| Week 8: Design Review & Intro to the Language of Design | |
| WED 2.23 | Critique of screen pair projects. (Projects will be graded & grades returned to you after spring break.) |
| Readings | Norman. Chapters 1-3 & 5 Rheinfrank & Evenson., Design Languages |
| SPRING BREAK 2.26 to 3.5 | |
| MON 3.6 | Discussion on design in the context of usage and perception. A look at the ways knowledge is encapsulated in the world of designed objects, both virtual and tangible, in 2 and 3 dimensions. Introduction to the concept of "affordances." Understanding the symbolic dimensions of visual representation. Critique of selected objects from the standpoint of design semantics & syntax. Visual "style." |
| Homework | Choose a designed object and write a brief (3 pages or so) paper on its visual language. Draw conclusions on the success or failure of the design based on the semantic clarity of the object's affordances and the suitability of the visual language for the intended audience. If possible, provide me with the object; if not, you must include sufficient illustrations in your paper so that I can understand the correspondence between any verbal descriptions and the object itself. Due in one week, next Monday. (Feedback and grades provided the following week.) |
| Weeks 9-14: Group Project: Creating an ATM Interface | |
| WED 3.8 - WED 4.5 | The rest of the term will be spent on a group project that provides an opportunity to apply your visual design skills to a practical problem while introducing tools and techniques for design iteration, including paper prototyping and usability testing. The project will culminate in formal presentations implemented in Director with accompanying presentation boards. Refer to the project brief for more details on the development sequence. |
| Week 15: Presentations |
|
| MON 4.10 | Review and final assembly of presentation materials. |
| WED 4.12 | Final presentations. (IMPORTANT: class meets in the Media Union Macintosh Training Rooms) |
| Grading | |
| 75% of your grade will be based on your 3 main assignments (25% per assignment): your individual project consisting of the design of a pair of related screens; your paper analyzing a designed object; and your group ATM project. The remaining 25% will be based on your attitude, class participation (especially during critiques) and general performance on in-class exercises. Please keep in mind that as a studio course, the form my feedback takes is primarily in my verbal feedback (both formal and informal) regarding your work. Grades serve to "synopsize" that information. If at any time you have any questions or concerns regarding your performance or grade-to-date, please let me know. | |
| Bibliography | |
| *Crampton-Smith, Gillian and Philip Tabor. "The Role of the Artist-Designer." In Winograd, Terry. Bringing Design to Software. New York: ACM Press, 1996: 37-57. *Gomoll, Kathleen. "Some Techniques for Observing Users." In The Art of Human-Computer Interface Design, edited by Brenda Laurel. Reading: Addison Wesley, 1990: 85-90. Mullett, Kevin and Sano, Darrell. Designing Visual Interfaces. Mountain View, CA: Sunsoft Press, 1995. *Norman, Donald A. "Affordance, Conventions, and Design." Interactions (May/June 1999): 38-43 Norman, Donald A. The Design of Everyday Things. New York: Basic Books, Inc., 1988. **Persidsky, Andre. Visual Quickstart Guide: Director 7 for Macintosh & Windows. Berkeley: Peachpit Press, 1997. *Rettig, Marc. "Prototyping for Tiny Fingers." Communications of the ACM 37, no. 4 (April 1994): 21-27. *Rheinfrank, John and Shelley Evenson. "Design Languages," In Bringing Design to Software, edited by Terry Winograd. New York: ACM Press, 1996: 63-80. *Staples, Loretta. "Seeing is Believing." Interactions (May/June 1997): 68.
* coursepack | |
| Materials | |
|
8-1/2 x 11" bond paper (xerox paper) black construction paper glue stick (regular or repositionable) scissors OR x-acto knife, cutting mat & ruler (14 - 18 inches, stainless steel with a cork backing)
| |
Top
©2000 Loretta Staples