LLOS.ai
Theory vs Practice
🎭 Designer Memes · The Finale

The Hall of Shame

Five themes, twenty crimes — and behind every one, the same handful of forces wearing a reasonable face.

No designer breaks the grid, bloats the system or grey-washes the text on purpose. It’s always one of these villains, dressed as a deadline or a stakeholder or a 4px nudge. Here’s the rogues’ gallery — and the playbook for the meeting where you defend the work.

The Hall of Shame

The villains aren’t people — they’re the forces. Every crime in this article was one of these wearing a reasonable face. Tap a card to see how it strikes, and how you defend.

🐙
Scope Creep
One ‘small’ addition at a time.
tap to see how it strikes →
Scope Creep
How it strikes

Turns a simple screen into a kitchen sink — each ask reasonable, the sum a mess.

How you defend

Name the one job of the screen and make new asks fight for room. Default answer: not yet.

🦛
The HiPPO
Highest Paid Person’s Opinion.
tap to see how it strikes →
The HiPPO
How it strikes

Overrides the research, the data and the room with a gut feeling nobody can question.

How you defend

Bring the data and the goal you agreed up front. Opinions lose to a number and a north star.

👆
The Nudge
The 11pm hand-drag nobody undid.
tap to see how it strikes →
The Nudge
How it strikes

A single element shoved 4px off the grid — invisible alone, fatal at scale.

How you defend

Snap to the grid, then tokenise it so the next nudge has nowhere to land.

The Deadline
‘Ship it, fix it later.’
tap to see how it strikes →
The Deadline
How it strikes

Later never comes. The shortcut becomes the permanent state and breeds forty more.

How you defend

Cut scope, not quality. A smaller thing done right beats a big thing done wrong.

📋
The Handoff
Where decisions become guesses.
tap to see how it strikes →
The Handoff
How it strikes

Hand over a screenshot and the dev approximates — design and code drift forever.

How you defend

Hand over tokens and components, not pictures. The build should inherit the decisions.

🔍
The Pixel Peeper
Redlines everything, misses the point.
tap to see how it strikes →
The Pixel Peeper
How it strikes

Burns the review on a 1px shadow while the hierarchy quietly fails.

How you defend

Spend the attention budget on what the eye actually does first, not the last pixel.

👮
The Brand Police
‘Bigger logo. Our blue. Everywhere.’
tap to see how it strikes →
The Brand Police
How it strikes

Lets the brand win the page so the user’s actual task loses.

How you defend

Brand shows up by the product working. Let the action win; the logo sits in the corner.

📝
Lorem Ipsum
The placeholder that lies politely.
tap to see how it strikes →
Lorem Ipsum
How it strikes

Always the perfect length — so it designs a layout for content that doesn’t exist.

How you defend

Design with the real, worst-case string: the 40-char name, the empty list, the angry error.

🔀
The Endless A/B Test
Two designs, forever.
tap to see how it strikes →
The Endless A/B Test
How it strikes

Ships both variants indefinitely — two fonts, two buttons, two of everything.

How you defend

Set a deadline and a metric. A test that never ends is just indecision with analytics.

🔥
The Redesign
‘Let’s just start fresh.’
tap to see how it strikes →
The Redesign
How it strikes

Throws away every hard-won lesson to chase a clean slate that’ll get just as messy.

How you defend

Fix the system, don’t torch it. Most ‘redesigns’ are an audit and a lock away.

‘Make it Pop’
Feedback with no shared goal.
tap to see how it strikes →
‘Make it Pop’
How it strikes

A feeling dressed as a brief — impossible to build, impossible to satisfy.

How you defend

Translate it to a lever: pop how, in service of what? Contrast, weight, space — name it.

🗣️
The Stakeholder Round
Feedback as a poll of feelings.
tap to see how it strikes →
The Stakeholder Round
How it strikes

Five unaligned opinions per round, none converging — round 14, ‘go back to v1.’

How you defend

Agree the goal before pixels and name one decider. Then feedback is execution, not a vote.

Meme Method

Twenty crimes, twenty fixes — the whole series on one page.

