Visual Hierarchy, Gutenberg Diagram, F & Z Pattern

Visual hierarchy

F and Z patterns

1.First, what’s Gutenberg diagram?

2. F-pattern

Why F-Pattern Works

Heatmaps from user’s eye-tracking studies of three websites. The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn’t attract any fixations.

Why F-Pattern Works

3. Z-pattern

The source: https://zhuanlan.zhihu.com/p/27447140
The big landscape

Brand or Logo Recognition

3. Headlines — 5–6 words

Photography Workshops

4. Body copy

Copy length

CTA elements with copy

Travel Agency Website

5. Points to consider

UI/UX Designer who loves traveling, writing, photography and amusing things. Feel free to contact me or check out my web: https://www.lineindesign.net/ 🤡