← Field Notes
Creative12 August 2026·10 min read·Chris Ma

THE
SWAP
TEST.

Taste is pattern recognition, not talent. The deliberate practice that builds it, and the diagnostic that keeps your work from being a default.

DesignUI DesignTypographyVisual DesignFigma

Taste is not talent. It is not a style you were born liking. It is a trained pattern-recognition skill — built the same way any skill is built: repeated exposure to good and bad examples, paired with the discipline of naming why one beats the other. Designers who “just have an eye” spent years doing this. They just didn’t call it training.

The gap between “I like this” and “this works because of X” is the entire distance between having preferences and having taste.

Key Takeaways
  • Taste is a trained pattern-recognition skill, not an innate talent. It is built through repeated exposure to good and bad examples paired with the discipline of naming why one beats the other.
  • The Swap Test is the core diagnostic: swap the logo and copy for an unrelated brand. If the design still makes sense, it came from a default, not from the subject.
  • Typography is the largest single leverage point in frontend design: one display face plus one body face, consistent scale, and maximum contrast in the type itself.
  • The two-pass process separates structure (first pass) from polish (second pass). Skipping the first pass produces work that looks finished but cannot be improved systematically.
  • AI-generated design defaults to the same handful of looks for the same reason untrained designers do: they are statistically safe. The swap test catches this too.
01

COMPETENT OR DISTINCTIVE

#

There is a specific reason a huge share of current interfaces cluster around the same handful of looks: warm cream backgrounds with a serif display face and a terracotta accent; near-black with one acid-green accent; broadsheet layouts with hairline rules and dense columns. None of these are wrong. What makes them a problem is that they are defaults, reached for regardless of subject, rather than choices made because a specific brief called for them.

Competent design executes a template well. Distinctive design makes choices that could only belong to this specific subject. The diagnostic worth running on your own work is direct: swap the logo and copy for an unrelated brand. Does the design still make sense? If yes, the design is not coming from the subject — it is coming from a default.

BRAND AGet startedTypography, palette, and layout chosen for this subject.Designed for this briefswapBRAND BGet startedSame design. Different brand. Still makes sense?Logo swapped — still works? It's a default.If the design survives the swap, it wasn't made for this brief. Revise before shipping.
The swap testBefore calling anything finished: would this design still make sense with a competitor's logo and copy dropped in? If the honest answer is yes, it has not actually been designed for this brief yet.
02

TRAINING YOUR EYE

#

This is deliberate practice, not passive scrolling. The difference is whether you are forcing yourself to name why. Four practices that actually compound into taste:

Break down designs you respond to, every time.

Use the same checklist below. The forcing function is consistency — running the same questions on every piece you study is what builds a real pattern library in your head, rather than a collection of things you vaguely admired.

Redesign something that already exists.

Pick a page with a real, specific problem — use your own past work. This forces active problem-solving in a way passive inspiration-browsing never does, because every choice has to be justified against a real constraint rather than admired in someone else's finished result.

Imitate deliberately, then interrogate the imitation.

Copying a card layout or a button is not cheating — it is how visual vocabulary gets internalised. The value is not in the copy; it is in the questions you ask while doing it. Skipping that interrogation step is what separates genuine skill-building from just tracing.

Build the theory alongside the practice.

Colour theory and typography fundamentals are not optional extras — they are what let you explain why something works instead of just recognising that it does.

BREAK DOWNRun the checklistColour · Type · Balance · Spacing ·Consistency · Tone — on every designyou respond to, every time.REDESIGNRebuild something realPick a page with a specific problem —your own past work. Every choice mustbe justified against a real constraint.IMITATE + INTERROGATECopy, then ask whyCopy a card or button layout. Then:why this font, why this spacing,why this colour and not an adjacent one?BUILD THEORYExplain, not just recogniseColour theory and typography fundamentalsare what let you say why it works —not just that it does.DELIBERATEPRACTICE
Breakdown checklist — run this on every design you study:

  Colour       how many, what relationship, what's doing the work vs. neutral
  Typography   how many faces, what roles, what the size/weight contrast is doing
  Balance      what's heavy, what's light, where the eye lands first and why
  Spacing      systematic (a real scale) or arbitrary per element
  Consistency  same recurring element behaving the same way everywhere
  Tone         does the copy match the visual register, or fight it
03

THE FUNDAMENTALS

#

Most interface problems are solved by contrast, size, and spacing — used deliberately — long before you need a clever idea. Four principles that do the most work for the least effort:

FEWER BORDERSborders add noisewhitespace separatesSPACING AS A SYSTEMarbitrary gaps4/8/16 scaleCONTRAST FOR HIERARCHYSection titleBody text hereCaption informationno hierarchySection titleBody text hereCaption informationclear hierarchyCONSISTENCYPublish→ toast: "Submitted"breaks mental modelPublish→ toast: "Published"reinforces mental model

Fewer borders than you think.

Borders read as busy at scale. Box shadows, extra whitespace, and background-colour shifts separate elements more cleanly than another hairline. When in doubt, remove the border and add space.

Spacing follows a system, not a feeling.

An arbitrary spacing value on every element reads as noise even when no single value looks wrong in isolation. A real type/spacing scale is what makes a page feel considered rather than assembled screen-by-screen.

Contrast does the hierarchy work.

Before reaching for a new colour or a bigger element, ask whether size, weight, or spacing contrast alone would do it. Restraint in the palette, real contrast in the structure.