1 · The Invisible Skeleton
“One 13px margin invites 7 and 25 to the party.”
Snap every value to the 8-point scale.
“There’s empty space — so fill it, and nothing breathes.”
Protect the space around what matters; isolation is emphasis.
“Everything’s ‘about right’ and nothing lines up.”
Put it all on one shared edge.
“Four body sizes a pixel apart, called hierarchy.”
One body size from the scale; snap headings to real steps.
2 · Type & Colour
“Six fonts, and it reads like a ransom note.”
Two families, tops; let weights carry the rest.
“The brand colour is on everything, so it points at nothing.”
60-30-10 — the accent stays rare.
“‘Grey looks premium’ — to everyone who can still read it.”
Clear ~4.5:1 for body; measure, don’t eyeball.
“Dark mode by inverting; the accent glows like a fire alarm.”
A second design: dark base, lightness for elevation, desaturated accent.
3 · Where the Eye Goes
“The logo got promoted; the user journey got demoted.”
Name the goal; shrink the brand; let the action win.
“Every button is primary, so none of them is.”
One primary, used once; ghost the rest.
“Four icon styles brought snacks to one meeting.”
One family; draw gaps in its style; lock the library.
“The mood board has every mood except direction.”
Name the feeling in three words; cull to five that agree.
4 · One Source of Truth
“Forty buttons that are ‘basically the same.’”
One source; one change reaches everywhere.
“Perfect — until a real name and a seven-figure price arrive.”
Design for the worst-case real string first.
“The loading screen is so blank the app looks dead.”
A skeleton of the layout; structure makes the wait feel fast.
“The first thing a new user sees just says ‘No data.’”
One line of purpose + one button — free onboarding.
5 · The Telephone Game
“The build is ‘basically the same,’ give or take every spacing.”
Hand over tokens, components and states — not pictures.
“Feedback round 14; the goal left at round 2.”
One signed sentence + one decider, before pixels.
“Twenty reasonable ‘one more things’ add up to a cockpit.”
Make ‘no’ the default; each ask earns its place.
“Flawless on phone and desktop; detonates at 768px.”
Design the in-between; constrain with minmax(0,1fr).

The meme is funny because it’s true. The method is useful because it stops being true next time.

The Pushback Playbook

Twenty-two answers to the questions you actually get in the meeting — the polite, specific way to defend the work.

