Frame 23 · W

W · 23 / 26

W — Wireframe

The structure before the surface.

Boxes for pictures, lines for words, and a note on every decision.

00The style

Decide the bones while they are cheap.

The word came from computer graphics. In 1963 Ivan Sutherland’s Sketchpad drew objects as their edges alone, a frame of wire, because a frame was all the machine could afford to draw. Shape first, surface later.

Web teams took it over around 2000 for the page before the design: Jesse James Garrett published a visual vocabulary for it in 2002, Balsamiq made the hand-drawn look a product in 2008, and handoff tools turned the designer’s redlines, the sizes and gaps marked in red, into something a developer could click.

As a style it is grey on white, a box with an X for every picture, real words in one plain face, a monospaced face for sizes, and two pens on top: blue for notes, red for measurements. It looks unfinished on purpose, so that people argue about what goes where and not about the colour.

01In use

One screen, three fidelities.

Platform sells train tickets from Seoul to Busan. Slide from sketch to wireframe to finished and the whole results screen changes its surface while the layout stays put. Every step works: pick a day, sort, open a train, book it.

  • 01One skeletonSketch, wireframe and finished are the same markup. Only the surface changes, so nothing jumps when the slider moves.
  • 02Works at every stepPick a day, sort, open a train, add a passenger, book. The sketch is as usable as the finished screen.
  • 03Notes travel with itTurn the notes on: four pins, and what each one decides changes with the fidelity.
Seoul → BusanFri 16 Oct · 1 adult
Day

5 trains · from ₩38,900

    1. Seoul09:00
    2. Daejeon09:58
    3. Busan11:24
    Adults1
₩59,8001 adult

Fidelity

Finished

3 / 3

Type, colour, pictures and depth on the same skeleton. Nothing moved: the surface went on last.

  • Layout, decided
  • Content, decided
  • Look, decided
  1. 1Route in 600 weight; the arrow is a glyph, not a picture.
  2. 2The chosen day is the only filled chip.
  3. 3Fastest and Cheapest get the one accent; everything else stays ink.
  4. 4Green fill, 52px tall, in reach of a thumb.
02The kit

The stencil, every state.

The parts a wireframe is drawn from, in grey and ink. Each tile holds its states still above a part that works, with the notes a designer would leave beside it.

W-01Button

Working
44 tall, 1.5 line, 6 radiusBusy keeps the width: no jump

W-02Text field

Working
Shown in the handoff file.13/24
Checks on leaving, not on every key

W-03Select

Working
Phone: 390 × 844Native select: the phone’s own picker

W-04Switch, checkbox, radio

Working
Format
Export: frames, notes, redlines as SVG

W-05Slider

Working
Steps of 25: zoom snaps to round numbers

W-06Progress

Working
Exporting frames0 / 12
Count when you know it; a bar when you don’t

W-07Segments and tabs

Working

14 frames · 3 flows · last edit 10:42

Arrow keys move between tabs

W-08List rows

Working
5 of 5 screens

W-09Card and loading

Working
Loaded.The skeleton is the card’s own boxesEmpty says what to do next

W-10Toast

Working
Waits while you point at it or tab in

W-11Modal

Working

Delete “Seat map”?

The frame and its four notes go. Its links from Results stop working until you point them somewhere else.

Says what goes, not “Are you sure?”

W-12Steps

Working
  1. ✓ Sketch
  2. Wireframe
  3. Review
  4. Build
2 of 4: Wireframe
Done, now, to come: three looks

W-13Badges and avatars

Working
Reviewers
Ready2 of 2 sign-offsTwo reviewers turn it Ready
03Signature

Redlines and sticky notes.

The finished fare card under an inspector. Hover any layer for its size and the gaps to its parent, measured live from the page. Pin one and hover another to measure between them, then leave a note on it for the developers.

FastestTrain 121
09:002h 24m11:24
₩59,800Select

Times row is pinned. Hover another layer to measure to it; click it again to let go.

  • 1 · DurationMina · designThe duration sits on the line between the times, so it reads as the gap. Keep it at 13px.
  • 2 · Select buttonJoon · researchIs 44 tall enough here? The thumb zone wants 48.
  • 3 · Fastest badgeSora · productOne badge per card. If a train is both, Fastest wins.
Layers
Inspect

Hover, focus or pin a layer to read its size, type and colour.

04Tokens

The system, in numbers.

