Chapter 3

Billboard Design 101

Create Visual Hierarchy

A good visual hierarchy pre-processes the page for the user. It tells them what's important, what's related, and what's nested inside what. Size, prominence, and grouping do the heavy lifting.

More important things are larger, bolder, or in a distinctive color. Logically related things are visually related. Things are nested visually to show what's part of what.

Use Conventions

Conventions are your friend. Users have spent most of their time on other websites. They expect things to work the same way yours does. Shopping carts, search boxes, logos as home links — don't reinvent these.

Innovate when it adds clear value. Follow conventions everywhere else. The novelty of a creative design wears off fast; the frustration of a confusing one doesn't.

Break Pages into Clearly Defined Areas

Users should be able to quickly scan a page and say: "This part is navigation. This is the main content. This is an ad. This is the sidebar." Clearly defined areas let users decide rapidly which parts to focus on and which to ignore.

Keep noise to a minimum. Reduce visual clutter — everything that's not helping the user is hurting them. Make the clickable things obviously clickable.