Graphical Screen Design

HCILectures.GraphicalScreenDesign History

Hide minor edits - Show changes to markup

Added line 7:

The graphical design presentation is a broad overview, while the CRAP presentation focuses on four graphical design principles: consistency, repetition, alignment and proximity. A future version of these presentations will merge them.

Changed lines 9-10 from:
to:
Changed lines 7-9 from:
  • Graphical screen design

Handouts

to:
Added lines 1-35:

(:title Graphical Screen Design :) One small but still essential component of graphical user interface design concerns the actual layout of elements on the screen. This is the realm of Graphical Design, and this topic presents some (but by no means all!) rudiments of screen layout.

Graphics design is a profession that takes years to learn and apply well. Still, a few simple concepts will help you overcome many graphical design flaws evident in many interfaces and on many web pages.

Overheads

  • Graphical screen design

Handouts

Topics covered

  • CRAP: consistency, repetition, alignment and proximity
  • Grids
  • Relationships between screen elements
  • Navigational cues
  • Economy of visual elements
  • Legibility and readability
  • Imagery
  • Choosing between widgets, and reducing complexity

Required Readings

Principles of Effective Visual Communication for GUI design, p.425-441, In Baecker, R., Grudin, J., Buxton, W., and Greenberg, S., eds (1995). Readings in Human Computer Interaction: Towards the Year 2000. Morgan-Kaufmann.

Additional Readings

  1. Williams, Robin. (1994)
    The Non-Designer's Design Book. Peachpit Press Inc.
    • Introduces graphical design concepts to non-designers. Very readable, huge number of examples.
  2. Mullet, K. and Sano, D. (1995)
    Designing visual interfaces: Communication oriented techniques. Sunsoft Press.
    • one of the best books describing graphical design principles to interface design

In-class teaching tips

I use many examples of actual screen snapshots to illustrate the graphical design ideas of this topic. While most come from the sources below, virtually any screen can be analyzed and even re-designed during class time. I also ask the students to redesign the interface given in the exercise above both before and after this module.