Design Layouts: Gutenberg Diagram, Z Pattern & 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.

The pattern applies to text-heavy content. Think pages in a novel or a newspaper. The pattern isn’t meant to describe every possible design.

The Gutenberg diagram describes a general pattern the eyes move through when looking at evenly distributed, homogenous information. Read that last part again.
The pattern applies to text-heavy content. Think pages in a novel or a newspaper. The pattern isn’t meant o describe every possible design.
The Gutenberg diagram divides the layout into 4 quadrants.

• Primary optical area located in the top/left
• Strong fallow area located in the top/right
• Weak fallow area located in the bottom/left
• Terminal area located in the bottom/right

The pattern suggests that the eye will sweep across and down the page in a series of horizontal movements called axes of orientation. Each sweep starts a little further from the left edge and moves a little closer to the right edge. The overall movement is for the eye to travel from the primary area to the terminal area and this path is referred to as reading gravity.
Naturally this is for left to right reading languages and would be reversed for right to left reading languages.
The Gutenberg diagram suggests that the strong and weak fallow areas fall outside this reading gravity path and receive minimal attention unless emphasized visually in some way.
Important elements should be placed along the reading gravity path. For example placing logo or headline in the top/left, an image or some important content in the middle, and a call-to-action or contact information in the bottom right.
Designs that follow Gutenberg are said to be in harmony with natural reading gravity.
The claim is these designs improve reading rhythm, by being in harmony with the natural reading rhythm, as well as improving reading comprehension, but there’s little empirical evidence to support the claim.
Again Gutenberg describes large blocks of text with little typographic hierarchy. As soon as you create a visual hierarchy the diagram no longer applies. Keep this in mind with the other patterns described here.