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.
- CRAP: consistency, repetition, alignment and proximity
- Relationships between screen elements
- Navigational cues
- Economy of visual elements
- Legibility and readability
- Choosing between widgets, and reducing complexity
- Principles of Effective Visual Communication for GUI design,
p.425-441, In Baecker, R., Grudin, J., Buxton, W., and Greenberg, S., eds (1995).
Human Computer Interaction: Towards the Year 2000.
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
- Designing visual interfaces: Communication
oriented techniques. Mullet, K. and Sano, D. (1995) Sunsoft
- one of the best books describing graphical design principles to
- The Non-Designer's Design Book. Williams, Robin. (1994) Peachpit
- Introduces graphical design concepts to non-designers. Very readable,
huge number of examples.