Design Atlas
한국어
⌘ UX terms & laws

Z-Pattern

Z 패턴

On sparse, visual-first pages, the eye moves top-left → top-right → diagonally down → bottom-left → bottom-right, tracing a Z.

Also known as: Z-shaped reading pattern
···
html
<div class="page">
  <div class="logo"></div>
  <div class="navcta" id="navcta"></div>
  <div class="body-ln w70"></div>
  <div class="body-ln w40"></div>
  <button class="cta" id="cta">Get Started</button>
  <div class="dot" id="dot"></div>
</div>
css
.page{position:relative;width:88%;height:82%}
.logo{position:absolute;left:0;top:0;width:16%;height:12%;border-radius:4px;background:var(--muted);opacity:.6}
.navcta{position:absolute;right:0;top:2%;width:26%;height:8%;border-radius:4px;background:var(--line)}
.body-ln{position:absolute;left:0;height:9%;border-radius:3px;background:var(--line)}
.w70{width:70%;top:52%}
.w40{width:40%;top:65%}
.cta{position:absolute;right:0;bottom:2%;border:0;border-radius:8px;padding:9px 16px;background:var(--accent);color:#fff;font-weight:700;font-size:12px}
.cta.hit{animation:flash .7s ease}
@keyframes flash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle,rgba(91,91,247,.9),rgba(91,91,247,0) 70%);animation:zpath 4s ease-in-out infinite}
@keyframes zpath{
  0%{left:8%;top:6%}
  15%{left:88%;top:6%}
  50%{left:8%;top:80%}
  65%{left:8%;top:80%}
  90%{left:92%;top:92%}
  100%{left:92%;top:92%}
}
js
const cta = document.getElementById('cta');
setInterval(() => { cta.classList.remove('hit'); void cta.offsetWidth; cta.classList.add('hit'); }, 4000);

Where the F-pattern shows up on dense text, the Z-pattern describes eye flow on sparse, whitespace-heavy screens like landing pages. It's a rule of thumb rooted in left-to-right, top-to-bottom reading habits — not one researcher's finding, but a convention the web design industry converged on.

A typical layout: logo top-left, nav/CTA top-right, eyes drop diagonally to supporting copy bottom-left, and land on the final CTA bottom-right — placing the conversion button exactly where attention naturally arrives.

The dot below traces the Z path, and the button it lands on lights up at the end.

When to use

Use this for sparse screens like landing pages and hero sections. Once the page gets text-heavy, the flow shifts toward an F-pattern — don't mix the two assumptions.