From bits to a comp

Ever since I saw the concept of the Page Description Diagram I liked the idea. A simple way of sorting out what a page has to do without any other distractions.

Actually putting one together is a bit harder than I first thought. Where do you start?

Then Ryan Singer from 37 Signals penned An Introduction to Using Patterns in Web Design. Bingo – someone has joined the dots for me!

  1. Make a list of your “bits”- everything on the page and anything that the visitor might have to do
  2. Group them where they share some commonality
  3. Prioritise them (Hey, the contents of a Page Description Diagram!)
  4. Design each chunk, and then put those chunks together (Hey, a wireframe!)
  5. Then design away (Hey, a comp!)

Following Ryan’s steps would make it difficult to end up with a comp that didn’t achieve what it was supposed to in terms of site goals.

Not impossible, mind you, but difficult.