How do I actually say no to ‘make the logo bigger’?
Don’t argue taste — argue the goal. ‘The user is here to do X; every pixel the logo takes, that action loses.’ If they push, show the bounce rate or a quick heatmap. Hierarchy is zero-sum, and a number ends the debate a feeling can’t.
How do I stop feedback round 14?
You can’t fix it at round 14 — you prevent it at round 0. Get one sentence signed before any pixels: the single thing this design must achieve. Name one decider for ties. After that, every note gets filtered: does it serve the goal, or is it a preference? Preferences get parked.
The client wants their brand colour on everything. What do I do?
Explain that an accent is a pointing finger: point at everything and you’ve pointed at nothing. Show them 60-30-10 — the brand colour as the rare 10% that makes the action unmissable. They want impact; rarity is the impact.
How do I push back on ‘just one more thing’?
Make ‘no’ the default and ‘yes’ earn its place. Keep the one job of the screen visible. Each ask: does it serve that job today? If not, it goes behind an advanced view or a menu — not on the wall. Twenty reasonable yeses are how simple becomes complicated.
How do I defend whitespace to someone who wants it ‘filled’?
Whitespace isn’t empty, it’s the thing that makes the one element you want seen impossible to miss. Show the before/after: same content, crammed vs. given room. Cluttered reads as panic; spacious reads as confidence. They’re paying for attention, and attention needs the silence around it.
The dev says it’s ‘basically the same.’ How do I get pixel-accuracy?
Stop handing over pictures. Hand over tokens (colour, spacing, type) and the real component with every state. When the build inherits the decisions instead of re-guessing them, ‘pixel-perfect’ stops being a fight and becomes the default. Drift is a handoff problem, not a dev problem.
The CEO doesn’t like it but can’t say why. Now what?
‘Don’t love it’ is usually an unaligned goal, not a design flaw. Re-surface the one thing you agreed this design must do, and ask: is it failing that, or is this a preference? Often the discomfort is a missing north star, and naming it dissolves the vague ‘no.’
How do I handle two stakeholders giving opposite feedback?
Don’t average them — that pleases no one and breaks the design. Name one decider, put both asks in front of them with the trade-off made visible (‘add this and we lose that’), and let them choose. Your job is to show the cost clearly, not to split the difference.
Is dark mode just inverting the colours?
No — that’s the trap. Pure-black backgrounds vibrate, copied shadows vanish, and a saturated accent glares like a hazard light. Dark mode is a second design: start from dark grey, rebuild elevation (lighter = higher), soften the text and desaturate the accent.
How light can grey text actually be?
Light enough to look calm, dark enough to clear about 4.5:1 against its background (3:1 for large text). ‘Looks fine on my laptop’ isn’t the test — a contrast checker is. Then sanity-check it on a cheap screen in daylight, because that’s where your users actually are.
How many fonts is too many?
Two, tops — one workhorse for text, optionally one display for headlines. Past that it’s a ransom note. Most ‘I need another font’ moments are really asking for a different weight, an italic, or some tracking. Give them that instead.
When is it actually OK to break the grid?
Once, on purpose, for the one thing that matters most. A grid earns its power by being kept — which is exactly why a single deliberate break becomes an instant focal point. Break it twice and you don’t have a grid, you have noise.
Nobody gave me content for the empty states. How do I design them?
Empty states are the most-seen screens you never design — every new user starts there. Don’t ship ‘No data.’ Write one line on what the space is for and add the single button that gets them started. It’s the cheapest onboarding you’ll ever build.
Real copy isn’t ready — design with lorem or wait?
Neither — design with the realest draft you can write, including the worst case. Lorem is always the perfect length, which is exactly why it lies: it builds a layout that only works for content that doesn’t exist. The 40-char name and the empty list are where users live.
How do I stop the design system becoming 40 near-identical buttons?
The moment a component is ‘just this once’ detached and tweaked, it stops being the source of truth. Audit the strays, define the real variants you need, re-attach everything, delete the orphans, and tokenise colour/radius/spacing so one change still reaches everywhere.
My mood board has 200 pins and no direction. How do I get to one?
A board’s job is to remove options, not collect them. Name the feeling in three words, cull anything that doesn’t obviously serve them (most of it goes), and get to five images that genuinely agree. Caption each so the board argues for itself in the meeting.
The site breaks at tablet width. How do I prevent it?
Because nobody designed the in-between. A site isn’t two layouts, it’s every width between them — and the middle is where real users are. Design the awkward seams (~768, ~834), constrain children (minmax(0,1fr), max-width on text/media), and slowly drag-resize to find where it snaps.
How do I make a layout look ‘professional’ with zero budget?
Put everything on one shared edge. Alignment is the single cheapest way to look expensive — it switches off a hundred tiny ‘this feels off’ alarms at once, costs nothing, and quietly says ‘an adult made this.’ Do that before reaching for shadows or a pricier font.
They want every feature on one screen. How do I argue for simple?
Simple isn’t how little you start with — anyone can draw a clean v1. It’s the discipline of a hundred small noes afterwards. Reframe the ask: power features live behind one door (an advanced view), not on the wall. A screen that does one thing well beats one that does ten things badly.
My PM wants it shipped Friday and it’s not ready. What do I cut?
Cut scope, never quality. Ship a smaller thing that’s right rather than a big thing that’s broken — because ‘fix it later’ is how the broken version becomes permanent and breeds forty more shortcuts. Decide the one must-work flow and make that flawless.
How do I get sign-off before round 1, not after round 14?
Make the goal a deliverable, not an assumption. Before you design, write the one outcome this must achieve and the one decider who breaks ties, and get both agreed in writing. It feels slow; it saves the three weeks that ‘actually, go back to v1’ costs.
Why does my layout feel ‘cheap’ when nothing is obviously wrong?
Because lots of tiny things are slightly wrong — a 13px margin, a 4px misalignment, a 17px that should be 16. None is a visible bug, but together they’re a constant low hum of ‘rushed.’ Round the spacing to a grid, snap to one edge, collapse the type sizes; the hum stops.
The Final Scene

One landing page. Eight crimes from across all five chapters, hiding in plain sight. Find them all.

Ch.3 · Billboard Logo
LOGO
Ch.2 · #999 Whisper
Ch.3 · Wall of CTAs
Ch.3 · Icon Zoo
Ch.2 · Brand-Colour Everywhere
Ch.1 · The Eyeballed Nudge
Ch.4 · The Lorem Trap
Ch.5 · The 768px Snap
0/8 crimes foundTap the crimes. Trust the itch that says ‘that’s off.’
Designer instinct unlocked.

You can spot all twenty tells in the wild now — that’s the eye. The other half of the craft is building the structure they break, from the first frame.

Now go build it right — Visual Hierarchy →
Companion seriesVisual Hierarchy — where you learn to build the structure these crimes break.
Open the series →
🔁
The series · complete

Now go open a real file.

You’ve seen how every principle dies, and the method that saves it. Start the series again with new eyes — or head over to the Visual Hierarchy series.

Back to Part 1 →