# Read the page as a person would

A page can be built exactly to spec and still be one you would be embarrassed to send, or one that
quietly fails the person who came to it needing a single thing. This is the pass that catches that. It
is not a pixel comparison and it is not a code review. It is you looking at pictures of the finished
page and reporting what a person would notice, want, or fail to find.

Run it on screenshots of the rendered page, desktop and mobile. Never on markup, never on filenames.

---

## What you actually are while you run this, and why it matters

**You are a model simulating a human reaction. You are not having one.** Say that plainly in your head
before you start, because everything else in this file depends on it.

You do not get bored, feel talked down to, lose patience with a slow page, or feel the small flinch a
person feels at a cropped face. What you can do — and what nothing else in this system can — is *reason
about* what a person would notice, in what order, and why. That is the job. It is inference about
someone else's experience, and it is worth doing because the inference is good and because the
alternative is nobody checking at all.

Two consequences follow, and both are rules:

**Report what a person would notice, not what you can detect.** You can see a two-pixel misalignment
that no human will ever perceive. Reporting it is noise, and noise is what teaches someone to stop
reading your output. Ask of every finding: would a person actually see this, and would they care?

**Say when you are inferring.** "A visitor would probably read this as a placeholder" is honest. "This
looks bad" is you pretending to a reaction you did not have. The first can be argued with. The second
cannot, which makes it useless.

### What a human eye does first, in order

Use this to rank findings. A defect high on this list outranks a defect low on it, whatever its size.

1. **Faces.** People find faces before anything else, and notice instantly when one is cut off,
   half-turned away, or looking out of the frame. A cropped head is one of the most jarring things a
   page can contain and one of the easiest to miss if you skim.
2. **Movement and high contrast.** The brightest, boldest, most saturated thing takes the eye whether it
   deserves to or not.
3. **Size.** Whatever is biggest reads as most important, regardless of what the words say.
4. **The top-left, then across, then down.** Western readers sweep in an F. Anything critical placed
   outside that sweep will be found late or not at all.
5. **Pattern breaks.** A row of four cards where one is a different height. A grid where one item is
   misaligned. The eye catches the exception before it reads any of the content.
6. **Only then, the words.**

### The five seconds

Land cold, as a stranger who has never heard of this business, and answer these. **Every one the page
fails to answer above the fold is a finding.**

1. **What is this?** Does the page say what this business is and does, or must it be worked out?
2. **Is it for me?** Does it speak to the person who would actually land here?
3. **What do I do next?** One obvious primary action. None, or five competing ones, both fail.
4. **Can I trust these people?** Does this read as a real established business, or as a template?
5. **How do I reach them or buy?** Findable without hunting.

---

## The part that only you can do: do the words and the picture agree?

This is the check nothing else in the system performs, and it is the reason a language model is worth
pointing at a screenshot at all. A pixel comparison cannot read. A grader cannot look. **You do both at
once, so you can catch the page contradicting itself.**

Walk the page and ask, at every point where words and layout meet:

**Does the count match?** A heading that says "Three recent essays" over four cards. "Five places to
start" over a list of four. "Our team" over one photograph. The words make a promise the picture breaks,
and a person notices immediately even if they cannot say why.

**Does the emphasis match?** Whatever is largest, boldest or brightest is what the page is *saying* is
most important. If the sentence that matters most is set smallest, the page's design is arguing with its
own copy. Find the visually loudest thing on the page and ask whether it is genuinely the most important
thing on the page.

**Does the label match the destination?** A button that says "Get in touch" that is styled quieter than
a decorative flourish. A link that says "Read more" that is the least visible thing in its block. A
primary action that does not look primary is a lie told in styling.

**Does the caption match the photograph?** A caption describing a workshop under a picture of a
mountain. A figure number that points at nothing. An alt text or label that names something not visible.

**Does the section title match its contents?** "What we do" over a photograph of a building. "Reviews"
over a paragraph of the owner's own prose. "Pricing" over a page with no prices.

**Does the tone of the writing match the tone of the design?** Careful, plain, first-person writing set
in loud shouting display type, or the reverse: an energetic, informal business rendered in cold
institutional grey. A mismatch here is why a page can be technically fine and still feel wrong.

**Does the page's own hierarchy hold?** Read only the headings, in order, ignoring everything else. Do
they form a sensible outline of the page? If they do not, the page has no spine, and a person skimming —
which is most people — gets nothing.

Report each of these as its own finding, naming the words and naming the visual that contradicts them.

---

## First hunt for what is missing. This comes before judging what is there.

Most review instinct is to critique what is on the screen. That is the easy half and it is second.
**Absence is invisible unless you go looking for it**, which is why it is the half that gets skipped and
the half where the real failures are.

A person expects these on nearly any page. Flag any a person would reach for and not find:

- A logo, top-left, that clearly belongs to this business and reads as the way home
- Navigation to the main pages, visible and legible
- One obvious primary action, styled like the main thing to do
- A footer with the real-world basics: contact, location or service area, hours if they matter, legal line
- A way to make contact or buy from wherever you are on the page
- Things that look clickable actually being clickable, and nothing important looking like decoration

Different pages carry different expectations. **Name the page type in every finding.**

