Z-Pattern

A layout pattern following the way eyes scan a sparse page — left to right, then diagonally down and across — used to place key elements along the path.

Why it matters

On a sparse page the eye traces a Z — across the top, diagonally down, across the bottom — which is why so many landing pages put the logo top-left, a call to action top-right, and the big button at the bottom-right exit. It is a layout tool for pages with little to read; dense content switches people into F-shape-style scanning instead. Use it to place the few things that matter along the path the eye was already going to take.

See it

Logo where the eye enters, call to action where it exits — the layout just furnishes the path the eye already takes.

Related terms

Go deeper in Learn UX

Ask your assistant

Define "Z-Pattern" using uxspot.

Works in Claude, Cursor or any MCP client — connect the uxspot MCP.

Think it stuck? A 20-second round of Spot Check will tell you.