rounds/r2/s8-critic-loop/notes.md
Notes: Vienna Family Dental homepage (strategy s8, critic loop)
Concept in one line: "Unhurried" dentistry, the practice's own promise ("we will never rush you"). Told with real results and the real team, and warmed by one consistent autumn-light family photograph.
Main decisions
- Type: Fraunces for display (light to regular weight, optical sizing on) and Instrument Sans for everything else. I started with Bodoni Moda, a Didone chosen to get far from Garamond, but its hairlines broke at every size (critique 2: "cosmctic", "7:30 ΛM"). Numerals are in the sans.
- Color: from the logo. The brown-black of "DENTAL" (#231b17) is the one dark colour (top bar, hero panel, results band, sedation band, footer). The logo's mid blue (#2a5d9c) is for actions, its light end (#7fb8e6) for small accents on dark, and the logo's paper (#f4f1ec) only behind the booking form. There's no gold UI and no navy. Warmth comes from the photographs.
- Imagery:
- All 12 real portraits: the three dentists as equals, and a full-bleed 9-up wall of the staff on their gray backdrop, with names and the roles facts.md gives.
- All four real cases, labelled Before/After. The face makeover is colour-corrected (less saturation, a slightly cooler balance) so its red flash cast sits better next to the intraoral shots.
- Three stock photos for mood only, never captioned as patients or staff.
- Signature:
- The logo's tapered double rule, redrawn in SVG: in the hero eyebrow and as a large divider under the results heading.
- The edge-to-edge staff wall.
- The "She slept through it. This is the result." case story.
- Layout (7 sections): 1. A split hero: dark panel and photo. 2. Three editorial service rows (children; veneers and Invisalign with a real face before/after; same-day crowns as three big numbered steps), plus an "Also:" line. 3. A dark results band. 4. Team: Dr. Paino's quote, three dentists, Kadie B.'s quote, the staff wall. 5. A dark sedation band. 6. Booking: form, visit details and insurance. 7. Footer with the three article titles.
- Phone:
- A
<details>menu, so no JavaScript. - A sticky Call (703) 281-7104 / Book an appointment bar.
- Photo first, then the headline and both buttons in the first screen.
Stock photos used (all Burst by Shopify, free license, no attribution required)
img/hero-family.jpg: "Smiling Portrait Of Woman And Child", https://burst.shopify.com/photos/smiling-portrait-of-woman-and-childimg/kid-smile.jpg: "Smiling Young Girl", https://burst.shopify.com/photos/smiling-young-girlimg/calm-blanket.jpg: "Person Relaxing Reading A Large Coffee Table Book", https://burst.shopify.com/photos/person-relaxing-reading-a-large-coffee-table-book
Earlier rounds also tried other stock that the final page doesn't use: Burst kids, toothbrushes, sleep and dental photos, and a CC BY 2.0 Flickr photo of the W&OD caboose in Vienna. They were all removed from site/img. The contact sheets and credits are still in stock/.
Placeholders and things to confirm
- Prices: none are shown (facts.md publishes none). The insurance block explains how payment works instead. Earlier rounds had a
[CONFIRM: typical cleaning and exam fee]; I took it out because the page reads fine without it. Ask the owner for "from" prices. - The form: it posts to
#book. It needs a back end and a thank-you page. - Article pages and service pages: all
#. The three article titles are from the current site. - Roles for Nancy, Jordan, Kathia and Jenefer: facts.md gives none, so the page shows names only.
- Logo for the light header: derived from
logo.jpgby removing the paper colour (site/img/logo-header.png). A real transparent vector logo would be crisper.
With better assets or more time
- Real photos of the office, the chair, the CEREC mill and the team at work. These would replace the stock and let the services rows show the actual places and machines. A photo of the building on Maple Ave and a static map for the booking section.
- Consistent case photography (same light, same crop), and more cases, including a child's. The intraoral and face shots are mismatched.
- Round 4's biggest idea: rebuild the middle as one results-led story that ties each case to its service and quote. That needs to know which case is whose (for example, whether the bridge case is Kadie's daughter).
- Before/after sliders if a little accessible JavaScript is allowed.
Where the guide helped, and where it got in the way
Helped
- Fresh critics caught real things I'd stopped seeing:
- the logo's beige box;
- the Didone breaking at size;
- quotes sitting beside cases they don't belong to (twice);
- a stock photo contradicting its caption (a plaster mold next to "not a mold");
- a real case card implying the stock mother was the patient;
- quotes shortened without ellipses;
- the address comma.
The fact-check section of the prompt earned its place every round.
- Round 2's "cut to 7 sections, one layout idea each" was the single most useful note. The page went from 10.6k to about 8k px and read much better.
- The build-fast start was right. My first version's problems were ones I couldn't have predicted.
Got in the way, or left me guessing
- The critics contradicted each other, and the method has no memory to settle it. Each critic is fresh by design, so each round re-litigated the hero:
- Round 1: real case in the hero, type on the page.
- Round 2: remove the case, full-bleed photo with a scrim.
- Round 3: that full-bleed hero is "the most template hero there is"; go back to a split with a real case.
- Round 4: the split is the rejected look; go full-bleed.
Colour flip-flopped the same way: navy, then deeper navy, then blue-slate, then "navy is what was rejected, use brown-black". The scores plateaued at 6 from round 2 on while the page changed a lot.
Suggestions:
- Give the critic the previous round's critique and the changes (a "don't undo" list).
- Or have two critics per round and act only on what they agree on.
- "Fix all ten problems" plus "protect the keep list" plus contradictory rounds means following the method literally produces churn. I had to choose which advice to refuse. The guide could say how: the owner's rejections win, then facts, then the critic.
- The critic keeps recommending the rejected palette. Every critic pushed navy plus the logo's off-white (and once an ochre accent), which is the owner's rejected cream/navy/gold. "Take colours from the logo" and "not cream-navy-gold" collide for this logo. The guide should say how to resolve that.
- The critic asks for things the brief forbids: interactive sliders (no JavaScript), a map (no asset), stock porcelain crowns (none in the free libraries). A line telling the critic the constraints would save rounds.
- The 8.5 bar wasn't reached. At "7 = competent template", a page made from three stock photos and clinical case shots may not be able to score 9 with any layout. The asset ceiling isn't acknowledged.
- Tooling:
tools/stock.tsreturned 0 photos for everything after the first parallel batch. Node's fetch got HTTP 429 from Burst while curl didn't. I wrote a small curl-based fetcher outside the workspace (/tmp/vfdtools) that produces the samestock/<query>/folders, contact sheets and credits.