Exercise: Graphical Redesign

Identify the graphical layout problems in these two screens. Redesign them.
Use the principles of:


navigational cues

visual consistency


relationships between screen elements

legibility and readability



Screen 1:

Screen 2

A Possible Solution

Step 1. Maintain visual consistency with GUI style

Step 2. Construct grid, including navigational layout + white space + legibility

Step 3. Determine relationships, navigational structure
Step 4. Economize by collapsing (two windows into one, trim text)

Step 5. Evaluate by reconsidering actual examples

Step 6. Economize, check imagery