The unslop pass

Step through this hero from left to right. Each step changes one layer of decisions.

The previous lessons were a catalog: what the tells are. This one is the procedure, the unslop pass. It has two halves, and the second is not optional: a screen scrubbed of tells with no opinion of its own is still generic, just quieter.

The pass

1. Squint

   Could this screen belong to any of ten thousand products? Find what ties it to this one. If the answer is "the logo", everything else is up for review.

2. Subtract before you restyle

   Walk every element (icon, line, badge, caption, container, word) and ask what breaks if it's gone. If nothing, delete it. Then walk again: deletions expose each other.

3. Sweep in order

   Color, typography, layout, decoration, icons, copy, motion. Color first because it is the loudest: a page survives a common layout, not indigo-to-purple.

4. Put a point of view back

   One real palette, one type decision, the actual product, a signature (below).

5. Final read

   "What here would make a designer suspect a model built this?" Fix it. Repeat until nothing.

"It adds visual interest" and "it fills the space" are exactly the reasons the model put something there. Deletion is free, can't introduce a new tell, and gives every survivor hierarchy for nothing.

What the sweep catches

Looking designed by someone

• Derive the palette from something real: the domain (ledger green for invoices), the brand, the content.
• One distinctive type decision. One is enough; three is a costume party.
• Show the actual product: a real screenshot, real data, a working embed.
• Let content break symmetry: an odd number of features, one oversized item, a section that is just a sentence.
• Repeat a signature: one odd element used consistently beats ten borrowed ones used once.
• Restraint is a feature. The confident version has fewer effects. Adding "personality effects" on top is re-slopping with extra steps.

The pass ends when you can name the one choice a competitor couldn't copy and paste. If nothing on the screen answers, you stopped halfway.

Critique the render, not the code

An agent that reviews the page it just wrote reads its own intentions back: the class says hero, so it sees a hero. Screenshot critique fixes that. Take screenshots at 1440, 768 and 390px wide, first screen and full page, and look at them before the code.

Then make single-purpose passes, one at a time. Here is one of them, the edges pass:

1. One second, then five

   Glance away: there should be one answer (a word, an image, an object), not "a website". Then five seconds as a stranger: what is this, who is it for, what do I do next?

2. Squint, cover the logo, scroll

   Does the idea reach the pricing and footer, or turn into stock blocks after the first screen?

3. Edges

   Two or three left edges reused on purpose is a composition. Six means things were placed one at a time.

4. Frame and sameness

   Equal margins, no half-empty sections. Write one word per section's layout (split, list, grid, statement); the same word three times is the template showing.

5. Phone

   Is 390px its own composition, or the desktop squeezed?

6. Fullness and collisions

   Does every section deliver its information at a readable size? Is anything overlapping a headline or button?

Write it down, fix in order, stop at three

Every round gets the same short write-up:

ROUND 1
Seen in one second: a purple blur
Idea (one sentence): invoices from tracked time
Layout words: hero=centred / features=grid / proof=logos / faq=list
Top three problems, most visible first:
1. hero: headline any product could use. Fix: the one-click invoice claim
2. features: three equal icon cards. Fix: one screenshot full-width, rest as a list
3. proof: "10,000+" with gray logos. Fix: cut until we have a real number

Name findings the way a designer talks to a colleague: "the paragraph starts 40px left of the headline". "Could be more polished" is not a finding.

Fix in this order: idea, hierarchy, composition, type, imagery, color, detail, motion. Later items can't rescue earlier ones; no amount of kerning saves a page with no idea. Run at most three rounds, and if the last still falls short, say so plainly instead of rounding up.

Run an unslop pass on this page.
1. Screenshot it at 1440, 768 and 390 (first screen + full page) and critique the render before reading code.
2. Subtract: list every element whose removal breaks nothing; delete them; repeat once.
3. Sweep color → type → layout → decoration → icons → copy → motion against the usual tells.
4. Put a point of view back: a palette from the domain, one type decision, a real product screenshot, one repeated signature.
Write each round as: seen in one second / idea in one sentence / layout word per section / top three problems with fixes. Fix in order idea → hierarchy → composition → type → imagery → color → detail → motion. Stop after three rounds and report what is still weak.