Skip to content

Design

Measure the page before you redesign it

Rebuilding this site started with a console, not a canvas: read the real numbers off the page you admire before you guess at them.

When I decided to rebuild this site on the design language of a page I admire, the temptation was to open a blank file and approximate it from memory. Approximation is how you end up with something that looks almost right and feels wrong.

So I opened the real page and asked it instead. getComputedStyle for the type scale, getBoundingClientRect for the grid. The content column was 1160 pixels. The feature rows ran 530 and 550 wide on 100 and 60 gutters. The hero was 310 tall. None of those were numbers I would have guessed, and all of them were load-bearing.

Working from measurements changes the argument you are having with yourself. You stop asking whether a gap looks big enough and start asking whether it is the gap. That is a far quicker question to answer, and it is the difference between a homage and a copy of a vibe.

The judgement still belongs to you. I kept the grammar and threw out the palette, swapped a dot for a delta, and put green where purple was. But the bones came from a ruler, and it shows in the places where two unrelated sections happen to line up.

Keep reading