Select Language

The Gutenberg Principle

Back to List

What is The Gutenberg Principle or Z-pattern layout in UI design?

The Gutenberg Principle (aka Z-Pattern Layout) states that users' eyes travel according to a Z-shaped path from the top-left area to the bottom-right area.

How the Gutenberg Principle can help us

It's a good practice to place your CTA at the end of this flow to lead users to take action.

More to explore

Delete Modal

Pay extra attention to your buttons' copies. Avoid generic out-of-context copies, like 'Yes' or 'No'.

Delete Modal

Pay extra attention to your buttons' copies. Avoid generic out-of-context copies, like 'Yes' or 'No'.

Delete Modal

Pay extra attention to your buttons' copies. Avoid generic out-of-context copies, like 'Yes' or 'No'.

Align Uneven Elements

Always try to de-emphasize dangerous actions like deletion. Even if you set the spacing between the elements to be the same, the visual result seems off.

Align Uneven Elements

Always try to de-emphasize dangerous actions like deletion. Even if you set the spacing between the elements to be the same, the visual result seems off.

Align Uneven Elements

Always try to de-emphasize dangerous actions like deletion. Even if you set the spacing between the elements to be the same, the visual result seems off.

De-emphasize Dangerous Actions

Always try to de-emphasize dangerous actions like deletion. You have to prioritize the default action instead of the dangerous/irreversible one.

De-emphasize Dangerous Actions

Always try to de-emphasize dangerous actions like deletion. You have to prioritize the default action instead of the dangerous/irreversible one.

De-emphasize Dangerous Actions

Always try to de-emphasize dangerous actions like deletion. You have to prioritize the default action instead of the dangerous/irreversible one.