Z-pattern layout

A Z-pattern layout alternates the placement of text and imagery across successive rows, creating a zigzag rhythm down the page.

Browse more examples →
From the collection

What it means

On a one-page site this often means text on the left and an image on the right, followed by the reverse. It is a compositional convention, not proof that every visitor’s eyes follow a literal Z. The sections still need a clear sequence and useful headings.

Use it in practice

Use alternating rows for a short series of features or steps. Keep the relationship between each image and its explanation clear when the columns stack.

Watch out for

Long sequences of identical alternating rows can become repetitive. Avoid a mobile reading order that separates an image from its text.