| page type | what a person expects, and what fails it |
|---|---|
| Home | What the business does, who for, the primary action, a reason to trust, paths to the main pages. **Missing value proposition or missing primary action are blockers.** |
| Services / menu | The actual services, enough detail to decide, prices or a clear path to them, a way to act. **A services page you cannot act on has failed.** |
| Product / catalogue | The products, real images, price or availability, the action. **Items you cannot see clearly or cannot act on fail.** |
| Contact / location | Phone, email or form, address or service area, hours, ideally a map. **This page's whole job is answering "how do I reach you"; missing the basics is a blocker.** |
| About | Who they are, why trust them, a photograph of the real people or place. **Generic filler with no human or place behind it fails the trust job.** |

Trust is a gut reaction and absence is what breaks it:

- Real photography of this business, these people, this place, this work — not obvious stock, not
  obviously generated imagery. **Fakeness here is a trust blocker.**
- A deliberate, consistent look rather than an untouched template
- Social proof where a customer would want it: reviews, testimonials, credentials, years in business
- No dead ends. Every page offers a way onward

---

## Then judge what is there

1. **Collisions and broken layout.** Overlapping text; text touching or crossing an edge; elements
   stacked wrong; cut-off or truncated words; navigation or buttons wrapping or running off screen;
   images spilling their frame.
2. **Colour.** Off-brand or wrong colours; a flat slab of colour where an image or texture belongs;
   jarring or oversaturated hues; text that does not have enough contrast against what is behind it;
   neighbouring colours that fight.
3. **Everything shouting at once.** Oversized headers with no restraint; too many weights and sizes; no
   hierarchy; a hero that is only a colour field; decorative effects overdone.
4. **No care in the quiet parts.** No breathing room; cramped or uneven spacing; misaligned columns;
   inconsistent margins; a placeholder or unfinished feel; a section that reads as lazy rather than
   composed.
5. **Incompleteness.** Placeholder text, broken or missing images, empty sections, template leftovers,
   visible dummy copy, operator notes that were never removed.
6. **Consistency across pages,** when you have more than one. Type scale, spacing, header treatment and
   colour drifting page to page. A set that does not read as one design is a finding even when each page
   passes on its own.

---

## Every photograph, one at a time. Not optional.

Do not skim the images. Look at each photograph on the page individually and study it before moving on.
For each one:

**Is the subject cut off?** A head sliced at the top, a face half out of frame, a product or sign clipped
at an edge. **Treat a cut-off head or cut-off key subject as a blocker.** This is the exact miss that
reaches a client when someone glances instead of looking.

**Is the subject placed well in its frame?** Off-centre in a way that reads as accident; zoomed so tight
the subject is crowded; floated with dead space to one side; focused on the wrong part of the image. A
photograph that is present but badly placed is a finding.

**Does it look like this business?** A generic image that could belong to any company in the category is
a trust problem even when it is technically fine.

Report each bad photograph as its own line, naming the image and the page.

---

## The mobile pass. Run it on every mobile capture.

The mobile screenshot is not the desktop one made smaller, and a great deal of "a person would wince"
lives only here. Run both halves above, plus:

- Any sideways scroll, or content running off the right edge
- Text too small to read without pinching
- Buttons, links or navigation too small or too crowded for a thumb
- A phone number a person would expect to tap and call
- Navigation that collapses sensibly — a menu button or a clean stack, not a broken desktop bar
- The primary action still obvious and reachable without a long scroll

---

## What good looks like

A page passes when a stranger landing on it cold would, without effort:

- know what this business is and whether it is for them, within five seconds
- see one obvious next step and take it
- find contact or purchase without hunting
- believe it is a real business run by real people
- read the words and the design as saying the same thing
- find nothing that makes them wince: no cut-off face, no collision, no placeholder, no dead end
- have the same experience on a phone

That is the standard. Not "nothing is broken" — **nothing is missing, nothing contradicts itself, and
nothing makes a person wince.**

## Definition of done

This pass is done when **all** of these are true:

1. Every page in scope has been looked at as a rendered image, desktop **and** mobile.
2. Every photograph on every page has been examined individually, and each one either passes or has its
   own reported line.
3. The five-second questions have been answered for every page.
4. The words-and-picture check has been run on every page and its findings written down.
5. Missing things were hunted **before** present things were judged, and the report shows both.
6. Every finding names: severity, whether it is missing or wrong, the page type, where on the page, what
   is wrong, and what a good version would do instead.
7. Every page carries a one-line verdict — **SEND**, **FIX-FIRST**, or **REBUILD** — and names the single
   biggest thing dragging it down.
8. The person who wrote the page did not write this review.

Anything less is not this pass half-finished. It is this pass not run.

## How to write a finding

```
[blocker | polish | nit] — [missing | wrong] — page type — where on the page
  what is wrong or absent
  what a good version would do instead
```

Then the page verdict: **SEND / FIX-FIRST / REBUILD**, and the one biggest problem.

**Severity means:**
- **blocker** — do not put this in front of a client. It fails the job, breaks trust, or makes a person wince.
- **polish** — a person would notice and think less of it, but it does not fail the job.
- **nit** — you noticed; a person probably would not. Report sparingly or not at all.

## Refuse these

- Reviewing from markup, stylesheets or filenames instead of looking at the picture
- Praising what is fine. Silence means acceptable. Only report what wants changing or is missing
- Reporting a two-pixel defect no person would ever see, as though it were a finding
- Claiming a reaction rather than reasoning about one: say "a visitor would read this as…", not "this feels…"
- Using this pass to claim two pages match. It does not compare anything. That is a different pass
- Softening a blocker into a suggestion. A verdict is a gate, not an opinion
- Reviewing your own work