Wednesday, 21 December 2016

The gutenburg design layout

The Gutenberg Diagram
The Gutenberg diagram describes a general pattern that the eyes move through when looking at evenly distributed, homogenous (parts or elements that are all of the same kind) information.

The pattern applies to text-heavy content. Think pages in a novel or a newspaper or adds.

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.

I plan to use this and incorporate it into our add to emphasise certain parts of information

No comments:

Post a Comment