<?xml version="1.0" encoding="utf-8"?>

Step 5: Determine layout using boxes

Step 5: Determine layout using boxes Bad Practice
Step 5: Determine layout using boxes Best Practice

In the early stages of the wireframing process, your goal is to create a clear visual hierarchy. For now, don't focus on the content. Instead, focus on the way you want to present it — namely, the layout and structure.

When planning the layout, think about how you want users to process the information and in what order. Draw content boxes on the canvas and arrange them based on their priority. Place important information where users are more likely to look. The F-shaped pattern works for both desktop and mobile screens, but there are also other common scanning patterns you can try out.[1] Generally, though, the top and left sides of the screen get more attention.

Improve your UX & Product skills with interactive courses that actually work