Gutenberg Diagram Overlay

The Gutenberg Diagram is a concept popularized by newspaper designer Edmund C. Arnold in which a display divided into four equal areas can help designers ensure that they are taking full advantage of a user’s reading gravity, the natural path that most peoples’ eyes will follow when being presented with information.  In Western cultures we are conditioned from a young age to read content starting at the top left corner, scanning right and then left again, until getting to the bottom right corner.

UX Movement posted about how web designers can use the Gutenberg Diagram to improve homepage conversions by optimizing the placement of certain elements to conform to this concept.  Positioning the primary call to action in the terminal area, for example, should help boost your CTR since this is where most users’ eyes will end up.

I’ve put together a semitransparent Gutenberg PSD layer to use with your homepage and landing page designs.  Simply drop in your design behind it in Photoshop and see how closely it follows the pattern.  You can download the PSD here.

Examples: