Rouwfoto.nl — Bespoke Memories
Een ingetogen site rond een gevoelig onderwerp — duidelijke, respectvolle communicatie van wat de fotograaf doet en hoe een intake verloopt.
Preview op desktop en mobiel
Wat je hierboven ziet is een echte screenshot van de live site op desktop — direct uit de browser, geen mock-up.
Echte mobiele rendering — knoppen worden duim-vriendelijk, blokken stapelen verticaal, lettergrootte schaalt mee.
De volledige pagina in één beeld
Zo ziet de hele site eruit als je 'm helemaal naar beneden scrolt — alle secties, in volgorde.
Wat betekent dit eigenlijk?
Voor als je geen developer bent — hier is wat we deden, zonder jargon.
Een ingetogen site rond een gevoelig onderwerp — geen popups, geen drukte, alleen heldere uitleg en een veilige eerste stap.
- Op telefoon zie je direct wat er aangeboden wordt zonder door menu's te hoeven graven.
- Bewust rustige typografie en veel witruimte — de toon doet het werk, niet de animaties.
- Het intake-formulier is end-to-end versleuteld; gevoelige info komt nergens in een log terecht.
- FAQ-sectie is gestructureerd voor Google's rich-result blok rond 'rouwfotografie kosten'.
Engineering write-up
// hoe deze site technisch in elkaar zit
De grootste technische beslissing op deze site is wat níét gebouwd wordt. Geen exit-intent popups, geen autoplay-video, geen tracking-pixels. Plausible draait cookieloos en pseudoniem.
Typografisch is gekozen voor DM Serif Display in headings — zacht, klassiek, niet-commercieel. Body in Inter voor leesbaarheid bij langere alinea's; line-height 1.7 om rust te creëren.
Het intake-formulier is bewust minimaal: naam, contact, situatie. Server-side gevalideerd (Zod), e-mail via Resend met een sjabloon zonder branding-noise.
Stack en integraties
Routes en componenten
- /→ Stille hero + introductie
- /werkwijze→ Intake- en proceslijn
- /tarieven→ Transparante pakketten
- /contact→ Persoonlijke aanvraag
- /faq→ Antwoorden bij gevoelig onderwerp
<QuietHero /><ProcessStepper /><TariffCard /><IntakeForm /><FaqAccordion />src/ ├─ routes/ # file-based routing (TanStack) ├─ components/ # presentational + UI primitives ├─ lib/ # data, helpers, schema └─ styles.css # design tokens (oklch)
Conversie-flow
// pad van bezoeker → klant
- 01Bezoeker landt op rustige hero, geen marketing-druk
- 02Werkwijze leest als verhaal, niet als checklist
- 03Aanvraagformulier vraagt minimum aan info
- 04Reactie binnen 24u via persoonlijke mail
Performance, toegankelijkheid en SEO
- WCAG 2.2 AA contrast op alle tekstniveaus
- Toetsenbord-volledige navigatie + zichtbare focus-rings
- Semantische landmarks (header/main/footer/nav)
- Alt-teksten op alle inhoudelijke afbeeldingen
- prefers-reduced-motion gerespecteerd
- Per-route <title> en meta description
- Open Graph + Twitter Card per pagina
- JSON-LD (LocalBusiness / Service / Product)
- Sitemap.xml + robots.txt
- Canonical tags + responsive viewport
Wat we bouwden
Doelgroep
Nabestaanden en uitvaartondernemers die professionele rouwfotografie zoeken.
Kernfeatures
- Stille, respectvolle hero zonder afleidingen
- Heldere intake- en proceslijn
- Tarievenpagina met transparante pakketten
- Veelgestelde vragen rond een gevoelig onderwerp
Deliverables
- ›Volledige source in Git
- ›Vaste prijs + 7 dagen oplevering
- ›1 jaar hosting + SSL inbegrepen
- ›Gratis kleine wijzigingen 30 dagen
Brand kit
Visuele identiteit zoals die op de live site terugkomt — klik op een kleur om de hex-code te kopiëren.
Kleurpalet
Dark modeTypografie
Stijl
"Warm, ingetogen en respectvol met klassieke uitstraling."
