What makes an interface feel finished?

Key idea 1 of 7

Finished is when nothing is left to the defaults

Ask what makes an interface feel finished and most answers are a mood: polished, considered, calm. Those are true and they are useless, because you cannot check a page for calm. What you can check is the thing under the mood. An interface feels finished when every value on it was decided, and unfinished exactly where a browser, a framework or a hurry decided instead.

The default line height. The default blue. The corner that is rounded because a component library rounds corners. The transition that is 300 milliseconds because that was the number in the example. Each is invisible on its own, and together they are the difference between software that feels like it was made and software that feels like it was assembled.

So the honest answer is a short list, and the rest of this is the list: type, color, motion, states, spacing, and the checks that keep them true after the person who cared has moved on.

Key idea 2 of 7

Type is a scale, not a set of sizes

A finished interface has a small number of type sizes and every piece of text is one of them. On this site there are fourteen, from 11px to 80, and a check renders every page at four widths and refuses any size that is not on the list. Headings ride four fluid ramps between named steps, all sharing one viewport window, so the ladder cannot invert at any width: the h2 is never larger than the h1 on a phone, which is a bug this site had once and cannot have again.

The rest follows from the size. Leading is a function of it: display type sits tight, reading type sits open, and the body of an essay runs at a measure of fifty-two characters because that is how long a line can be before the eye loses the way back. Tracking is a function of it too. Large type is set tighter and small caps are set looser, and a ramp takes the tracking of its ceiling, because tightness shows at the top and only slightly at the bottom.

None of that is a preference. It is a set of relationships, and what a reader feels as finished type is a scale they cannot see holding every size on the page in the same family.

Key idea 3 of 7

Color is a pair, not a swatch

A color is never on its own. It is ink on a ground, and the number that matters is the ratio between them. A finished interface has a palette small enough to tabulate every pair, and it has the table. This site's color spec lists each ink against each ground with its measured ratio, and the sage accent is two tokens rather than one, because the fill that clears the floor for a 2px rule does not clear it for small type. Put the fill on a caption and it fails at 3.56:1; the text step clears at 5.82. Same hue, two jobs, two numbers.

The part most palettes miss is text that sits on a picture. There is no ground color to compute from, so the ordinary check has nothing to say, and that is how a caption on this site's own hero once shipped at 3.88:1 against a 4.5 floor. The check that caught it reads the pixels under the letters. Finished color is not a good eye for it; it is every pair on the page having a number, including the pairs that only exist once the photograph loads.

14

steps on the type scale, and every rendered size at four widths is one of them

5,883

colors a reader can see, each measured against its floor at rest, before the hover is even forced

6

durations and one curve, and a timing that is not one of them is refused by the token check

Key idea 4 of 7

Motion is a duration, a curve and a rule about interruption

Motion is where unfinished shows fastest, because a transition that is slightly too long is felt by everyone and named by no one. A finished interface has a motion spec the way it has a type scale: this site's has six durations, from a state change at 120 milliseconds to a line describing itself at 900, and one easing curve, and nothing on the site moves on a number that is not one of the six.

The two words the design-engineer postings use are easing and interruptible, and both are decisions rather than flourishes. Easing is the curve: an ease-out for something arriving, because it should decelerate into place the way a thing with mass does. Interruptible is the harder one. If a reader scrolls back while something is still animating in, the honest interface rewinds it rather than finishing a movement nobody is watching. On the case study pages here, nothing has a clock. The scrollbar is the playhead: scroll forward and an element plays in, scroll back and it plays out, and a half-drawn line simply un-draws.

And the rule under all of it: every animation resolves to its finished state when the motion is absent — for a reader who has asked for reduced motion, for a page with no script, for a search engine. A drawing that is only complete after it has animated is a drawing some readers never see finished.

Key idea 5 of 7

A state is a decision, and every state gets one

Every control has more states than the one in the mockup: hover, focus, pressed, disabled, loading, refused, and the ones a script adds when something happens. An unfinished interface designs the first and lets the framework paint the rest. A finished one has a decision for each, and the decisions are consistent enough to be a rule.

Left to the defaults

• Disabled is the enabled button at half opacity
• Focus is whatever the browser draws, or nothing
• Refused looks like disabled, and says nothing
• Hover changes a color nobody measured

Decided

• Disabled is quieter, not lighter: ink that still clears its floor
• Focus is a ring in the accent, two pixels off the edge, on every control
• Refused is a rule in the one caution color, with the reason beside it
• Hover is a step on the palette, and its ratio is in the table

The cockpit prototype is where this matters most, because its interesting states only exist after a press. When a rule refuses an assignment, the button does not go gray; the refusal sits above the recommendation in the one caution color the interface spends, with the hours-of-service limit that caused it. That is a state with a decision behind it, and it was also the state no check could see until a registry taught them to press their way into it. The states a reader reaches are the interface; the resting page is the cover.

Key idea 6 of 7

Spacing is what makes a page read as one thing

Spacing is the least noticed and the most felt. A finished interface has a spacing scale — this site's is nine fixed steps from 4px to 48 and three fluid ones above that — and every gap on every page is one of them. That is what makes two components made a month apart sit together as if they were made in one afternoon.

It also decides how a change is made. This week the gap between the hero's actions and its facts came down by twenty pixels on a phone, and the twenty came off as two tokens, 48 to 40 and 32 to 20, rather than one margin landing on a number the scale does not have. A panel of four facts went from two columns to one below 640, because at 390 wide two columns of serif were eight short lines to read two facts. Each of those is a small decision, and each was made against a scale rather than by nudging until it looked right — which is the whole difference. Nudged looks right today. Decided looks right next to the thing built next year.

Key idea 7 of 7

Craft is what you can hold the page to

All of the above is a list of decisions, and a list of decisions decays. Someone adds a size, a color, a 300-millisecond transition, and none of it is wrong enough to notice. So the last thing that makes an interface feel finished is not on the screen at all. It is the set of checks that measure the rendered page and refuse the change that breaks a rule.

1. Colordoes every ink clear its floor on the ground it actually sits on, at rest
2. Statedoes it still clear when hover, focus and a script's own state are forced
3. Typeis every rendered size one of the fourteen, at four widths
4. Curvedoes every border follow the whole corner, or only part of it

The last of those is the one people find surprising. A rounded surface with a border on one side only, or a border that stops where the radius begins, is a small thing a renderer does by default and one of the most reliable tells of an unfinished page. On this site a check counts every element with a curved corner — fourteen thousand of them — and refuses any whose border does not follow the curve all the way round. Nobody would write that rule down for a reader. It is exactly the kind of rule a reader feels.

This is what I mean when I say craft: not an eye, though it takes one, but a short list of things that can be named, a scale for each, and something that refuses the page when it drifts. That is the difference between an interface that looked finished the day it shipped and one that still does.