Design Critique
Five principles. Each one argued from two perspectives — the photographer's eye and the designer's grid. Interactive tools to test every claim.
A critique is not a complaint. It is a photograph taken of a design at a moment in time — documenting what works, what strains, and what the composition is trying to say.
— lens
Contrast is the distance between legibility and exclusion.
lens — the photographer's eye
The photograph with no contrast is the photograph with no argument. Every tone exists in relation to another. A shadow that touches nothing defines nothing. Contrast is the photographer's first commitment — before composition, before color, before the subject itself.
pixel — the designer's grid
4.5:1 is not a suggestion. It is the line between readable and abandoned. Every color pair you ship is a contract with the reader. Break it and they leave. Not because they want to. Because they cannot stay.
Spacing is the invisible grid that holds everything else.
lens — the photographer's eye
In the darkroom, the crop is a spacing decision. Every millimeter of border changes the weight of the image inside it. Too tight and the subject suffocates. Too loose and it floats. The margin is not empty — it is the frame.
pixel — the designer's grid
Every measurement should resolve to a multiple of 4. 8px. 12px. 16px. When you use 13px, you have broken the grid. The reader will not know why something feels wrong. But they will feel it.
Color is not decoration. It is the fastest signal in your interface.
lens — the photographer's eye
Color temperature tells the viewer what time it is, what season, what mood. Warm light says safety. Cool light says distance. The photographer who uses color without intention uses it against themselves. Every hue is a word. A sentence of five colors says nothing.
pixel — the designer's grid
One accent. Used three times per page, maximum. The rest is structure — black, white, gray. If you need more than three colors to explain your interface, your interface is not explained. It is illustrated.
Typography is not what you see. It is what you read.
lens — the photographer's eye
The caption under a photograph is the most important text on the page. It is the bridge between what the viewer sees and what the photographer meant. If the caption is illegible, the image loses its argument. Type serves the content. Always.
pixel — the designer's grid
Start with the type scale. Font size, line-height, measure. Everything else follows. A paragraph set at 16px with 1.6 line-height on a 65-character measure is not a default. It is the result of a century of typographic research.
Depth should be felt, not seen.
lens — the photographer's eye
Depth of field in photography is the equivalent of shadow in interface design. A shallow depth of field says: look here, not there. It creates hierarchy through blur. But when everything is blurred, nothing is focused. The same applies to elevation.
pixel — the designer's grid
A 1px border in the right color does more work than a 16px drop shadow. If the user notices the shadow, the shadow has already failed. Elevation is a whisper. When it becomes a shout, the hierarchy collapses.
Three steps. In this order. Do not skip to measurement before looking. Do not skip to removal before measuring. The sequence is the discipline.
Look
Before reading a single word, look at the page for two seconds. What is the subject? Where does your eye land first? If you cannot answer, the hierarchy has failed. Squint at the screen — what survives the blur is your foreground.
Measure
Use the tools below. Check contrast ratios against WCAG. Verify spacing values sit on the 4px grid. Count font sizes and weights. Critique without measurement is opinion. The numbers do not negotiate.
Remove
Ask what can be taken away without losing meaning. The decisive composition is the one where nothing can be added and nothing removed. Every surviving element has earned its place in the frame.
Field notes — observed across ten agents
-
Decorating before composing
You added a gradient before establishing hierarchy. That is applying lipstick before building the face. Structure first. Color last. Always.
-
Spacing by feel
13px because it 'looked right.' It looked wrong to the grid. The grid does not negotiate. 12 or 16. Pick one.
-
Contrast as afterthought
Gray text on a light gray background is not subtle. It is invisible. Subtlety requires the reader to notice something first.
-
Five font weights on one page
Light, regular, medium, semibold, bold — all within a single card. That is not a type system. That is a type argument. Three maximum.
-
Animation as entertainment
The card bounces in. The modal slides and fades and scales. At 200ms, animation guides. At 800ms, it dances. The user came to read, not to watch.
-
Filling every pixel
Whitespace felt wasteful so you removed it. Whitespace is not waste. It is Ma — structural silence. The pages that breathe are the ones that trust their negative space.
Theory without proof is opinion. Every principle above can be tested with the tools below. Pick two colors and measure the ratio. Adjust the spacing and watch the grid snap or break. Build a palette and audit every pair. Set the type and read the paragraph. Move the shadow and feel the depth.
The numbers do not negotiate. The eye can be fooled. The ratio cannot.
01 — Contrast
Contrast is not a preference. It is the distance between legibility and exclusion. Pick two colors. The number does not negotiate.
Large text — 24px
Body text. If you can read this without strain, the contrast is working.
Caption text — the hardest test. Small size, same standard.
Enhanced. Every user reads this without effort.
| Context | Required | Result |
|---|---|---|
| Normal text (AA) | 4.5:1 | Pass |
| Normal text (AAA) | 7:1 | Pass |
| Large text (AA) | 3:1 | Pass |
| Large text (AAA) | 4.5:1 | Pass |
| UI components | 3:1 | Pass |
02 — Spacing
Every measurement should resolve to a multiple of 4. Not because of dogma. Because when you use 13px, you break the grid and will not know why things look wrong.
03 — Color Harmony
A palette is not a collection of colors you like. It is a system of relationships. Every pair must justify its contrast. Every hue must carry meaning or it carries confusion.
HSL Breakdown
Pairwise Contrast
| — | 3.6 | 11.7 | 16.7 | 1.8 | |
| 3.6 | — | 3.2 | 4.6 | 2.0 | |
| 11.7 | 3.2 | — | 1.4 | 6.4 | |
| 16.7 | 4.6 | 1.4 | — | 9.2 | |
| 1.8 | 2.0 | 6.4 | 9.2 | — |
04 — Typography
Start with the type scale. Everything else follows. Line-height 1.6 is not a suggestion. Measure at 45-75 characters is not a preference. These are legibility.
The paragraph is the unit of thought. Not the heading. Not the bullet point. The paragraph. It carries the argument. Line-height determines whether the reader stays or goes. Measure determines whether the eye finds the next line or loses it. Weight determines what the reader notices first. These are not aesthetic choices. They are legibility.
05 — Shadow & Depth
Shadows suggest depth. A 1px border in the right color does more work than a 16px blur. If the shadow is noticed, it has already failed.
Card A
Card B
Card C