Notes: Family album (s10, frontend-design skill)

Concept in one line: the old black-page photo album, done in the practice's own logo blue. White-bordered prints are held by photo corners on navy boards, with captions in a fine pen, and pale "glassine" interleaf pages carry the practical parts.

Main decisions

• Type.
• Besley (a Clarendon: an old American shop-sign and ledger face) does every headline and the body. This was a deliberate step away from the round-1 Garamond look.
• Nothing You Could Do (a fine-pen hand) is used only for short captions under photos and the signatures on patient quotes. I chose it from about 20 handwriting faces rendered side by side; it reads like a parent's pen in an album. Caveat was rejected as the reflex pick.
• Sentence case everywhere: no caps labels, no eyebrows.
• Color.
• Board navy #1B2D43 and corner #0E1928, from the logo's blue.
• Print white #FBFAF5, the logo's own paper, so the header logo sits on it seamlessly.
• Glassine #E9ECEA, a cool grey-green rather than cream.
• Ink #2A241F, the logo's "DENTAL".
• Logo blue for links.
• The page alternates board and glassine from top to bottom.
• Imagery. Every photo is a mounted print: the same white border, the same photo corners, small rotations (≤2°), and overlaps only inside composed clusters (hero, Vienna). Captions talk about moments ("two minutes, top and bottom", "first tooth in? time for a first visit"), never about who the generated people are. Real people (the team, the smile cases) are captioned as themselves.
• Signature. The mounted print with corners and a pen caption. The boldness is spent there; everything else (type, layout, buttons) is quiet.
• Layout, top to bottom:
• hero cluster (board);
• services as an album page of three prints plus a sedation row and four short items (glassine);
• real before/after pairs (board);
• Dr. Paino's own words with his portrait, then three patient quotes on notepaper (glassine);
• the team as a wall of prints with first names (board);
• our corner of Vienna, with hours and address (glassine);
• the request form on a mounted card (board);
• paying (glassine);
• footer.
• Motion. One moment: the hero's three prints settle onto the page on load. Reduced motion is respected.
• Voice.
• Headlines: "We know your family by name.", "From first teeth to new ones.", "Smiles we're proud of.", "It started with a rough dentist.", "In our patients' words.", "The faces you'll see.", "Our corner of Vienna.", "Let's find you a time."
• The practice's slogan and the 7:30 opening only appear below headlines.

Photos used

• Library:
• hero-01 (father and daughter brushing, the hero's main print);
• people-05 (mother and toddler);
• people-01 (boy with toothbrush);
• people-03 (couple over coffee);
• people-02 (aligner case);
• people-07 (tying a shoe at the door);
• detail-03 (towels and plant, for sedation);
• detail-08 (sneakers and backpack, in the booking section).
• No illustrations made the final page: the moon SVG was tried and replaced after review.
• Stock (Wikimedia Commons, credited in the footer):
• the Vienna W&OD depot: "Vienna Washington & Old Dominion Depot" by Matthew Zisi, CC BY-SA 4.0, https://commons.wikimedia.org/wiki/File:Vienna_Washington_%26_Old_Dominion_Depot.jpg
• the Freeman Store: "Freeman House Store and Museum, Vienna, Virginia" by Ron Dicker, CC BY-SA 4.0, https://commons.wikimedia.org/wiki/File:Freeman_House_Store_and_Museum,_Vienna,_Virginia.jpg
• Meadowlark: "Meadowlark Botanical Gardens in October" by DC Gardens, CC BY 2.0, https://commons.wikimedia.org/wiki/File:Meadowlark_Botanical_Gardens_in_October_(22189089383).jpg
• The practice's own: the logo (both versions), all 12 team portraits (Dr. Paino in his own section, the other 11 in the team), and the veneers-face, makeover-face, chipped and bridge before/after cases.

Placeholders and inferences

• The request form has no back end: it posts to #book, and every Book button links to #book as asked. "The front desk will call you back to confirm a time" describes how a request form like the current site's would work; it's my inference, not a stated fact.
• Nav, service and article links go to #. The Instagram link goes to #.
• No prices, no invented numbers. The rating (4.9, 292) and the quotes are exact from facts.md; the quotes are shortened with the original wording.
• "Grandpa's new crown" in the hero line is illustrative of "every age", not a specific patient.

With better assets or more time

• Real snapshots from the practice would turn this from a well-composed album into the practice's own album: the front desk, a Happy Visit, Dr. Paino with a family (with consent). That's the single biggest upgrade, and it's what the direction really wants.
• Short real captions from the team ("Ann's 2019 holiday party") would make the pen captions personal instead of generic moments.
• A photo for sedation that shows blankets and headphones (free stock had none). Also a second real Vienna photo near Maple Avenue itself.
• A real booking back end.

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

Helped:

• The "plan, then review the plan against the generic version" step was the most useful thing in it. My first plan for "family album" was cream paper, kraft, Caveat and washi tape, which is exactly tell #1 plus scrapbook clichés. Writing it down and naming it as the default pushed me to the black-album-in-logo-navy idea, which is the whole page.
• "Spend your boldness in one place" kept the prints as the only bold device, and the quiet type, buttons and layout around them are why it doesn't become a scrapbook.
• The list of tells (caps eyebrows, middle-dot strings, '→' links, numbered markers) was concrete and easy to check against. The reviewer once suggested a "·" meta string and I wrote it out in words instead.
• "Structure is information" justified the pen "before / after" labels: they carry information, not decoration.

Got in the way or left me guessing:

• It says "confirm with the client" and to identify the subject, which doesn't apply in a headless run. Harmless, but it costs a moment.
• It says to set "a clear type scale following The Elements of Typographic Style", which is vague: I picked roughly a 1.333 ratio by feel.
• Nothing about photography, which is the main material of this brief. How to crop, how to mix stock with generated images, what to do when the library's house style fights your palette: all of that came from TASK.md, not the guide.
• Nothing about layout mechanics for overlapping compositions across breakpoints. That took the most iteration: absolutely positioned clusters needed separate phone layouts, and captions collided with neighboring prints three times. A line like "collage layouts need their own phone composition, not a scaled-down one" would have saved a round.
• It warns against "identical cards" but gave me no help when the services content naturally is a list of five equal items. I ended up with four plain columns, which the reviewer accepted.

The review loop

It helped, clearly. Scores went 7 → 8 → 8 overall, and path to booking went 5 → 8. The points that mattered most:

1. "Booking leads nowhere" (round 1). Every Book button ended at a section with another button. The request form it led to is the biggest functional improvement and something I'd overlooked by taking "links go to #book" too literally. 2. The father's face covered on the phone hero (round 2), created by my own round-1 fix. I wouldn't have caught it from the shrunk full-page view. 3. Dead areas in the services grid: three rounds of it. In the end that meant rebuilding the grid as independent columns. 4. The tenure line in the team intro: an easy miss that the owner would have caught.

One suggestion I declined: putting Trish's portrait in the booking section would have shown the same photo twice. Rounds 2 and 3 suggested exact pixel positions that didn't always match the CSS's percentage layout, so I treated them as intent rather than specs.

Files

site/index.html (built from index.src.html by node build.mjs, which only inlines library SVGs and is now a no-op), site/album.css, site/img/. The design plan is in design-plan.md, and the review loop is in reviews/.