Six greys and three pens with their contrast, three typefaces, an 8-point grid, three line weights and three speeds. Copy them as custom properties, with the box, the button and the pin.

Colour
  • --paper #f6f6f3Paper: the page under the frames
  • --sheet #ffffffSheet: frames and panels
  • --fill #ecece8Fill: placeholders, skeletons
  • --line #c9c9c4Line: boxes and rules, never type
  • --ink #1d1d1bInk: text and controls, 16.9:1
  • --ink-2 #5b5b56Second ink: hints, meta, 6.8:1
  • --blue #2f5fd0Note pen: pins, frames, focus, 5.7:1
  • --red #c8321cRedline: sizes, errors, 5.3:1
  • --note #ffe680Sticky: its ink on it 10.2:1
Type
  • Seoul → Busan 09:00Inter Tight 600 · headings, the product
  • Seoul → Busan 09:00Inter Tight 400 · text
  • Seoul → Busan 09:00Red Hat Mono 500 · specs, sizes, labels
  • Seoul → Busan 09:00Kalam 400 · notes in the margin
Space, in pixels
  • 4
  • 8
  • 16
  • 24
  • 32
  • 48
  • 64
Lines
  • Box · 1pxPlaceholders, rules
  • Control · 1.5pxButtons, fields, the phone
  • Sketch · 2pxThe marker, at low fidelity
Motion
  • Press160ms ease-outColour and 1px of travel
  • Fidelity320ms ease-outOne look fading to the next
  • Breathe1.4s alternateSkeletons, while loading
:root {
  /* Paper and ink */
  --paper: #f6f6f3;
  --sheet: #ffffff;
  --fill: #ecece8;
  --line: #c9c9c4;
  --ink: #1d1d1b;
  --ink-2: #5b5b56;

  /* The three pens */
  --blue: #2f5fd0;  /* notes, pins, focus */
  --red: #c8321c;   /* redlines, errors */
  --note: #ffe680;  /* sticky notes */

  /* Type */
  --font-ui: "Inter Tight", system-ui, sans-serif;
  --font-spec: "Red Hat Mono", ui-monospace, monospace;
  --font-hand: "Kalam", "Comic Sans MS", cursive;

  /* Grid, lines, edges */
  --u: 8px;
  --box: 1px solid var(--line);
  --control: 1.5px solid var(--ink);
  --radius: 6px;

  --press: 160ms ease-out;
  --fidelity: 320ms ease-out;
}

/* The placeholder: a grey box with an X. */
.xbox {
  background:
    linear-gradient(to top right, transparent calc(50% - 0.75px), var(--line) 50%, transparent calc(50% + 0.75px)),
    linear-gradient(to top left, transparent calc(50% - 0.75px), var(--line) 50%, transparent calc(50% + 0.75px)),
    var(--fill);
  border: var(--box);
}

/* The button: an ink line, 44 tall. */
.wbtn {
  min-height: 44px;
  padding: 0 18px;
  font: 500 13px var(--font-spec);
  background: var(--sheet);
  border: var(--control);
  border-radius: var(--radius);
  transition: background-color var(--press);
}
.wbtn:hover {
  background: var(--fill);
}

/* The note pin. */
.pin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font: 600 11px/22px var(--font-spec);
  text-align: center;
  color: #fff;
  background: var(--blue);
}

05Do

  1. 1Settle the structure before the surface. Stay grey until the layout holds.
  2. 2Use the real words. Placeholder text hides the long name and the empty state.
  3. 3Annotate every decision. A box without a note is a guess.
  4. 4Raise fidelity on purpose, one step at a time, and say what each step decides.

06Don’t

  • Lorem ipsum

    The copy was a guess, so the layout was too. The real station name broke the row on the first day.

  • Polished too soon

    Gradients and a brand blue in a wireframe. The review was spent on the blue, and nobody looked at the flow.

  • Boxes with no notes

    Twelve grey boxes and not one label. Nobody can say what was decided, so it gets decided again.

07In the wild

Where the style shows up outside this page.

  1. Battlezone

    Atari · 1980Tanks and mountains in green vector lines, edges only.

  2. Tron

    Disney · 1982Early computer graphics on film, glowing outlines on black.

  3. Elite

    David Braben and Ian Bell · 1984A whole galaxy of ships in wireframe on the BBC Micro, drawn one line at a time.

  4. Balsamiq Mockups

    Peldi Guilizzoni · 2008Hand-drawn boxes on purpose, so nobody mistakes the sketch for the design.