A skill for design decisions with no obvious answer. It renders every option for real, in the typeface, tokens, and grid the thing will ship in, so you choose by looking. A proof in the print sense: a trial pull you check before you commit.
Why render it
You can’t see prose. A byline, a type ramp, a masthead: the differences are visual and small, and a paragraph describing them tells you nothing you can act on. Put the candidates next to each other and you know in a second.
I chose this site’s layout this way. Every sheet below is one I actually used.
This index
Three poster compositions on the 12-column grid, rendered live. I picked A, the calendar scatter, shipped it, and then took it out. It composed well on the sheet and indexed badly on the real page: two sections used the same device, and neither list was ever whole on screen. The index you’re reading is a ruled list. C survives as the staircase the links use.
A harder one
My recipe archive needed a layout for a wide screen: a 26-column split with the section names hung out in the margin. Six open questions, twenty options, every frame rendered at a width it ships at — 1512, 1792, 2560, and 390 for a phone.
This is round two, so whatever round one settled sits in a band at the top marked locked. Reopening a decision you already made is how you spend a week choosing a gutter.
What a round two looks like
The wide layout shipped, and then two things about it were wrong: the ingredient and step columns didn’t read as a pair, and the reference pages left a thousand pixels of blank paper. So a third sheet, one question each. I measured all 124 recipes first: the right column runs twice the height of the left, and on six recipes it runs the other way, which killed three options I would have drawn.
I picked a hairline across both heads and then couldn’t decide how the width should divide, so four more frames went on the same sheet under a band marking the part already settled. One of them shows its own flaw. Pinning the steps to the right edge moves the empty space into the middle of the page on the 71 recipes with a single ingredient group, so the frame stays up with that written into its caption.
Then a better question: why should one split apply to every recipe? Three more frames let the page decide — six or more steps and the list runs in two columns, fewer and nothing changes. CSS can count, so no script is involved, and I checked the count against the real page on all 124. The threshold is measured too: splitting at four leaves the least blank paper but gives 27 recipes a two-step column, which doesn’t read as a column at all. You can’t judge a conditional layout from the case where it fires, so each of these three is drawn twice: once on a recipe it changes, once on a recipe it leaves alone.