Design Atlas
한국어
⟳ Design process

Wireframe

와이어프레임

A low-fidelity sketch that shows layout and structure with plain gray boxes — no color, type, or real imagery yet.

Also known as: 로파이 와이어프레임Lo-fi wireframe
···
html
<div class="stage">
  <div class="frame" id="frame">
    <div class="badge" id="badge">WIREFRAME</div>
    <div class="nav"><span class="dot"></span></div>
    <div class="hero"><div class="x"></div></div>
    <div class="lines">
      <div class="ln w1"></div>
      <div class="ln w2"></div>
      <div class="ln w3"></div>
    </div>
    <button class="cta" id="cta">Continue</button>
  </div>
</div>
css
.stage{width:76%;height:92%;max-width:320px}
.frame{position:relative;width:100%;height:100%;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  padding:7% 7%;box-sizing:border-box;display:flex;flex-direction:column;gap:5%;overflow:hidden}
.badge{position:absolute;top:8px;right:10px;font:700 9px/1 monospace;color:var(--muted);letter-spacing:.04em}
.nav{height:9%;border-radius:4px;background:var(--line);display:flex;align-items:center;padding:0 8px;transition:background .5s}
.dot{width:10px;height:10px;border-radius:50%;background:var(--muted);opacity:.4;transition:.5s}
.hero{position:relative;flex:1;border-radius:6px;background:var(--line);overflow:hidden;transition:background .6s}
.x{position:absolute;inset:0;transition:opacity .5s}
.x::before,.x::after{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--muted)}
.x::before{transform:rotate(21deg)}
.x::after{transform:rotate(-21deg)}
.lines{display:flex;flex-direction:column;gap:8%}
.ln{height:11%;border-radius:3px;background:var(--line);transition:background .5s,opacity .5s}
.ln.w1{width:100%}.ln.w2{width:82%}.ln.w3{width:56%}
.cta{height:14%;border-radius:4px;background:var(--line);border:none;color:transparent;font:700 12px/1 sans-serif;transition:all .5s;display:grid;place-items:center}
.frame.hi .nav{background:var(--surface);box-shadow:inset 0 -1px 0 var(--line)}
.frame.hi .dot{background:var(--accent);opacity:1}
.frame.hi .hero{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.frame.hi .x{opacity:0}
.frame.hi .ln{background:var(--fg);opacity:.65}
.frame.hi .cta{background:var(--accent);color:#fff;border-radius:20px}
js
const frame = document.getElementById('frame');
const badge = document.getElementById('badge');
let hi = false;
function toggle() {
  hi = !hi;
  frame.classList.toggle('hi', hi);
  badge.textContent = hi ? 'MOCKUP' : 'WIREFRAME';
}
setInterval(toggle, 2200);

A wireframe decides only what goes where. Gray boxes stand in for buttons, lines stand in for text, a diagonal X stands in for an image — every visual decision is deliberately deferred so the conversation stays on structure and priority.

It's easy to confuse with a mockup (a finished-looking still) or a prototype (a clickable flow), but the three answer different questions: a wireframe answers "what's where," a mockup answers "how does it look," a prototype answers "how does it behave." Skip straight to high-fidelity screens and reviewers get stuck arguing about color and font instead of giving feedback on the actual structure.

Fidelity itself is a choice, from a hand-drawn sketch on paper to a pixel-aligned grayscale wireframe. Reach for the sketch when you need fast agreement on structure with stakeholders; reach for the aligned version when it has to serve as the layout spec developers build from.

When to use

Reach for it first, before a pixel is styled, whenever placement and priority aren't agreed yet. If reviewers keep commenting on color instead of layout, that's a sign to fall back to this stage.