The Z-pattern is a layout principle that arranges the most important elements along a Z-shaped path that the eye tends to follow on simple, sparse pages: across the top from left to right, diagonally down to the lower left, and across the bottom to the right. In layout & grids, it is used to place a logo, headline, supporting visual and call to action at the points where attention naturally lands.
The pattern reflects reading habits in left-to-right languages and works best on pages with little text and a clear single goal, such as landing pages, posters, advertisements and hero sections. It is a design heuristic rather than a law, and it should be combined with visual hierarchy instead of replacing it.
How the Z-pattern guides the eye
Readers of left-to-right scripts start in the top-left corner, which is the strongest entry point on most layouts. With no dense text to hold them, they sweep across the top, then make a diagonal jump toward the lower left, and finish with a horizontal scan along the bottom. The end of that path, the lower-right corner, is the natural terminal area where a decision is expected.
The four focal points of the pattern are summarized below with their usual content.
| Point | Position | Typical content |
|---|---|---|
| Point 1 | Top left | Logo or brand mark |
| Point 2 | Top right | Navigation, sign-in or secondary action |
| Point 3 | Bottom left | Supporting message, benefits or visual |
| Point 4 | Bottom right | Primary call to action |
| Diagonal | Center of the page | Hero image or headline that pulls the eye down |
The diagonal is the least controlled part of the path. Designers often reinforce it with an image whose subject faces or points toward the lower half, a line of perspective, or a headline that spans the center, so that the movement toward points 3 and 4 feels intentional.
Z-pattern compared with other scanning patterns
The Z-pattern describes scanning of sparse layouts. On text-heavy pages, eye-tracking studies have documented other behavior, most notably the F-pattern, in which readers scan the first lines fully and then only the beginnings of subsequent lines. Choosing the right model depends on content density and page purpose.
| Pattern | Content type | Eye movement | Design response |
|---|---|---|---|
| Z-pattern | Sparse, single goal | Top line, diagonal, bottom line | Place CTA at the end of the path |
| Zigzag pattern | Alternating content blocks | Repeated Z across sections | Alternate image and text sides |
| F-pattern | Dense text, search results | Horizontal sweeps, then left edge | Front-load headings and key words |
| Layer-cake pattern | Well-structured articles | Headings first, body skipped | Write descriptive headings |
| Gutenberg diagram | Evenly distributed text | Diagonal from top left to bottom right | Key content in strong fallow areas |
A long landing page often uses a zigzag layout, which is effectively the Z-pattern repeated: each section alternates image and text sides, so the eye travels in a series of Z shapes down the page. This keeps a steady rhythm without forcing every element into one screen.
Building a Z-pattern on a grid
The Z-pattern is easiest to execute on a 12-column grid, where the top bar spans all columns, the hero area divides into two halves, and the bottom row aligns the supporting message to the left columns and the call to action to the right. Generous white space is essential, because clutter competes with the four focal points and breaks the path.
| Element | Recommended treatment | Reason |
|---|---|---|
| Header bar | Logo left, short navigation right | Defines the top stroke of the Z |
| Hero headline | Large, spanning or angled toward lower left | Drives the diagonal movement |
| Supporting content | Short benefits list or visual at lower left | Anchors the third focal point |
| Call to action | High-contrast button at lower right | Sits at the natural endpoint |
| White space | Ample margins and gutters | Keeps the path free of distractions |
On responsive layouts, the two-dimensional Z collapses into a single column on small screens. The pattern then becomes a vertical sequence, so the content order in the source must still lead from brand to headline to benefits to call to action, and the button should not be pushed far below the first screen.
Right-to-left scripts and cultural adaptation
In right-to-left languages such as Arabic and Hebrew, the scanning path is mirrored and forms a reversed Z. The logo moves to the top right and the primary action to the lower left. Interfaces that support both directions should mirror the layout through logical properties rather than maintaining two separate designs.
For vertical writing systems or bilingual layouts, the pattern is less predictable. In these cases, visual weight, contrast and size become the main tools for directing attention, and usability testing is the only reliable confirmation.
Limitations and common mistakes
The Z-pattern is a simplified model, not a guarantee of how every user looks at a page. Strong images, faces, motion and color contrast override default scanning, and returning users often jump directly to familiar targets. The pattern should therefore be treated as a starting composition, refined by hierarchy and validated with analytics or eye tracking.
| Mistake | Symptom | Fix |
|---|---|---|
| Z-pattern on dense text | Readers ignore the bottom row | Switch to F-pattern principles |
| Weak call to action | Path ends without a decision | Increase size, contrast and white space |
| Cluttered center | Eye stops before the diagonal ends | Remove competing elements |
| Forcing the shape | Awkward, artificial composition | Prioritize hierarchy over geometry |
| Ignoring mobile order | CTA appears too late on phones | Reorder content for one column |
A non-technical view
The Z-pattern describes how people glance at a simple page. Their eyes move across the top, then slide diagonally down, then move across the bottom. The path looks like the letter Z.
Designers use this habit to put things in the right places. The name or logo goes at the start. A strong picture or headline sits in the middle. The main button goes at the end of the path, right where the eye finishes. It is like arranging a shop window so passers-by notice the sign first and the door last.
A concrete example
A small software company designs a landing page for a webinar. The page uses a 12-column grid: the logo sits top left, a short link to past recordings sits top right, and a large headline with a speaker photo runs diagonally through the center, with the speaker looking toward the lower left.
The lower left holds three short benefits, and the lower right holds a high-contrast Register now button surrounded by white space. On phones, the same content stacks in that order, with the button visible after one short scroll. Compared with the previous layout, which placed the button beneath a long paragraph, the redesigned page produces a clearly higher registration rate in an A/B test over two weeks.