Each offers advice for where to place important information, but I think these patterns are often misunderstood and followed without thought to what they really describe. I want to walk through the what and why of each pattern and then offer something else that gives you as a designer more control over where your viewer’s eye moves across your design.
The Gutenberg Diagram
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...