rounds/r5/s6-photo-art-director-2/notes.md
Notes: s6 photo art director, Seventies sunshine
Concept: a late-October afternoon in Vienna, golden and unhurried, printed like an old Kodachrome. "Easy does it."
Main decisions
- Signature: a four-stripe rainbow corner (blue, gold, orange, rust) wraps the hero's chocolate headline panel. The stripes come back as seams between sections and as rings around the arched photo frames ("sunroom windows"), with offset color shadows on the panels and the form card.
- Type: Fraunces at 800-900 with the SOFT axis at 100 and WONK on. It's the rounded, heavy, Cooper Black-ish face the direction asks for, and nothing like the Garamond look the owner rejected. Text is in Nunito, a rounded sans.
- Color: sampled from the hero and the sunflowers. Chocolate #3B2214, rust #B9481A, orange #E27A2B, gold #EFB03C and sun yellow #FFD25E on apricot and peach grounds. The logo blue #2F5E9E is the rainbow's outer stripe and one arch frame, extending the brand without making it navy.
- Imagery: every library and stock photo went through
tools/tint.ts wash #F0A845(0.1-0.3), and every photo gets a CSS SVG-noise grain overlay. The team portraits got a warmer wash (#E9A060, 0.3), so the gray backdrop reads warm taupe, and sit in arches. Real Vienna landmarks come from Wikimedia Commons. - Layout:
- hero: full-bleed photo with the rainbow panel
- families: three rising arches, like a sunrise
- nervous: a photo background with a panel
- services: a tall arched photo beside a list
- smiles: real before/after on chocolate
- team: arches
- money: a photo bleeding off the left edge
- Vienna: a mosaic with the hours card
- reading list
- booking: sunflowers background with the form
- footer
- Words: I kept away from the slogan and the 7:30 opening for every headline:
- "Easy does it."
- "Bring the little ones"
- "Nervous? Us too, once." (true to Dr. Paino's own story)
- "Whatever brought you in"
- "Smiles we're proud of"
- "Say hi to the crew"
- "Money talk, made easy"
- "Just down Maple Avenue"
- "Worth reading"
- "Pull up a chair"
"We will never rush you" and 7:30 appear only in body copy.
Photos used
Library (generated; none presented as staff, patients or the office):
- hero-05-1 (hero)
- people-07-1, people-05-1 (families)
- people-06-1 (nervous)
- detail-01-1 (services)
- people-03-1 (money)
- svg/illustration-03 (recolored, reading list)
Stock:
- "Smiling Girl At Playground", Burst (free license): https://www.shopify.com/stock-photos/photos/smiling-girl-at-playground
- "Field of Sunflowers", Heath Cajandig, CC BY 2.0, Wikimedia Commons: https://commons.wikimedia.org/wiki/File:Field_of_Sunflowers_(29050760887).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
- "FREEMAN STORE", Jerrye & Roy Klotz MD, CC BY-SA 3.0: https://commons.wikimedia.org/wiki/File:FREEMAN_STORE.jpg
- "Gold Meadowlark Gardens - HDR", Nicolas Raymond, CC BY 2.0: https://commons.wikimedia.org/wiki/File:Gold_Meadowlark_Gardens_-_HDR_(15254893744).jpg
- "Lawn Chairs 2-G and 2-H, Meadowlark Botanical Gardens", Ron Cogswell, CC BY 2.0: https://commons.wikimedia.org/wiki/File:Lawn_Chairs_2-G_and_2-H_--_Meadowlark_Botanical_Gardens_Vienna_(VA)_2012_(7276605626).jpg
(The CC BY and BY-SA photos need visible credit on a live site; a credits line or page is still to do.)
Real (business/assets): the logo, all 12 team portraits, and the veneers-face, bridge and chipped cases.
Placeholders and gaps
- Prices:
[placeholder: typical costs, from the office]in the money section. - Roles for Nancy, Jordan, Kathia and Jenefer aren't in facts.md, so they show their names only.
- The form is a request (the current site has no online booking). The page promises a callback but no timeframe, since none is known.
- The articles are titles only, linking to
#.
With better assets or more time
- A real golden-hour shoot of the practice and of Maple Avenue. Commons has no good Church Street or Maple Avenue photo in warm light, and the depot and Freeman Store photos are noon-blue under the wash.
- Team portraits reshot on a warm backdrop (mustard or rust paper) instead of tinting the gray.
- Self-hosted, subset fonts, and AVIF/srcset for the hero.
The guide: where it helped, where it got in the way
- Helped:
- "The first screen is a photograph" and "3 photo-background sections" kept the page from collapsing into retro color blocks. The seventies direction pulls hard toward flat graphic panels.
- The step-2 "picture of the place" sentence was the most useful step: it chose the hero (the golden trail) and the grade (gold wash plus grain) at once.
- The DESIGN.md review checklist caught the blue-sky Commons photos breaking the set.
- Got in the way or left me guessing:
- The 70% rule against my signature. The rainbow panel at first covered about half the hero, so I narrowed it and let the photo show above it. Whether a giant graphic over the photo counts as "headline set on it" is unclear.
- The guide says "pick type and color from the photos" and to extend the logo blue. The direction dictates the palette, so the photos only confirmed it.
- homepage.md asks for a proof strip, FAQ, "what to expect" and more. With photo-first rules and a ~10-section page, I folded proof into the hero line and the case section and skipped the FAQ and steps. The guide doesn't say which modules give way.
- The build standard asks for self-hosted fonts, a Worker and so on. TASK.md overrides that; the guide could say so for the lab.
- The stock tool: the Commons category API via curl worked much better for Vienna than
--placekeyword search, as noted in earlier rounds.
Review loop
Two rounds, ending in ship (scores went from 8 overall / phone 7 to 8 / phone 8).
- It helped. It caught things I'd stopped seeing:
- Most important: a fact slip. I had attributed Jason A.'s quote to Google when facts.md says the quotes come from the practice's site.
- The "Good to know" section, three bordered icon cards: the one template tell on the page. It's now a ruled list with one big illustration.
- The phone dentist cards each took a full screen.
- A run of widows and line breaks.
- Less useful: it didn't push on the bigger questions. Are the noon-blue Commons Vienna photos too cool under the wash? Is the hero photo dominant enough? My own DESIGN.md checklist pass is what caught the photo grade.
The page source is page-src.html; a small script inlines the recolorable SVG into it. site/index.html is the built, self-contained file.