Layout & concepts

Z-pattern layout

A Z-pattern layout is a series of two-column rows where text and image swap sides on each row, so the eye zig-zags down the page left to right and back.

Also called: Zig-zag layout, Alternating feature rows, Alternating sections, Left-right layout
Spotted on: 45 of 422 homepages
Browse examples: Feature sections →

What is a z-pattern layout?

In SaaS marketing the Z-pattern is the classic feature section: three or four rows, each with a heading, a short paragraph and maybe bullets on one side, and a screenshot or illustration on the other, flipping sides every row. Dittowords runs four zig-zag feature rows; Looka numbers its three alternating rows "01." to "03."; Handhold gives each alternating block a serif heading and a gradient panel opposite.

The name comes from the reading path: across the first row, diagonally down, back across the next. Alternating sides gives each feature a fresh visual start and stops a long column of identical rows from feeling like a list.

It is dependable rather than exciting, and the risk is monotony. Four rows that each say "heading, three bullets, screenshot" blur together. The best versions vary the visuals (a diagram, a quote, a live demo) and keep each row's headline specific.

Commonly used forFeature sectionsProduct tours on the homepageHow-it-works stepsAbout and story pages

When to use a z-pattern layout, and when not to

Use it for

Three to five featuresEach feature deserves its own visual and a paragraph, more than a card allows.
Strong product visualsThere's a distinct screenshot or diagram for every row.
Linear storytellingFeatures build on each other and should be read top to bottom.

Avoid it for

Many small featuresEight or more items become a scroll marathon; a grid or bento layout is denser.
Generic imageryIf every row uses a similar screenshot, alternating sides only hides the repetition.
Mobile-first audiencesOn phones every row stacks into text-over-image, so the zig-zag disappears anyway.

Anatomy of a z-pattern layout

1RowA two-column band, roughly half text and half visual, with generous vertical spacing.
2Text columnOptional eyebrow, headline, short paragraph and a link or bullets.
3Visual columnScreenshot, mockup, diagram or illustration that proves the text.
4AlternationThe visual switches sides on each row to create the zig-zag reading path.

Common z-pattern layout variants

1. Alternating feature rows

The standard: text and screenshot swap sides row by row.

2. Numbered steps

Rows labeled 01, 02, 03 to describe a process.

3. Rows with proof

Each row ends with a quote or metric from a customer, as on Hex's alternating rows with testimonials.

Spotted in our design reviews

Our reviews describe a z-pattern layout on 45 of the 422 SaaS homepages in the catalog. A few of them:

Spend smarter.", three rows alternate text and screenshot sides.
Grafana · Feature rows and integrations
Rows alternate text and video: "I take your meeting notes.", "I draft your inbox.", "I keep your tasks on track." and "I run your calendar."
HireKai · Logo strip and the first-person feature panel
Three alternating rows follow, each pairing a heading with a dark panel.
Bondapp · Problem statements and task-card explainers
The product section stacks four rows with alternating text and mockups.
Antigravity · Four product rows
Three alternating two-column blocks follow, tagged "Inbound Q&A agent", "Demo agent" and "Onboarding agent", each with a serif heading, three short rows, and a yellow, green or orange gradient panel opposite.
Handhold · Stats, demo card and agent blocks
The heading "The easiest way to design and launch your new business" introduces three alternating rows numbered "01.", "02." and "03." in indigo.
Looka · Banner, press logos and three-step walkthrough
Under "One platform for project, resource, and financial management.", four rows alternate sides, each with an icon, heading, three checkmarks and an outlined button.
Teamwork · Proof, AI card and feature rows
Six feature rows alternate sides, each with a grey tag, a heading and a text link such as "Explore Workflows" and "Explore Insights".
Getnudge · About line, feature rows and workflow previews

Often confused with

Z-pattern layout vs. bento grid

A bento grid shows many features at once in tiles of different sizes; a Z-pattern shows them one at a time in alternating full-width rows.

Z-pattern layout vs. feature section

A feature section is the content; the Z-pattern is one of the layouts it can use, alongside grids, tabs and bento.

Frequently asked

What's the difference between the Z-pattern and the F-pattern?

The F-pattern describes how people scan text-heavy pages (down the left, across in places). The Z-pattern describes layouts that deliberately move the eye side to side, which suits image-and-text rows.

Should the first row start with text on the left?

Usually, for left-to-right readers, so the first thing scanned is the heading. Then alternate consistently; breaking the pattern mid-page looks like a mistake.