Design Psychology
Gutenberg diagram

What is the Gutenberg diagram (or "Z-pattern")?

The Gutenberg diagram is an concept in design that highlights your users' eye path which forms a Z-shaped pattern.
Maxime MroueGrégoire Cornulier
June 23, 2023
x min read
What is the Gutenberg diagram (or "Z-pattern")?

Table of contents

🔑 The key takeaway to remember.

Here are the 4 key points to understand the Gutenberg diagram.

The Gutenberg diagram describes the natural Z-shaped pattern that a user follows when reading a web page. The diagram consists of four zones:

  • Primary optical zone (top left): the first point of interest.
  • Strong deceleration zone (top right): less attention, avoid calls to action (CTAs).
  • Weak tracking zone (bottom left): least important content.
  • Terminal optical zone (bottom right): the best place for CTAs.

This principle helps strategically place content based on your visitors' reading habits.

A good understanding and effective use of the diagram can guide your users' attention and prompt them to take action.

The Gutenberg diagram represents the way users consume information on your site.

Mastering the Gutenberg diagram means divulging the right information at the right time to capture your users' attention and motivate them to read your page.

In this guide, we'll break down the 4 main areas of the diagram that will help you improve your readers' experience.

The 4 areas of the Gutenberg diagram

Definition: what is the Gutenberg diagram?

There are a number of design concepts that illustrate the way people consume information on a website, including the Gutenberg diagram.

The Gutenberg diagram (or "Z-pattern") represents the movement of the gaze as information on a page is read or processed.

Your users' eyes naturally follow a Z-shaped visual trajectory.

The diagram distinguishes 4 content zones:

  1. Primary optical zone
  2. Strong fallow area
  3. Weak fallow area
  4. Final optical area

Each of these zones plays a very specific role in capturing the user's attention

The overall movement of the eye traverses the content area in 2 ways:

  • from left to right, following the “orientation axes”
  • Following the “reading gravity”, i.e., from the primary optical zone to the final optical zone.

Let's now examine each of these zones, one by one, to better understand their impact on the user.

1) Primary optical area

The top left of the page is the user's first point of interest.

This is where their gaze and attention is first focused, whether they're reading content, looking for information, or simply scanning the page.

This is where you need to concentrate your efforts to grab their attention immediately and keep them on your page.

2) Strong fallow area

The user's gaze then moves to the upper right-hand part of the page, which can be seen as a continuation of the left-hand part, but less important.

A call to action here could interrupt the user's experience. It should therefore be avoided.

3) Weak fallow area

The lower left is the blind area of the Gutenberg diagram. Although legible to the user, it gives little importance to the content of this area.

4) Final optical area

When the user reaches the bottom right-hand corner, the reading process stops and the user must perform an action.

This is the ideal place to insert calls to action such as buttons, links, forms and so on.

Gutenberg Diagram example

Example diagram Gutenberg with Masterclass
Source: Masterclass

Why is this principle so important?

By understanding the reading habits of the users who visit your website, you can place the most relevant content in the areas where it will be most effective.

Understanding the Gutenberg diagram means you can use it to your advantage to capture your users' attention.

It's therefore a good idea to place your CTA at the end of this path (the final optical zone) to encourage users to take action.


The Gutenberg diagram is your handy guide to understand how people naturally navigate a page, tracing a Z-pattern with their eyes and scanning 4 main content areas.

The key? Pack your essential content along the diagonal path, the heart of the 'reading gravity'. This way, you can steer your users' attention to the information you want them to take in.

If you understand the importance of the Gutenberg diagram (which I hope you do after reading this guide), then you will be able to control your user's attention.

If you still have any doubts and would like some help, don't hesitate to contact us via the chat by clicking on the link or using the bottom right widget - we're here and ready to help you.

FAQ : Gutenberg diagram

1) What is the Gutenberg digram?

The Gutenberg diagram illustrates users' natural viewing path on a page, dividing the content into four quadrants.

2) What are the 4 main zones of the Gutenberg diagram?

The Gutenberg diagram includes: Primary optical area (top left) for initial attention, Strong fallow area (top right) to avoid distractions, Weak fallow area (bottom left) often overlooked, and Final optical area (bottom right) for calls to action.

3) Why is the Gutenberg diagram so important?

Understanding the Gutenberg diagram is crucial as it outlines a common pattern users follow when viewing content. This knowledge allows you to influence user interaction and highlight key information on your page effectively.

39 rated 4.9 on 5.0

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Share this post
Webflow web design services specialized in responsive design

Webflow Services

Want better recognition, stand out from your competitors and sell more? We got you covered with our Webflow services.

+39 reviews 4.9/5.0 on Google

Other articles on this topic

We share best practices, strategies and tools for using design psychology. Design psychology is essential to any conversion rate optimization (CRO) strategy.

No items found in this category.

Ready to stand out and sell more?

Find out how we'll take your brand into a new era and get you to achieve your goals by setting up a discovery workshop with Greg, our co-founder.

Contact a Webflow Web Design Agency