Zoning

Zoning is a design step that consists of representing a page or a screen as simple blocks (without graphic detail) to define the placement and hierarchy of the main content areas: header, navigation, main content, secondary content, footer. It is an intermediate step between information architecture (which contents exist) and the wireframe (how these contents are represented in detail).

Zoning is more macro: it defines the main areas and their relative positioning, without going into the detail of the components. The wireframe is more precise: it represents the specific components, the labels, the text hierarchy levels and the detailed layout of the elements. You do the zoning before the wireframe to validate the overall structure of a page before investing in the details.

So as not to lock yourself too early into detailed decisions. Zoning lets you quickly test different organisations of a page (sidebar on the left or on the right, main content full-width or next to secondary content) and validate them with stakeholders without having to produce complete wireframes. It is a light step that avoids redoing several mockups because the basic structure was problematic.

Pen and paper for quick zonings in a workshop. Figma, FigJam or Balsamiq for shareable digital zonings. Zoning does not need to be tidy: what matters is that the areas are clearly delimited and their content identifiable (a rectangle with « main navigation » inside is enough). The tool must make quick changes easy, not produce a polished document.

Yes, and it is particularly useful for deciding what appears above the fold on mobile (the area visible without scrolling) and what is accessible by scrolling. On mobile, the space constraint forces sharper editorial choices than on desktop: zoning helps prioritise the critical contents before getting lost in the layout details.