All Tips

The Gutenberg Principle
The Gutenberg Principle

The Gutenberg Principle


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.

←Previous Tip

Visually Distinguish Elements

Visually distinguish elements by applying unique shapes, colors, copies, and/or icons. In that way, you ensure that visual hierarchy works perfectly and you avoid accessibility issues. To boost the strength of the visual effect use multiple attributes (color + icon) and not a single one (only color). The latter helps you avoid accessibility issues as well. Color blind people won't notice the color changes.

visual effect

Become a Better Designer.
The Fun way.

Join 100s of developers, entrepreneurs & junior designers who strive to become better in UI & UX design with byte-sized, practical tips & examples!

Get notified about new tips & articles before anyone else!

  • "

    I love these little tips. It’s like Dribbble but actually useful.

    Martin LeBlanc

    CEO of Iconfinder

  • "

    I love UX & UI tips. Especially, when they are practical and presented in a very good way. Yours are meeting both criteria.

    Lisa Dziuba

    Head of Marketing at Abstract

  • Logo

    Learn to design better User Interfaces with practical UI & UX tips

  • Projects



    PH Launch Checklist

  • Popular Posts

    15 Practical UI Form Tips

Β©2022 . Made by Jim Raptis