Notes: s11-local-practice, round 5 (Storybook)

Concept in one line: a family dentist told as a picture book of a Vienna family's day, from the morning brush at the sink to a night-blue spread for nervous patients, with "the gentle dentist down the street" and Dr. Paino's own "rough dentist" story at its heart.

Main decisions

• Type: Fraunces (SOFT 100, WONK on) for headlines, pull quotes, names and the drop cap: a round, inky storybook serif, far from the Garamond look of round 1. Alegreya, a literary book face, for reading text at 19-20px. No sans anywhere.
• Color: one strong picture-book blue #2148A3 (pushed brighter from the logo's gradient): buttons, every drawing, keylines, and the full night spread. Soft grounds take turns scene by scene: page #FBFAF5 (the logo's own background, so the JPG logo sits seamlessly), sage #DDE6D5, blush #F5E2DA, sky #DCE7F1. Butter #F2CF6B appears only in small drawn touches (balloon, stars, moon, the tooth on the drawn roof) and the night button. Ink #1D2333.
• Imagery: library photos as rounded "plates" with an offset blue keyline (like plates in a printed book). The real team in oval cast-of-characters frames (which leans into their matching gray backdrops). Dr. Paino in an arched window. Real cases with small italic Before/After tags. Real Vienna: the Freeman Store full-bleed, with Meadowlark and the W&OD pinned on as postcards. A duotone (blue) towels-and-plant photo in a round "moon" frame for sedation.
• Signature: line drawings that step out of the photos: a hand-drawn balloon whose string ends in the brushing girl's hand (hero), the library's tooth-with-balloon on the toddler plate, the moon rising over the night photo, and a hand-drawn Maple Avenue street (shops, a two-storey store, a house, the practice with a butter tooth on its roof, trees, a lamp, a bicycle) along the bottom of the booking scene.
• Layout: each scene has its own shape: full-bleed hero spread with the text in the photo's quiet wall → staggered vignettes of different sizes → arch portrait plus story → centered night spread → lead case plus three pairs → oval cast → sticky photo plus four steps → full-bleed town photo with a card and postcards → details beside the form → footer.
• Words: headlines, top to bottom: The gentle dentist down the street · From little ones to grandparents · It began with a rough dentist · You can sleep through it · A few happy endings · Faces you'll get to know · Your first visit, page by page · Our corner of Vienna · Come and see us. The practice's slogan ("never rush you") and 7:30 only appear in body copy. Reviews are placed beside the claims they support instead of in a separate reviews section.

Photos used

Library: hero-01-2 (hero), people-05-1 (littlest ones), people-07-1 (before school), hero-03-1 (brighter smile), people-04-1 (gums and implants), detail-03-1 (blue duotone, sedation), hero-04-1 (cropped, first visit). SVG illustrations 01 (tooth), 03 (tooth with balloon) and 06 (moon), recolored. The balloon and the street drawing are my own SVG. Business assets: logo.jpg, logo-white.png, all team portraits, cases (makeover-face, veneers, bridge, chipped). Stock (Wikimedia Commons, all credited in the footer):

• Freeman Store: "FREEMAN STORE VIENNA" by Jerrye & Roy Klotz, CC BY-SA 3.0, https://commons.wikimedia.org/wiki/File:FREEMAN_STORE_VIENNA.jpg
• Meadowlark: "Meadowlark Botanical Gardens in October (22784191736)" by DC Gardens, CC BY 2.0, https://commons.wikimedia.org/wiki/File:Meadowlark_Botanical_Gardens_in_October_(22784191736).jpg
• W&OD Trail: "W&OD Trail Difficult Run crossing 2020c" by Antony-22, CC BY-SA 4.0, https://commons.wikimedia.org/wiki/File:W%26OD_Trail_Difficult_Run_crossing_2020c.jpg (this one is the trail near Vienna, not in it: the caption just says "The W&OD Trail").

Also downloaded but not used: meadowlark 11 (a duplicate-ish autumn pond), people-08-1 (a café that looked Parisian, cut in review), and Maple Avenue at Nutley (Route 123 signage on a gray day: real, but not lovely).

Placeholders

• [CONFIRM: how soon we call back] / [CONFIRM: reply time] for booking requests.
• [CONFIRM: where to park].
• [PRICE: typical first visit]: the practice publishes no prices.
• Roles for Nancy, Jordan, Kathia and Jenefer are unknown, so they show names only.
• The form has no back end (action="#").

Build note: src.html + node build.mjs writes site/index.html, inlining the recolorable library SVGs. The page itself is static and works from file://.

With better assets or more time

• A real photo of the building on Maple Avenue and the front desk; then the drawn street could trace the real facade.
• A real photo of Trish at the desk, or the team in daylight rather than in the studio.
• Self-hosted, subset fonts (it's Google Fonts by link here), srcset for the hero. The library hero is only 1536px wide, slightly soft at 1440 full-bleed on retina.
• A small illustrated "map" of Vienna (Maple, Church Street, the trail) in place of the plain "Get directions" link.

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

• Helped: brief-first with final copy for every section made the headlines read as one story before any layout. Step 5's "looks every earlier round reached for" list kept me off cream and gold, a stat strip and a doctor-beside-headline. The variety rules (no two neighbours alike, at most two plain light sections) shaped the background order directly. "Proof sits next to the claim" is why the reviews are woven in rather than collected in one section.
• Got in the way / guessing:
• The homepage module list and the variety rules pull toward "one section per module". A storybook wants fewer, bigger scenes. I merged reviews into other scenes and insurance into the first visit, and had to decide on my own that this was allowed.
• "Backgrounds change only to group (2-3 in total)" (homepage.md) contradicts DESIGN.md's "no two neighbouring sections with the same background type" and the direction's "soft colors". I followed DESIGN.md and the direction.
• writing.md's "Tone: trustworthy beats clever; headings describe" sits uneasily with a direction asking for rhythm and whimsy. I kept the headlines plain and put the whimsy in the drawings, not the words.
• "Find real photos of the place" is good advice, but Commons is thin: there's one decent Freeman Store photo and nothing usable of Maple Avenue or Church Street. The guide could warn that the Freeman Store and Meadowlark are what actually exist.
• The guide says nothing about how to treat staff with unknown roles, or quotes whose subject could be confused with a case photo. The reviewer caught the second.

Review loop

Two rounds, ending in ship (overall 7.5, then 8). The loop helped, mostly with things I couldn't see myself:

• The point that mattered most: Kadie B.'s quote beside the makeover case implied she was that patient. It was an honesty problem, not a design one. In round 2 it also caught a "many nervous patients do the same" line I'd invented to fill the gap.
• A stray keyline on the phone that I had missed in the contact sheets.
• The Paris-looking café photo: the other Vienna, on a page about Vienna, VA.
• Pushing the balloon from a sticker into the actual "steps out of the photo" moment: bigger, and tied to the girl's hand.

The round-2 polish (dead columns, the drop cap, the phone card) was useful but small.