Start with the shape
Read the figure
The numbered parts explain the decisions behind the composition. Read the relationships first; the colors are simply there to make the structure visible.
Arrange a few strong focal points into a clear visual sequence.
- 01Upper entry points
Brand and navigation establish the page context.
- 02Visual connection
The central message or image connects the opening to the next step.
- 03Clear destination
A prominent lower action gives the composition a useful ending.
The dashed line illustrates a possible attention route. Actual reading behavior depends on the content, task, language, and person.
How the pattern works
A Z-pattern is a composition model for a relatively sparse, left-to-right page. The upper row introduces the brand or context, the central area connects the message, and the lower row provides a destination or next action.
The diagonal in the figure connects focal points; it does not require a diagonal element or prove how every visitor will look at the page. Clear copy, contrast, and a relevant action are more important than matching a letter.
Where it fits—and what to consider
A useful choice when
- A page has a small number of important focal points.
- The message can be understood with concise copy.
- There is a clear next step after the introduction.
Be deliberate about
- Dense content does not become simple by adding a diagonal path.
- Repeating competing calls to action can weaken the sequence.
Adapt the relationship, not just the size
A useful mobile layout preserves the task and content order while changing how the regions share space.
On wider screens
Align the upper and lower anchors and use the middle area to connect the message. Treat the indicated route as a composition aid.
On narrower screens
Turn the wide composition into a clear vertical sequence: context, message, then action. Preserve the meaning rather than the diagonal.
Build the structure
- 01Choose the opening context, central message, and final action.
- 02Use alignment and contrast to connect those focal points.
- 03Stack the same content in a useful order on narrow screens.
.page-intro { display: grid; gap: 2rem; }
.top-row, .bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.message { max-width: 42rem; }Adapt the content, spacing, and breakpoints to your page. This example illustrates the structure, not a complete application.
A small design exercise
Try it yourself
Sketch a landing page using only a logo, a headline, one image, and one primary action. Explain the order in which the page introduces those elements.
See a worked example
Inspect a complete page using this pattern, then connect its content regions back to the annotated figure.
Open the example page
Put the pattern into practice
Use the layout prompt as a starting brief, then adapt it to your real content and the decisions covered in this guide.
Read the AI layout prompt
Select the text below and copy it into your AI tool. Replace example content with your own.