Graphical 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.
Graphical 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.
Powerpoint lectures
- Part 1: Contrast, Repetition, Alignment and Proximity is a brief introduction to four basic concepts in graphical design
- Part 2: Analyzing designs and other graphical design concepts explores other graphical design concepts, largely by analyzing and comparing examples
Topics Covered
- CRAP: Contrast, Repetition, Alignment and Proximity
- Consistency
- Relationships and navigational cues
- Organization
- Legibility and readability
- Imagery
- Idioms
- Grids
Suggested Readings
- Non-Designers Design Book, Williams, R., Peachpit Press. 1994
- Introduces graphical design concepts to non-designers. Very readable, huge number of examples.
- Designing Visual Interfaces, Mullet & Sano, Prentice Hall. 1995
- one of the best books describing graphical design principles to interface design. While its examples are now somewhat dated, the principles are still highly relevant
In-Class Activities
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 an exercise both before and after this module.
Additional Readings
- Principles of Effective Visual Communication for GUI design, by A. Marcus, 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.