Editorial · chosen by hand
Seventeen practices that are nobody's requirement. Every one of them is the difference between a surface that was built and a surface that was finished, and not one of them would be raised in review.
The rest of this site is filters. You press a chip and a rule decides what you get, which is the only honest way to run a catalogue: the same question asked twice returns the same answer, and the person who adds the next practice does not have to guess.
This page is not that. It is a shelf, in an order I chose, of the work I keep going back to look at. There is no rule behind it. If you asked me why hit slop is here and gapless hit targets is not, the true answer is that one of them still surprises me and the other does not, which is taste and cannot be checked.
So it is signed. Everything below is reachable through the chips, and the chips will tell you what they hold. This tells you what somebody thought.
01 / 17
Start here, because it is the one people do not believe until they see it. Two rounded rectangles, one inside the other, same radius on both — and the gap between them swells at every corner while staying constant down the sides. Nothing is misaligned. The eye is just measuring the shortest distance between two arcs, and that distance is larger on the diagonal. Subtract the padding from the outer radius and it goes away.
02 / 17
The same idea, moving. Scale a panel unevenly and its corners go with it: a circle becomes an ellipse, and for the length of the animation the thing does not belong to the same family as the card behind it. You only catch it if you scrub the transition frame by frame, which is why it survives in so much otherwise careful work.
03 / 17
A play triangle has more area on its left than its right, so a triangle centred by its bounding box reads as sitting left. Every media control you have ever liked is nudged. What makes it worth a place here is what happens on a swap: put an unnudged triangle next to a centred square and the ink slides sideways every time you press.
04 / 17
A label written across a slider track has to be readable on both sides of the thumb, and for the 900ms the thumb takes to travel it is on both. Flipping the whole label when the thumb passes the midpoint is the version everyone ships. Clipping a second, inverted copy to the thumb's own position is the version where you cannot find the moment it changed.
05 / 17
The oldest one here and still the clearest example of what the shelf is about. A list that stops dead at its end is not broken — it is at the end. But the flick had force left in it, and a surface that absorbs that force and hands it back tells you the list ended, where a surface that simply stops lets you wonder whether the gesture was dropped.
06 / 17
Centre a dragged card on the pointer and it jumps out from under your finger the instant you press. The fix is four lines: remember where inside the card you grabbed it. It is on the shelf because the defect is completely invisible in a screenshot and completely obvious in the hand, which is most of what this page is collecting.
07 / 17
The expensive one, and the only one here that changes what a screen means rather than how it feels. A tile that grows into the panel it opened has already answered the question the user was about to ask. A tile that vanishes while a panel fades in leaves them to work it out, and they will, in about 200ms of attention you did not have to spend.
08 / 17
Same argument, a tenth of the cost. One marker element that travels between tabs instead of a marker per tab that appears and disappears. The eye tracks a moving object for free; it has to re-find a teleported one. This is the cheapest thing on the shelf and it is why good tab bars feel like a mechanism.
09 / 17
Springs are where taste turns into a number. Under about 0.5 damping a panel oscillates around its rest position, and the visual vocabulary for that is cheap plastic. At or above it the thing crosses its resting line once and stops, and reads as having mass. The whole argument is one coefficient, which is why it is so often left at whatever the library shipped.
10 / 17
Ease-in-out on both directions is the default, and it is wrong in both. Something arriving should decelerate — it was caught. Something leaving should accelerate — it was released. Symmetrical easing makes an entrance feel delivered by machinery and an exit feel reluctant. Two different curves, no extra frames.
11 / 17
A drawer that finishes opening before it will consider closing is arguing with you. Retargeting from the current value costs almost nothing and turns every animation into something you can change your mind about mid-flight, which is the difference between a surface that responds and a surface that plays back.
12 / 17
One CSS declaration, and the reason a live figure can tick without shoving the label beside it. It is on the shelf as the clearest case of the shelf's whole premise: the cost is a single line, the defect is unmissable once you know it, and it is still wrong on most dashboards you will open today.
13 / 17
A paragraph that opens on a quotation mark is not misaligned, but it looks it, because the mark is mostly air and the eye aligns on ink. Hanging the punctuation into the margin makes the column read straight. Typesetters solved this before software existed and the web spent twenty years without a property for it.
14 / 17
Two words that hand your theme to everything the browser paints for itself: scrollbars, form controls, the caret, the spellcheck underline. Get it wrong and a dark surface has a strip of bright white running down its right edge, which no amount of care elsewhere recovers from.
15 / 17
A 44-pixel target behind a 16-pixel glyph, with nothing in the layout moving to accommodate it. Every icon button on a phone is doing this or failing. It earns its place by being the one item here that is purely about the hand — there is nothing to see, and you can feel it the moment it is missing.
16 / 17
Labels that appear at one zoom level and disappear at another will strobe if you sit on the boundary, and people do sit on the boundary, because that is where they stopped. Separate thresholds for entering and leaving — hysteresis, the same trick a thermostat uses — and the view holds still.
17 / 17
Last, because it is the hardest to get right and the most obvious when it is wrong. A custom rail that stops where the finger stopped is not a scroller, it is a drag handle. Project the release velocity to a landing and it joins the platform. Everything else on this shelf is a detail; this one is the whole feel of a surface.
Chosen and ordered by inadram studio. Every practice here is in the catalogue under its own rule, and the catalogue will tell you why it is there. This page only tells you why it is here. These seventeen are also a tool: snag surveys a page against them and reports what is missing, a row per practice. Back to all 103 practices.