1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8

Chapter 3 of 8 · Create

Sketching and wireframes

Ugly, fast and many: thumbnails, crazy eights and wireframes before any pixels.

The first idea is rarely the best one — it is just the first. Sketching is the cheapest way to get past it. Pen, paper, a timer.

Crazy eights

Fold an A4 sheet into eight panels. Set a timer for eight minutes and draw one idea per panel, one minute each. No erasing, no polishing. You will run out of obvious ideas by panel four; panels five to eight are where it gets interesting.

Thumbnails for layouts

For posters, pages and packaging, draw small thumbnails — about the size of a stamp. At that size you can only see the big shapes: where the eye lands first, how much space there is, what is heaviest. Fix that before you worry about fonts.

Wireframes for screens

A wireframe is a grey-box drawing of a screen: what is on it, in what order. Keep it grey on purpose — the moment you add colour, people start commenting on colour instead of structure.

  • One wireframe per key screen (home, list, detail, checkout).
  • Real headings and button labels, not lorem ipsum.
  • Draw the mobile version first; it forces priorities.