01
Puurfoto · Design System
Een volledig nieuwe, fotografie-specifieke visuele taal voor Puurfoto. Ontworpen als bron-van-waarheid voor het custom WordPress-theme, Gutenberg-blocks en de Puurfoto Core plugin. Herkenbaar voor Josje, maar niet gebaseerd op een bestaand WordPress-thema.
01
Merkprincipes
Het systeem vertaalt Josjes huidige merkwaarden — pure, lichte, ontspannen en liefdevolle fotografie — naar een moderne premium interface. De website moet voelen als een rustig fotoalbum, niet als een druk verkoopplatform.
01
Beeld vóór interface
UI ondersteunt fotografie. Nooit andersom.
02
Rust is luxe
Veel ruimte, weinig visuele ruis, duidelijke hiërarchie.
03
Menselijk
Josje is zichtbaar; taal is warm en persoonlijk.
04
Puur, niet zoet
Warmte zonder cliché pastel-romantiek.
02
Kleuren & surfaces
Een eigen palet dat zwart-wit portretten én warme klantfotografie aankan. Terra is het menselijke accent; Night geeft editorial contrast.
Bone
--bone #F7F3EDLinen
--linen #E9E0D6Clay
--clay #C8AD99Terra
--terra #9A6E57Cocoa
--cocoa #5B4438Night
--night #181411Line
--line #DDD4CCSignature wash
--wash03
Typografie
Fraunces geeft het redactionele, fotografische karakter. Manrope houdt UI en formulieren helder. Caveat is uitsluitend een menselijke accentstem — nooit voor functionele tekst.
Display · Fraunces 300
Echte momenten.
Puur vastgelegd.
Puur vastgelegd.
H2 · Fraunces 400
Fotografie om later naar terug te verlangen.
Lead
De mooiste foto’s worden gemaakt tijdens spontane en onbewaakte momenten.
Handwritten accentzoals jullie echt zijn ♡
04
Spacing, radius & grid
8pt rhythm, maar editorial composities mogen optisch afwijken. Grote sectie-afstanden zijn onderdeel van het merk.
Spacing scale
8 · 16 · 24 · 32 · 48 · 64 · 96
Radius
8 inputs · 14 cards · 26 features · pill controls
05
Fotografie & beeldgebruik
Fotografie is het merk. Geen decoratieve stock. Klantbeelden krijgen ruimte; Josjes portret is het vaste menselijke anker op Over mij, contact en compacte vertrouwensblokken.
DO · echte Josje
Gebruik herkenbare, persoonlijke fotografie. Crop mag wisselen per component.
DO · fotografie groot
Laat beelden ademen. Portfolio is geen tegelmuur met veel UI.
DON’T · stock/overlays
Geen generieke stock, zware gradients, badge-overload of tekst op elk beeld.
06
Motion
Beweging is traag, stil en fotografisch. Geen springende elementen. Hover voor ontdekking; scroll reveals maximaal 20–30px en 650ms.
Hover dit vlak · --slow 650ms · ease cubic-bezier(.22,.75,.22,1)
07
Buttons & links
08
Labels, filters & metadata
Kleine voetjes, grote liefde 06—14 DAGEN
09
Formulieren
Geen kaal WordPress-formulier. Rustige labels, één focuskleur en contextuele vragen per dienst.
Geen zorgen: dit hoeft niet perfect geformuleerd.
10
Iconografie
Dunne lijniconen, 1.5px stroke, ronde uiteinden. Alleen functioneel. Hart mag als merkaccent, niet als decoratie overal.
♡→⌄＋×◌⌖
12
Dienstkaarten
02
Newborn
03
Bruiloft
13
Portfolio & filtering
Desktop masonry, mobiel 2 kolommen. Filters zijn optioneel sticky. Klik opent een donkere lightbox; metadata blijft minimaal.
14
Tarieven
Basis
€ 295
- ± 60 minuten
- 15 digitale foto’s
- Online galerij
Compleet
€ 395
- ± 90 minuten
- 30 digitale foto’s
- Online galerij
- Mini-album
Luxe
€ 495
- ± 2 uur
- Volledige selectie
- Online galerij
- Album + bewaardoos
15
Google Reviews
4,9
★★★★★
Google Reviews★★★★★
“Een spontane, sociale en geduldige fotografe met oog voor details en voor jullie.”
16
FAQ accordion
Na de geboorte stuur je Josje een bericht. De shoot vindt doorgaans in de eerste dagen plaats en wordt in overleg ingepland.
Bij newborn meestal thuis; andere shoots kunnen thuis, buiten of op locatie.
17
Hero’s · 2 canonical varianten
Editorial split · homepage / over mij
signatureFotografie in Amersfoort & heel Nederland
De mooiste dag van je leven. Puur.
Zoveel mooie momenten. Graag leg ik ze voor je vast op de manier zoals ze zijn: puur.
Hi, ik ben Josje ♡
Image-first · dienstpagina
newborn · familie · bruiloftKleine voetjes, grote liefde
Newbornfotografie
Je pasgeboren kindje is zo bijzonder. Een herinnering aan de eerste dagen dat je kindje nog zo klein en puur is.
Beschikbaarheid bekijken →18
Over Josje · signature block
achter de camera
Over mij
Hi, ik ben Josje.
Spontaan, sociaal, geduldig — en altijd op zoek naar dat ene echte moment.
Josje woont met haar gezin in Amersfoort. Sinds 2011 combineert ze fotografie met haar werk als stewardess bij KLM. Die jarenlange ervaring in observeren, reizen en omgaan met jong en oud zie je terug in haar manier van fotograferen.
Lees mijn verhaal →19
Contactflow
Ik kijk ernaar uit jullie verhaal te horen ♡
Laten we kennismaken
Beschikbaarheid aanvragen
20
Eind-CTA
Klaar om dit moment te bewaren?
Laten we iets moois maken.
Vertel Josje wat je in gedachten hebt. Een aanvraag is vrijblijvend.
22
Mobile-first regels
Op mobiel: fotografie eerst, maximaal één primaire CTA per viewport, portfolio in 2 kolommen, tarieven onder elkaar, contact in één kolom. De mobiele crop van Josje houdt haar gezicht centraal.
- Header 64px, logo links, menu rechts
- Body minimaal 16px
- Tap targets ≥44px
- Geen hover-afhankelijke informatie
- Lightbox ondersteunt swipe
23
Pagina-templates
T01
Homepage
Hero → diensten → portfolio → Josje → tarieven → Google Reviews → CTA.
T02
Dienst
Image hero → intro → gallery → werkwijze → tarieven → reviews → FAQ → Josje → CTA.
T03
Portfolio
Intro → filters → masonry → series/lightbox → CTA.
T04
Tarieven
Intro → dienstkeuze → pakketten → FAQ → reviews → contact.
T05
Over mij
Josje hero → verhaal → stijl → ervaring → portfolio tease → CTA.
T06
Contact
Persoonlijk intro → contextformulier → verwachting → contactgegevens.
24
WordPress component mapping
Het design system bepaalt de frontend. De Puurfoto Core plugin levert de data; het theme rendert uitsluitend deze canonical componenten.
| Design component | WordPress bron | Render | Opmerking |
|---|---|---|---|
| Service card | CPT pf_service | Block puurfoto/services | Image, titel, intro, vanaf-prijs |
| Portfolio work | CPT pf_series + taxonomy | Block puurfoto/portfolio | AJAX filter + lightbox |
| Pricing card | CPT pf_package | Block puurfoto/pricing | Koppelbaar aan dienst |
| Google Reviews | API/cache in plugin | Block puurfoto/reviews | Score, totaal, selected reviews |
| FAQ | Repeater / CPT | Block puurfoto/faq | Schema-ready |
| Contact flow | Plugin form schema | Block puurfoto/inquiry | Contextvelden per dienst |
| Josje block | Global settings | Pattern pf-about-josje | Vaste portret asset + korte bio |
25
Do / don’t & governance
DO
- Gebruik echte Puurfoto-fotografie
- Gebruik ruimte als ontwerpelement
- Maximaal één dominante CTA per sectie
- Gebruik Terra spaarzaam
- Laat Josje terugkomen als menselijk anker
- Alle componenten komen uit dit systeem
DON’T
- Geen Elementor-achtige willekeur
- Geen extra kleuren per pagina
- Geen zware schaduwen of glas-effecten
- Geen stockfotografie
- Geen 6 verschillende button-stijlen
- Geen custom component zonder update van het DS
Governance-regel: nieuwe UI die niet in dit document bestaat, wordt eerst als component/variant aan het design system toegevoegd. Daarna pas aan WordPress.