The Gutenberg Rule is a design philosophy named after Johannes Gensfleisch zur Laden zum Gutenberg; a German goldsmith and printer from the 15th century. The theory is a visual concept that maps out a user’s mental path when viewing a layout, called reading gravity—a habit of reading in the western world: left to right, top to bottom. The Gutenberg diagram divides a page into four quadrants: the “Primary Optical Area” in top-left, the “Strong Fallow Area” in top-right, the “Weak Fallow Area” in the bottom-left and a “Terminal Area” in bottom-right. This diagram illustrates the theory in colour:

Reading gravity pulls the curious users’ eyes from the top-left to the bottom-right of a layout. It is a natural human habit to scan something quickly before focusing all of our attention on it. How many times do we want to read the blurb of a book before reading it’s contents? Or watch the trailer to a movie before paying to see it at the cinema? Demos for games, radio singles from music albums—the list goes on. It’s common practice to want a taste of something before giving it full attention—it’s why all great stories start and end with action or drama to draw us in. We can apply this psychology to graphics and interface design, and the Gutenberg Rule is all about just that.

We know that we have a certain amount of time, wording, graphics and pixel-space to grab our user (returning or otherwise) and draw them into further reading, so designing an interface to accomodate for this is a science within itself.

The diagram suggests that the bottom-left area of the page will get the least attention as our eyes scan from top-left to bottom-right and that our glance would eventually end up in the lower right portion of the page. Of course this sort of theory depends on the dimensions and weight of the design, but would it not be beneficial for your call to action to be placed in the bottom-right of that marketing area? Maybe, maybe not…

Logical Applications of the Gutenberg Rule

Let’s take a look at some real-life examples of the theory in practice to see how it works. You should start to see the pattern in many interfaces and other pieces of design.

37signals do a tremendous job with their project management application, Basecamp. This website is the pinnacle of marketing design for the web. Notice how the two calls to action are in the Primary Focal Area where the site gives it’s elevator pitch to a new user and at the bottom right in the Terminal Area, where the site presents it’s final call after the user has scanned the page’s content.

It’s also a smart move to keep a call to action at the top of the screen and the bottom (or somewhere in the middle) for accessibility purposes. This means that wherever your user is on your page, if you manage to sell them at some point throughout your “pitch” then they don’t have to go very far to convert.

In the Strong Fallow Area, we’re hit with a screenshot of the application—but only if we want to, do we have to watch the video testimonials.

Ballpark’s application landing page is another great demonstration of Gutenberg’s rule in play. Once again, study the flow of the pitch; the calls to action on both ends of it’s “message” and the content that’s laid out in between.

The interesting thing is that designers often don’t even realise that they’re implementing this theory in their work because it’s such a natural way for us to think. We use it all the time in everything we do, often subconsciously.

Understand that the concept is more likely to work on pages which have a balanced distribution of content and a good text vs graphics ratio. If parts of your page are highlighted through other design techniques then those elements are likely to stand out and damage the flow of usability. It’s importent to try and select one model for your design if you intend for it to work, avoiding a clash in the user’s scan process.

Consider this rule for your next design, whether it be for a resume, business card or website landing page—the Gutenberg theory applies to all areas of design and it’s completely natural for the human mind to interpret information in this way.