While I might use some different language today, this technique I posted in 2004 (inspired by Alexander) is still a major help when I’m designing a UI with many elements to juggle. The reason I come back to it is that it helps me design with language first instead of empty templates. Too often a design starts top-down with empty content areas (maybe a main column and a sidebar) and then we fill those boxes in until its “done.” Filling in the boxes would work fine, except having a bunch of stuff on the page doesn’t mean we served the design goals.

Here’s a refresher:

  1. List all the things a screen should do. What should the customer be able to accomplish? What information are you sure should be displayed? Which affordances are necessary for customers to start a process or reach a goal? Label these things with numbers.
  2. Look for any numbered items that relate to each other, conceptually or spatially. Label these groups of numbers with a letter.
  3. Sketch a design (or multiple designs) for each number or letter group.
  4. Combine the individually sketched blocks into a unified design. Let the pieces fall together into a whole.

And don’t forget, the next step isn’t a polished wireframe. It’s code you can click on!