Notes: Vienna Family Dental, "Classic practice" (method: photo art director)

Concept in one line: a clear October morning in Vienna (red maples, brick front steps, a family in no hurry), with white panels set on full-bleed photographs, framed by a confident, conventional practice-site structure.

Main decisions

• Structure (Classic practice): a utility bar with hours, then a sticky header with the phone written out and one brick Book button. The hero is followed by three plain facts (hours, address, insurance). After that, the buyer's questions in order: services → kids → nervous → results → people → reviews → paying → where → articles → book. A way to act sits at least every second section, and the phone has a sticky Call / Book bar.
• Type: Libre Franklin (Franklin Gothic: American storefront and newspaper) at 700–800 for headlines and UI. Source Serif 4 (transitional, not Garamond) for body copy and quotes. This keeps the classic tone without the round-1 old-style serif.
• Color, taken from the hero photo: brick #A4472F, used only for actions and the logo-rule ornaments. Shutter green #1E3B30 for the utility bar, the smile gallery, the booking band and the footer. Logo blue #22609E for links. White with a limestone #F2EEE8 for quiet grounds. No cream, navy or gold.
• Imagery: 4 sections with a photo background (hero, kids band, reviews band, booking band), each with text on a white panel or a dark scrim. Everything else uses varied shapes: a bento of 5 photo tiles, a tall portrait, real before/after pairs, a large lead portrait plus a staff strip, a 3-up strip of Vienna, and one portrait with a caption. On the phone, the photo-background bands become an image with the panel overlapping its bottom edge.
• Signature: the logo's tapered rule (━ DENTAL ━) drawn in CSS around the small kickers, and "Right here in Vienna" with real photos of the W&OD depot (with the VIENNA sign) and the Freeman Store.
• Voice: a receptionist talking. The H1 is "Your family's dentist in Vienna"; the other headings are "Care for every age", "A good first visit", "Nervous? Tell us.", "Work we're proud of", "The people you'll see", "How paying works", "Right here in Vienna", "Worth reading" and "Book a visit". The practice's slogan and the 7:30 opening only appear in body copy ("We'll go slower… stop whenever you raise a hand"; 7:30 is in the kids checklist and the hours).

Photos used

Library (generated):

• hero-02-1 (hero)
• hero-04-1 (checkups tile)
• people-02-1 (Invisalign)
• people-03-1 (cosmetic)
• detail-07-1 (crowns)
• people-07-1 (kids band)
• place-01-1 (captioned "Fall in Northern Virginia", not Vienna)
• place-06-1 (booking band background)

Real (business/assets):

• all 12 team portraits (Lynne also larger in "How paying works")
• cases: makeover-face, veneers, bridge, chipped (before/after)
• logo, turned into a transparent PNG, and logo-white

Stock / online:

• Burst (Shopify), "Portrait of a young happy child", free with no attribution: https://www.shopify.com/stock-photos/photos/portrait-of-a-young-happy-child (children's tile, warm wash).
• Burst, "Relaxing in headphones": https://www.shopify.com/stock-photos/photos/relaxing-in-headphones ("Nervous? Tell us.", warm wash).
• Wikimedia Commons, "Meadowlark Botanical Gardens in October (22784191736)", DC Gardens, CC BY 2.0 (reviews band, captioned on the page).
• Wikimedia Commons, "Vienna Washington & Old Dominion Depot", Matthew Zisi, CC BY-SA 4.0 (Vienna strip, cropped, warm wash 0.45 + desaturated).
• Wikimedia Commons, "Freeman House Store and Museum, Vienna, Virginia", Ron Dicker, CC BY-SA 4.0 (Vienna strip, cropped, warm wash 0.45 + desaturated).
• The footer carries a credit line for the three Wikimedia photos.

Removed after review 1: library people-08-1 (café woman). The street behind her looked Parisian; Lynne's real portrait replaced it.

Placeholders

• Price: "[PLACEHOLDER: typical fees for a new-patient exam and cleaning]", shown in the paying section and styled as a placeholder.
• Roles for Kathia and Jenefer: HTML comments, so the names show without a role. Nancy and Jordan show only "With us since…" because facts.md gives no role.
• The form: it posts to # (no back end in this round).
• Articles: the three titles link to #. The one-line summaries are mine and should be checked against the real articles.
• Instagram URL: assumed from the handle @viennafamilydental.

With better assets or more time

• Real photos of the office, the building on Maple Avenue and the team at work. These would replace the generated hero and the stock "calm" photo, and would let the hero show the actual practice.
• A real autumn photo of Vienna itself (the Town Green, Church Street): Commons had none, so the library street carries a generic caption.
• Roles for every team member, plus a photographed group shot.
• An online booking link, so the Book button can go straight to it.
• A self-hosted, subset WOFF2 version of the two fonts, and AVIF/WebP with srcset for every image.

The guide: where it helped, where it got in the way

Helped:

• "Describe the photograph that is this practice" was the most useful step. It set the palette (brick, shutter green) and the season. Then every later choice could be tested against it: the brick button, the green bands, why the summer Wikimedia photos needed toning down.
• The hard numbers ("first screen ≥70% photo", "≥10 photos", "≥3 photo-background sections", "never two text-only sections in a row") kept the page from sliding back into type on cream panels.
• The step-7 checklist caught real bugs in the first pass, before the reviewer saw the page.

Got in the way, or left me guessing:

• "Pick type and color from the photos" pulls toward the hero photo's warm autumn palette. It says nothing about how far to move from the logo's blue, so I kept blue to links only. That's a judgment call the guide could make explicit.
• The guide pushes hard for photos everywhere, and in round 1 that led to the café stock photo in "How paying works". It was decoration, and the reviewer rightly swapped it for a real person (Lynne). The guide could say: a real photo with a job beats a mood photo; where a real person fits the section, use them.
• It says to vary image shapes, but not how to handle a section whose content has no photo (the articles). I first added the library's line illustrations; the reviewer called them clip-art next to the photography. A rule like "a text section next to photo sections can be pure typography" would have saved a round.
• On the phone, full-bleed photo backgrounds with panels don't work at 390. The guide doesn't say what to do there; I converted them to an image with the panel overlapping its bottom edge.
• Step 4 ("unify the grade") exists, but the tint tool's strength is a guess; a recommended wash for summer daylight versus autumn would help.
• brief.md's long section table duplicates homepage.md. Most of its value was in the headline list.

The review loop

Two rounds: 8/10 overall both times. Round 1 said "another round"; round 2 said "ship" with four polish items, which I made.

It helped, and on different things than my own critique. The point that mattered most was factual: "Book online" in the hero, when booking is really a request form, and five stars above quotes that were never star-rated. I had missed both. After that: the template-y brick offset block plus the off-place café photo, the clip-art article cards, the dead space in the gallery grid, and a stock street captioned as Vienna. My own pass caught layout breakage (the lead dentist rendered smaller than the others, the logo's box, uneven strip heights). The reviewer caught honesty and taste. The two passes complemented each other.