The next step is to identify content zones. It will help you to create a clear visual hierarchy for every type of page you've defined earlier in steps one and two. At this stage, don't focus on the wireframe text. Instead, think about how to arrange content blocks for fast scanning. Plan the layout according to how you want your users to process the information and start by drawing boxes on the canvas.

For each type of responsive wireframe template you define, you need to create zone diagrams. Zones are boxes and labels that indicate the types of content and components that will appear on a page.^[1] These diagrams show zones of content and functional elements on the page.