Tilda Blog

Z-Shaped Pattern for Web Content

People tend to unwittingly scan information on web pages following certain patterns. Z-pattern works for landing or promo pages—websites with little text.

The eye moves along the horizontal line at the top, where the section titles are located, then follows a diagonal line from right to left through the center image area, to the bottom line of the "Z" with additional information.

Divide the composition of such pages into 3 parts:
• Top part with the title and sections
• Center block with an image
• Bottom block with additional details and a call to action (CTA)

A visual "journey" along the Z-pattern helps to clearly read the message.
1. Logo in the upper left corner, followed by section titles forming a horizontal line.
2. At the upper right corner, you can add a call-to-action button.
3. Next, the eye scans down to the left side of the page creating a diagonal line across a central area with an image. It's a "pause" between the informative top and bottom lines.
4. The lower right corner is an ideal place for a CTA button inviting users to subscribe or buy your products.

The Z-pattern can be extended to the entire page by repeating steps 1-4 if you need to add more info about your selling proposition before the call to action.
Made on