How we critique our own UI

This page is for people who build W4's interface. The rule is simple: "looks ok, next" is never an exit. A screen is judged on real screenshots, in writing, against the guides, and fixed until a pass finds nothing worth fixing.

The loop

1. Build the screen or component.
2. Capture it at 4K and read the image. Crop and zoom into icons, text edges, borders and shadows.
3. Critique in writing against every lens below. Name concrete defects ("the tonal button text is 3:1 on its fill"), not "fine".
4. Fix the worst defects, capture again and compare.
5. Repeat until a pass finds nothing, then once more with fresh eyes: squint test, neighbouring screens, other states.
6. Revisit later. Opening an old screen for another reason is a reason to look at it critically again.

Plan at least three rounds for anything new.

The critic may condemn anything

Every round asks whether the idea is right, not only whether the values are. Allowed verdicts include:

• It looks bad: throw it away and do something completely different.
• It is inconvenient: the steps should be different (fewer clicks, a better default, a preview, an undo).
• It is in the wrong place: closer to what it affects, or where the eye lands.
• The page is aligned wrongly: change the grid, the axis, the proportions.
• The flow is wrong: reorder, merge or split screens.
• The need is wrong: the player may not need it at all, or there is a better way to use it.
• The presentation is wrong: a table that should be cards, a menu that should be radial, text that should be an icon and a number.

Each round records which verdicts were considered, taken and rejected, with the reason.

Be harsh

For anything that is merely fine, write at least five alternatives (another construction, style, layout, interaction, step count, feedback) and pick one on purpose. Keep the rejected ones in the notes so nobody retries them blindly. "Good enough" is a defect.

The lenses

• Guidelines: colour means a role, six sizes, long things cut down, states animate, empty, error and loading states exist.
• Style: not flat, not a grid of identical rectangles, one clear focal point.
• Motion: springs and custom curves, staggers, no flat linear fades.
• Hierarchy: what is read first, second, third.
• Rhythm and spacing: one grid, aligned edges, equal gaps for equal relations.
• Contrast: measured, not eyeballed; the squint, greyscale and colour-blind checks.
• Consistency: the same job uses the same widget.
• States and edges: hover, pressed, disabled, focus, empty, long text, many items, small windows.
• Cost: nothing per frame for what is off screen.

Judge it as an atelier

Imagine W4 as a studio of artists and fashion people. Silhouette and proportion, a palette that reads as a collection, material and finish, typography as a statement, couture detail at 100 per cent zoom, room to breathe, mood. The pride test: would we put this screenshot on the front page? If not, it is not done.