Step 5: Determine layout using boxes
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.
References
- Text Scanning Patterns: Eyetracking Evidence | Nielsen Norman Group