January 3rd, 2009 / Ross Johnson / 17 Comments

The Gutenburg Diagram in Design

We are fortunate to be a part of the web design as it has begun to reach a level of maturity. With advances in technology and prominent bloggers publishing great information on design concepts such as using grids, baselines, art direction and the rule of thirds (among others) we are able to work with the design of websites on a much higher level than even a few years ago.

However there are other principals of design that have yet to get ample amount of attention or usage. One of these principals is the “Gutenburg Diagram,” which you have likely used on some level with out realization.

How the Gutenburg Diagram Will Improve Your Design

The gutenburg diagram is a method of understanding how cultures who read right to left, visual navigate a composition, and how to optimize layout as a result of it.

Gutenburg Diagram

Since we are trained to read from the top left to the bottom right naturally, we instinctively sweep a composition starting from the top left down to the bottom right (often several times).

As information hierarchy and visual emphasis are such critical parts of design, knowing how a user is going to look at your site despite design can lead to a much more effective layout.

How the Diagram Works

The diagram dissects the composition into four quadrants. In this case since we are designing for the web, it will be dictated by the screen resolution and location of the fold.

The upper left quadrant is the first area that a users eye will focus on. The eye will then sweep downward crossing the center or intersection of all four quadrants, before coming down to the bottom right hand quadrant.

The upper right quadrant and lower left quadrants are called fallow areas. The top right is a strong follow area, where the lower left is a weak follow area.

These areas will receive little visual attention unless they are emphasized through design. The top right will receive more attention than the lower left all other things equal.

Using the Diagram for Excellent Web Design

By understanding and working with the diagram we can maximize the effectiveness of our designs by using it to our advantage. It is probably a good thing that web convention puts the logo in the top left of the screen. It will be the first thing that users see, tell them where they are as well as help brand the website.


Since we know that the bottom left and top right quadrants will receive less visual attention, we can put less important elements in those areas. You may have noticed the convention that puts secondary navigation links in that area, such as client login, rss feed, etc…

This is a perfect use of the gutenburg diagram, as such navigation is not nearly as critical as the primary navigation. However those who are looking for it can still find and use it when needed.

Place important visuals and content consciously

As you design down the page, you may also want to consider moving more important content or visuals into the path of the diagram. If you have a choice, place important content at the fold on the right hand side of the design rather than the left. A common occurrence would be swapping content for a image left to right, to place greater emphasis on one or another.

You may also want to reconsider placing the navigation in a right aligned manor, as you are unlikely to place it at the bottom of the composition anyways.

Examples of the Gutenburg Diagram

OH Tele

Rocket Club

Revyver HQ

Wellness Class

Final Thoughts

The Gutenburg diagram is not gospel. Once you start playing with visual emphasis and weight, how a user looks at a design can drastically be altered. However the idea is to use the diagram to your advantage and use our instinctual way of looking at a design to strengthen the layout and composition.

17 thoughts The Gutenburg Diagram in Design

  1. What about Jacob Nielsen F-Shaped Pattern for Reading.

    The Eye-tracking he have used is in my opinion more valauble study than some sketch.

    After all I’m going to rebuild my pages a little bit 🙂

    P.S. Please give readers info about HTML rulez of comments. I have no idea what HTML tags are allowed.

  2. F pattern reading is really a different study all together. One is more about how to write content for people who are scanning the text of web pages, and another is about how people naturally scan design / layout.

    The guttenburg diagram is an age old design technique, there are no eye tracking heat maps available that I know of.

    Ross Johnson
  3. Nice article. I love it. This is the first time I’ve heard of the Gutenberg Diagram. Thank you for sharing.

  4. This has to be one of the coolest usability articles I’ve run across. I needed it! Thanks so much – consider it delicious’d!

  5. Nice work Ross – but following your own advice, I don’t see anything distinctive on the bottom right corner of the page of this design.

  6. Thanks Ed,

    Yeah I have been learning more about the diagram as of late (post this design). The diagram does lead your eye to the content, but it could definitely be improved.

    Ross Johnson
  7. Interesting article. Thanks for sharing.

  8. Nice article. It ist really hard to say whether eye-tracking better information of user behavior returns.

  9. I actually tend to read left to right …

  10. Pingback: Get More From Your Site’s Visual Acreage | Pro Blog Design

  11. Pingback: Get More From Your Site’s Visual Acreage | Wordpress Blog

  12. Pingback: Get More From Your Site’s Visual Acreage | Web Development News

  13. Pingback: Get More From Your Site’s Visual Acreage | Web SEO Rank

  14. Interesting study, and something I feel would be very useful when it comes to making minor design decisions. I like the idea of using this diagram as a basis for element placement, and then adjusting the emphasis of each item accordingly.

    Thanks for the heads-up, Ross!

  15. Pingback: 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern | Van SEO Design

  16. The Gutenburg Diagram in Design » – Web Design Marketing Podcast & Blog http://bit.ly/cOcqAR

  17. The Gutenburg Diagram in Design | Psychology of Web Design | 3.7 Blog http://t.co/vkyR0C7N via @ThinkDevGrow

Comments are closed.