Zoning

Zoning is coarser. It sets out the main areas and their relative position, without going into detail. The wireframe specifies the components, the labels and the text hierarchy. Zoning comes first, to validate the structure of a page before investing in the detail.

So as not to lock yourself too early into detailed decisions. Zoning lets you quickly compare several organisations of the same page, secondary content on the left or on the right, full width or in a column, and put them to stakeholders without producing complete wireframes. It is a light step that avoids having to redo several mockups because the basic structure was problematic.

Paper and pencil first. They are quicker, they can be thrown away without regret and they suit workshops as much as producing several directions in parallel. A digital whiteboard takes over as soon as the zoning has to be shared, annotated or kept. What matters is that the areas are clearly delimited and their content identifiable, a rectangle labelled « main navigation » is enough. There is no need to bring out a full mockup tool.

Zoning suits any interface, a touchscreen kiosk, a vehicle dashboard, a cockpit, a tablet, an application or a website. On mobile it is even particularly useful, since the space constraint forces you to decide earlier what appears without scrolling and what comes next. Templates in the various formats exist for running these exercises with users.