Updated April 18, 2026

Z-Pattern Layout

An eye movement pattern where users scan a page in a Z-shape — across the top, diagonally to the lower-left, then across the bottom — common on visual, minimal pages.

https://
FreeNo signup~1 minute

Z-Pattern explained

The Z-pattern describes how users scan pages that are predominantly visual rather than text-heavy. The eye starts at the top-left (logo/brand), sweeps across the top-right (navigation/CTA), drops diagonally to the bottom-left (secondary content), then sweeps across to the bottom-right (primary CTA or next action). It's the natural scanning pattern for pages with images, minimal text, and clear focal points.

Most landing page hero sections follow the Z-pattern naturally. That's why the standard layout of "logo top-left, nav top-right, headline center-left, CTA button center-right or bottom" works — it aligns with the path the eye already wants to take. The CTA at the end of the Z gets the benefit of being the last thing the eye lands on, which is a natural decision point.

Designing for the Z-pattern

Place your four most important elements at the four "corners" of the Z: brand identity (top-left), navigation CTA or login (top-right), headline and value proposition (center, where the diagonal crosses), and primary CTA (bottom of the visible area). This isn't prescriptive — it's descriptive of what already works.

The Z-pattern applies per-screen, not per-page. As users scroll, each new screenful gets its own Z-scan. This is why alternating image-text sections work well for feature presentations — each one creates a fresh Z-pattern. It's also why full-width images with centered text break the flow: there's nothing at the Z corners to anchor the eye, so the gaze wanders without direction.

Related terms

Related reading

See these concepts in action

Analyze your landing page and get scored across all 8 dimensions.

https://