3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern
by Steven Bradley on February 7, 2011
Archived in Web Design
You are here:
Home / Blog / Web Design / 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern
Several layout patterns are often recommended to take advantage of how people scan or read through a design. 3 of the more common are the Gutenberg diagram, the z-pattern layout, and the f-pattern layout.
Z-Pattern Layout
As you would expect the z-pattern layout follows the shape of the letter z. Readers will start in the top/left, move horizontally to the top/right and then diagonally to the bottom/right before finishing with another horizontal movement to the bottom/right.
The z-pattern is sometimes called a reverse-s-pattern, which might indicate more of a curved path as opposed to the hard angled path. Otherwise they’re basically the same thing.
The main difference with the Gutenberg diagram is that the z-pattern suggests viewers will pass through the two fallow areas. Otherwise they still start and end in the same places and still pass through the middle.
As with Gutenberg a designer would place the most important information along the pattern’s path.
The z-pattern is good for simple designs with a few key elements that need to be seen. Any storytelling aspect of the design would follow the path of the z.