rounds/r3/s9-section-posters/notes.md
Notes: s9 section posters, Vienna Family Dental
Concept: every section a poster of its own: a neighborhood family practice on Maple Avenue whose day starts at 7:30, before school. A quiet two-color palette holds the sections together.
Main decisions
- Type: Fraunces (soft axis 50, opsz 144) for headlines: a chunky, warm old-style display, deliberately nothing like round 1's Garamonds. Libre Franklin for text: American gothic, the type of town notices and shop signs, which keeps it "local business" rather than SaaS. Sentence-case headlines that say something ("Insurance: we file the claim, and you're usually repaid in a week or two").
- Color: logo blue
#21528Fand laurel green#2F5A43are the only full-bleed colors. Paper, stone and a green-black ink (not navy) are the neutrals. Dogwood blush is for numerals and icons only. There's no gold anywhere except the review stars. - Imagery: the library for mood (hero dad and son at the door, the sedation armchair, kids drawing, service tiles, the dogwood vase). The real team portraits and the real before/after cases carry every claim. Real Wikimedia photos of Vienna (the W&OD depot with its VIENNA sign, the W&OD Trail, Meadowlark Gardens) make the "find us" section unmistakably local.
- Signature: the dogwood blossom (Virginia's state flower), drawn in SVG. It's the pattern ground behind Kadie's review and a large ghosted outline in the insurance band, and it echoes in the dogwood photo beside the booking form. The hero's "open at 7:30 so you're done before school and work", with a dad tying a shoe at the door, is the page's other memorable thing.
- Layout, one idea per section (system.md has the table):
- photo-field hero with a solid blue panel;
- a mosaic of services;
- a green color block for nervous patients, with the photo breaking the edge and a quote card;
- a dark film strip of real cases;
- an editorial spread for Dr. Paino, then the team row;
- an overlap for kids;
- the big quote on the dogwood pattern;
- the blue numbered insurance row;
- the place mosaic of Vienna with the address card;
- the split-screen booking form.
- Tenure appears nowhere except as an implicit fact (no years shown at all). Trish is introduced as born and raised in Vienna, not by her start date.
Photos used
Library (generated): people-07 (hero), detail-01 (checkups tile), people-01 (children's tile), people-02 (Invisalign tile), detail-07 (same-day crowns tile), people-03 (implants tile), people-06 (sedation), people-10 (kids), illustration-03 (balloon tooth, made transparent), detail-05 (dogwood vase, booking).
Real (business/assets): logo (converted to a transparent PNG for the header), logo-white; all 12 team portraits; cases veneers-after (veneers tile) and all four before/after pairs.
Stock (Wikimedia Commons via tools/stock.ts):
w-od-trail/01.jpg: "Vienna Washington & Old Dominion Depot", Matthew Zisi, CC BY-SA 4.0, https://commons.wikimedia.org/wiki/File:Vienna_Washington_%26_Old_Dominion_Depot.jpg (warmed and desaturated).w-od-trail/05.jpg: "W&OD Trail Difficult Run crossing 2020c", Antony-22, CC BY-SA 4.0, https://commons.wikimedia.org/wiki/File:W%26OD_Trail_Difficult_Run_crossing_2020c.jpgmeadowlark-botanical-gardens/04.jpg: "Meadowlark Botanical Gardens in October (22784191736)", DC Gardens, CC BY 2.0, https://commons.wikimedia.org/wiki/File:Meadowlark_Botanical_Gardens_in_October_(22784191736).jpg
Credited in the footer.
Placeholders
[PLACEHOLDER: typical fees for a new-patient exam and cleaning]in the insurance section (no prices published).[CONFIRM: parking at the building]in the visit card.[CONFIRM: within one working day]: how fast they call back after a booking request.- The form posts to
#(no back end in this round).
With better assets or more time
- A real photo of the building at 307 Maple Ave W and of the treatment rooms would replace two library moods; the hero would ideally be a real Vienna family morning.
- The trail photo is the Difficult Run crossing (west of Vienna). A real photo of the trail where it passes through town (by the caboose on Church Street) would be better; Commons search turned up nothing usable for "Vienna caboose" or "Church Street".
- An illustrated map of Maple Ave and Church St with the practice pinned. I didn't draw one because I couldn't verify the geography from the facts, and a wrong map is worse than none.
- Self-host and subset the fonts;
srcsetfor the hero.
Where the guide helped, and where it got in the way
- Helped most: the menu of section ideas plus the variety rules. Forcing "no two neighbours share an idea or background type", plus quotas (3 photo, 2 strong color, 1 pattern, at most 2 plain light), produced a page with real rhythm on the first pass. Writing the plan as a table before building made a single build pass safe.
- Helped: "exactly two strong colors" stopped me from adding a third (I was tempted by a brick red to match the autumn photos). "Every section has a visual asset" is why the insurance band got its blossom and the editorial its team row.
- Got in the way / guessing:
- "Build and review one section at a time" is slow with a full-page shooter. I built everything and then reviewed per section from the slices; a tool to shoot one section (by selector) would make the per-section loop real.
- The Icon row idea invites exactly the icon-heading-sentence grid the reviewer flagged as template-looking; the guide should say when numbers or no icons beat icons.
- The Pattern ground idea doesn't say how to keep text readable on a pattern. My first try masked the pattern with a box-shadow halo, which sliced blossoms in half; a solid panel is the answer, and the guide could say so.
- homepage.md still refers to SKILL.md and
docs/site-plan.md, which aren't in this guide. - The guide asks for a "map / place" idea but gives no way to get a correct map.
- The library was what made this round feel local and photo-rich. Commons gave the real Vienna places, but multi-word queries ("Freeman Store Vienna Virginia", "Vienna caboose") returned nothing, while shorter ones ("W&OD Trail", "Freeman Store") did.
The review loop
Two rounds; the reviewer said ship after round 2 (scores went from 7.5 to 8 overall, path to booking 6.5 → 8.5). It helped, mostly with things my own section-by-section critique was structurally blind to:
- Mattered most: the path to booking. Reviewing one poster at a time, every section looked good. But there was no Book button for about 5,000px on desktop, because the header wasn't sticky. The whole-page lens of a reader trying to act found it at once. Fix: a sticky header and Book buttons under the doctors and the review.
- The booking photo. It was a generic café shot that is visibly European, and it was the least local image on the page, right where trust matters. Replaced it with the dogwood vase, which also strengthens the motif.
- Fact drift. I'd written "the same day" and "previewed with the patient" without a source. Self-review hadn't caught either.
- Phone details: the overlapping card hid the captions, numbers wrapped, and the emergency card didn't look tappable.
- It also made one wrong call: it took the real veneers case photo for stock. That's why the changes file and "check, don't just obey" matter.