The Gutenberg and other layout patterns

Published by

In further researching layout for e-textbooks and eLearning programs I have investigated the various layout patterns that reflect how readers/viewers scan and follow content on a page or in an image for example.

As a photographer in my spare time and also as a part of my employment, I am aware of the rule of thirds for how photographers can better compose photographs for viewers to better 'read'. On a basic level, the rule structures the fact that viewers pay most attention to areas of the photo that align themselves with the four breaking lines of the image when divided into thirds:


Key points of focus for the image should be placed where the red circles are (such as a portrait subjects head, an animal, flower or an interesting monument, building etc.) and key directional lines (such as the horizon, a building's wall edge or any other vertical or horizontal features) should be aligned with the red arrows.

My writing and research elaborated on here are aimed at taking this concept a stage further and also applying this theme to other mediums and formats. 

The rule of thirds in photography is developed upon for designed content by looking more closely at the Gutenberg pattern:


The Gutenberg pattern is pertinent in text-heavy, evenly balanced content in particular. The author of the original blog, Steven Bradley, describes the pattern's logic best:

"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." 

So it is made clear here that in text-centric content, key points should be placed top left, with secondary points falling along the line of reading gravity and additional key point being placed bottom right. These keys points could be important text blocks or images/multimedia that enhances or summarises the remaining content. The strong and weak fallow areas will remain largely unread (or not retained at least) unless enhanced by the use of images or multimedia perhaps. The author does mention that of course this pattern would be reversed in cultures where content is read right-to-left.

The Gutenberg pattern:

" ... improve(s) 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."

What is interesting to me here is the unsubstantiated claim that reading comprehension is improved when content follows the Gutenberg pattern. 

The Gutenberg pattern is very much relevant to text-heavy content.

The Z-pattern is an example of a simpler and slightly contradictory layout to that discussed above:


The Z-pattern suggests that viewers read-through the areas suggested as fallow areas in the Gutenberg pattern and if key content is placed along this pattern's path, it will be effectively absorbed. As mentioned above - this pattern is effective for simpler designs that include little text and that includes more multimedia that a traditional textbook might. This pattern is also very similar to that of the rule of thirds for images. The four points could be seen as mirroring the central circled axis points of the rule of thirds.

One final layout pattern to discuss is that of the more complex F-patternwritf-pattern

The F-pattern is web-centric and describes the visual path taken by the reader of website content. This is also an important grid to consider for a designer who's interested in developing content for LMS systems because, depending on the exact structure of the LMS content, any content which is presented online or electronically could subconcsiously have this viewing pattern applied to it by the user due to engrained website reading habits.

The basic premise of the pattern is that readers read across the first few lines of content (presumably because they feel this will give them a good feel for the remaining content) and then read in from the left less and less as they travel down the page. So key content needs to be placed along the top and to the left of the page - perhaps in bulleted points.

It is important to note here that the F-pattern was developed by studying readers of very text-heavy content including, most importantly, search results.

In summarising this post, it is clear that when designing content for LMS systems, any designer needs to really consider the placement of key content that will most effectively convey meaning and enable deep-learning and data-retention. In addition one rule does not fit all, different pages of the e-textbook or e-course will need to be treated differently (without confusing navigational items). Also, as mentioned by the author of the original blog, it's important to be considerate of the fact that a designer can manipulate how viewers read and travel through content by creating their own visual hierarchy. By including directional pointers such as images of varying sizes based on importance, content pulled into feature boxes and the careful use of colour, a designer can lead readers through content effectively. But when it comes to text-heavy content (where there is no obvious visual hierarchy) a designer should indeed be very mindful of these patterns.



« Back to articles