Design Atlas
한국어
⟳ Design process

Mockup

목업

A static screen with real color, type, and imagery — visually finished, but nothing responds when you click it.

Also known as: 하이파이 목업Visual comp
···
html
<div class="stage">
  <div class="frame">
    <div class="nav"><span class="dot"></span><span class="tab"></span><span class="tab"></span></div>
    <div class="hero"></div>
    <div class="lines">
      <div class="ln w1"></div>
      <div class="ln w2"></div>
      <div class="ln w3"></div>
    </div>
    <button class="cta">Continue</button>
    <div class="cur" id="cur">&#10148;</div>
    <div class="bubble">static</div>
  </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}
.nav{height:9%;display:flex;align-items:center;gap:6px;box-shadow:inset 0 -1px 0 var(--line)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.tab{width:16%;height:40%;border-radius:3px;background:var(--muted);opacity:.35}
.hero{flex:1;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.lines{display:flex;flex-direction:column;gap:8%}
.ln{height:11%;border-radius:3px;background:var(--fg);opacity:.6}
.ln.w1{width:100%}.ln.w2{width:82%}.ln.w3{width:56%}
.cta{height:14%;border-radius:20px;background:var(--accent);border:none;color:#fff;font:700 12px/1 sans-serif}
.cur{position:absolute;font-size:16px;color:var(--fg);transform:rotate(-45deg);animation:curmove 3.2s ease-in-out infinite;z-index:3}
@keyframes curmove{0%{left:8%;top:92%}55%{left:46%;top:83%}72%{left:46%;top:83%}100%{left:46%;top:83%}}
.bubble{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);background:var(--fg);color:var(--bg);
  font:700 10px/1 monospace;letter-spacing:.04em;padding:5px 9px;border-radius:6px;opacity:0;white-space:nowrap;
  animation:bub 3.2s ease-in-out infinite;z-index:3}
@keyframes bub{0%{opacity:0}58%{opacity:0}68%{opacity:1}90%{opacity:1}100%{opacity:0}}

A mockup is a wireframe with real color, typeface, and imagery applied. It's a static picture of what the final screen will look like — the focus shifts from structural layout to visual decisions like tone, color, typography, and image treatment.

It's most often confused with a prototype, but nothing in a mockup responds to a click. Each screen is its own flat image or file, and no transition or state change is defined between them. To show how something behaves, a mockup has to be wired up in a prototyping tool and promoted into a prototype.

On teams with an established design system, making a mockup is mostly assembling existing components. Without one, the mockup stage is often where the color palette and type scale get decided for the first time.

When to use

Use it once structure is settled and you need sign-off from stakeholders on how the thing will actually look. If you need to validate behavior, you need a prototype, not a mockup.