Consistency is how people learn an interface.

The same action should look and read the same everywhere it appears. A button labelled "Publish" that produces a toast saying "Submitted" breaks the mental model a user is quietly building — small inconsistencies erode trust faster than almost any visual flaw.

04

THE TWO-PASS PROCESS

#

Taste that never gets externalised into a real decision does not count. This is the discipline that separates knowing what good looks like from actually shipping something distinctive.

PASS 1Plan before you touch a canvas.Colour4–6 named hex values, not "blues and greys"TypeDisplay face + body face. Utility if needed for data.LayoutOne-sentence concept + rough wireframe.SignatureThe single element this design will be remembered by.PASS 2Interrogate the plan.For every choice: would I make this samechoice for an unrelated brief?If yes → revise. Name what changed and why.Only once the plan holds up does it earn the right to build.BUILDSpend boldness in exactly one place.One bold idea with total restraint around it reads more confident than five ideas competing.

Pass one is a named token system: four to six hex values stated explicitly (not “blues and greys”), a characterful display face used with restraint, a complementary body face, a rough wireframe to compare structural ideas before committing pixels, and the single signature element this design will actually be remembered by.

Pass two is the interrogation: for every choice in the plan, would you make the same choice for an unrelated brief? If the honest answer is yes, that choice is not coming from the subject. Revise it and name explicitly what changed and why. The plan earns the right to become the build only once it holds up under this check.

Spend boldness in exactly one place. Pick the single signature element that carries the risk, and keep everything else quiet and disciplined around it. A design with five bold ideas competing for attention reads as less confident than a design with one bold idea and total restraint everywhere else. Before calling something finished, look once more and remove one thing.

05

COPY IS DESIGN MATERIAL

#

Copy is one of the fastest ways a design reveals whether it is genuinely considered or templated. Generic copy makes even a well-executed visual system read as hollow.

Write from the user's side of the glass.

Name things by what people recognise and control, not by how the system is technically built underneath.

Active voice, consistent naming through the whole flow.

A button that says "Publish" should produce a result that says "Published" — not "Submitted," not "Done." Inconsistent naming erodes trust in the whole interface faster than almost anything visual.

Specific beats clever, every time.

A label that plainly states what will happen beats a witty one that requires a beat of decoding.

Errors and empty states are opportunities.

An error should state exactly what happened and how to fix it, without apologising. An empty state should read as an invitation to act, not a dead end.

06

THE AI-DESIGN FILTER

#

The same default-vs-choice test from Section 01 is what you should run on AI-generated design output before accepting it. AI models cluster on the same handful of looks for the same reason designers without trained taste do — they are statistically safe, broadly inoffensive defaults, not decisions made for a specific subject.

DEFAULT CLUSTERwarm cream + serif + terracottanear-black + acid-green accentbroadsheet + hairline rulesfits any brief — which means it fits noneTHE SWAP TESTSUBJECT-DRIVENChoices that could onlybelong to this brief.Passes the swap test.wouldn't make sense for an unrelated brandAI models and designers without trained taste cluster on statistically safe defaults. The swap test catches both.

Does the palette relate to the subject, or is it a safe default?

Warm cream and terracotta fits almost any brief. So does near-black with one acid accent. If the palette would work for an unrelated brand, it has not been designed for this one.

Is there one deliberate signature element?

Or is everything competing equally for attention? AI output tends toward uniform emphasis — bold choices everywhere, which reads as no choices at all.

Does the type pairing feel chosen?

Or is it the same two families that show up everywhere? The same high-contrast serif display over a neutral sans-serif body is the visual equivalent of a stock-photo hero.

Is motion serving the content, or signalling its origin?

Decorative animation that exists to look polished — without communicating anything — is one of the clearest tells. Motion should earn its place the same way any other design element does.

Would it survive having the logo swapped?

Run the same test you run on your own work. If the answer is yes, accept the output as a starting structure — then design it.

07

BEFORE CALLING IT FINISHED

#

Run this checklist before shipping anything:

The self-check
  • Named, specific colour and type choices — not "blues" but the actual hex values and the reason for them.
  • One clear signature element. Everything else disciplined around it.
  • Passes the swap test — would not make sense for an unrelated brief.
  • Spacing follows a real scale, not per-element judgment calls.
  • Copy matches the visual register and stays consistent through the whole flow.
  • Reviewed after time away from the screen, not only in the moment of building.

A template executed well is not design — it is production. The swap test is how you tell the difference, on your own work and on everything a model generates for you. If it survives the swap, it hasn’t been designed yet.

Recommended Reading

Don Norman · Basic Books

The foundational text on human-centred design — affordances, signifiers, and feedback loops that explain why some interfaces feel obvious and others feel broken.

Adam Wathan & Steve Schoger

Practical visual design for developers: specific rules for spacing, typography, colour, and hierarchy that produce professional results without formal design training.

Josef Müller-Brockmann · Niggli Verlag

The original systematic treatment of typographic grids — understanding this makes every layout decision intentional rather than intuitive.

Continue the conversation

If this changed how you think about it — or you think I'm wrong — I want to know.

Corrections, disagreements, and applications all welcome. Replies go directly to Chris.

Get in touch →
Field Notes · PodcastHost + Expert · Gemini TTS

THE SWAP TEST

~6-8 min

1× · Two speakers · tap to play