liveBook · Manning

Z-pattern

As explained in Design for Developers

The Z-pattern is a page-scanning pattern in which the eyes move across key elements along a path resembling the letter Z, typically on pages with minimal text.

The Z-pattern describes how users scan pages with minimal text: across key elements, diagonally back down, and across again along a path resembling the letter Z. It helps establish visual flow instead of letting attention become fixed on one point. section 6.3.3

Use the pattern to shape a page hierarchy:

  • Overlay a Z on a wireframe or sketch. section 6.3.3
  • Place the most important content along the path, after identifying the page’s primary purpose. section 6.3.3
  • Repeat the pattern across rows when a page needs several scanning sequences. section 6.3.3

A homepage sequence

A page may lead the eye from a top headline to a Work headline, then to a graphic. The CSS Tricks website is another example of repeated movement through page rows.

How Design for Developers covers it

How deep it goes
Defines the scanning route and gives wireframe placement guidance, but defers deeper reading-pattern coverage.
Examples
Uses a headline-to-Work-to-graphic sequence and the CSS Tricks website as visual examples.
What it assumes
Builds from basic layout learning and introduces placement through a wireframe or sketch.
What you can do after
Apply it by overlaying a Z on a wireframe and positioning priority content along the scanning path.
How it connects
Connects visual hierarchy, wireframes, page layout, landing pages, and the F-pattern.
Cover of Design for Developers
liveBookmanning.com
Read Design for Developers on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Design for Developers. The section links point to the parts of the book it draws on.