Naar de inhoud
UNCODED
EN – English

Paddenstoelenbos

Een tweetalige site voor een paddenstoelenbos die van kleur verandert met het seizoen dat het echt is.

Een nieuwe website voor Stichting Paddenstoelenbos, een stichting in Weert (NL) die biodynamische paddenstoelen kweekt. In ontwikkeling; op paddenstoelenbos.nl draait nog de oude site.

Sector
Stichting · Paddenstoelenbos
Jaar
2026
Diensten
Webdesign, Development, Contentmigratie, Toegankelijkheid
Stack
Next.js, React, Tailwind CSS, TypeScript, three.js, Vercel

(01)Het idee

De oude site was één lange pagina. Mensen kwamen om te zien wanneer de volgende workshop is, of ze mogen plukken en hoe ze mee kunnen doen, en moesten langs al het andere scrollen om daar te komen. De nieuwe site moest elk van die vragen een eigen adres geven, de eigen woorden van de stichting houden en nog steeds voelen als het bos dat de mensen erachter magisch noemen.

Stichting Paddenstoelenbos kweekt biodynamische paddenstoelen aan de rand van de Tungelerwallen in Weert, en leert mensen hetzelfde te doen: workshops, wandelingen, een steunprogramma met een eigen munt, en een veldproef tegen Japanse duizendknoop. De oude site vertelde dat allemaal op één lange pagina.

Bezoekers komen voor drie dingen: wanneer de volgende wandeling of workshop is, of ze iets mogen plukken, en hoe ze mee kunnen doen. Dus kreeg elke sectie een eigen pagina, en bleef de eigen stem van het bos (warm, een beetje vreemd, trots om natuurgekkies te zijn) precies zoals ze hem schreven.

Schermen

De homepage van Paddenstoelenbos in het herfstpalet: de kop Welkom in het Paddenstoelenbos, een foto van iemand die een stam beënt, en een getekend mycelium dat erachter groeit.
Home in Herfst, het seizoen dat de kalender koos. Achter de hero groeit een mycelium.
Dezelfde homepage in het winterpalet na donker: lichte tekst en grijswitte sporen op een diep blauwzwarte achtergrond.
Dezelfde pagina in Winter, 's nachts: het seizoen uit de kalender, het donker uit het apparaat van de bezoeker.
De Spora-sectie: twee foto's van de eigen zilveren munt van de stichting en twee steunniveaus, Zwambassadeur GOLD voor 20 Spora en SILVER voor 10 Spora per maand.
De Spora: de eigen munt van de stichting, en de kleur waar de site naar vernoemd is.
Een rij afgeronde foto's uit het bos (koken boven een vuur, een paddenstoelhoed in een hand, een papieren zak shiitake) met een voortgangslijn eronder.
Het bos in beeld: een vastgezette rij die met verticaal scrollen opzij schuift.
De veldproefpagina, Aardpeer VS Japanse duizendknoop, met vier cijfers in een afgeronde band: 40 m², 100 kg, 9 maanden, 6 m².
De duizendknoopproef. De enige cijfers op de site die optellen, want ze zien binnenkomen is het punt.
De homepage op een telefoon, met een zwevende dock onderaan: Agenda, Steun, Contact en Menu.
Telefoons krijgen een dock met de drie dingen waarvoor mensen komen.
Het menu op volledig scherm op een telefoon, met elke pagina, en daaronder de seizoensknop, de taalkeuze en drie leesvoorkeuren.
Het menu opent elke pagina, plus het seizoen en de leesvoorkeuren.
De cijfers van de veldproef op een telefoon 's nachts, in oranje op een donkerbruine achtergrond, één per regel.
De veldproef in Herfst, 's nachts.

(02)Ontwerpkeuzes

Kleur

  • Bosgroen#2F6B43Structuur: knoppen, de call to action
  • Spora#D4691FInteractie: hovers, pijlen, markeringen, lijnen
  • Spora diep#B35213Spora als vlak onder tekst
  • Herfst#F7EEDEAchtergrond in de herfst
  • Crème#FDF7ECKaarten, en tekst op groen
  • Inkt#1C1710Inkt
  • Vlier#6B4A73Sporenprint-ornament, nooit een knop

Typografie

  • FrauncesKoppen, geladen als echte variabele letter zodat de assen SOFT en WONK omhoog kunnen. Daardoor klinkt de pagina niet als een brochure.
  • KarlaLopende tekst: een humanistische grotesk met net genoeg eigenaardigheid om naast Fraunces te staan.

Kleur

De tint volgt de kalender, de helderheid volgt het apparaat van de bezoeker. Vier seizoenen (Lente, Zomer, Herfst, Winter) hebben elk een dag- en een nachthelft, dus wie in oktober binnenkomt, vindt een site die weet dat het oktober is. Bosgroen draagt de structuur; Spora, vernoemd naar de eigen munt van de stichting, antwoordt op alles wat je kunt aanraken.

Typografie

Fraunces met de zachte, wonky assen op elke kop, en Karla om te lezen. Beide zelf gehost, dus een build hangt nooit af van een fontserver die moet antwoorden. Letter, sectieritme en hoekradius zijn allemaal vloeiende clamp()-waarden, zonder breedte waarop de site tussen twee ontwerpen in hangt.

Vorm

Twee vormen en niet meer. Elke container (kaart, paneel, foto) heeft dezelfde grote ronde hoeken; alles wat je kunt aanraken is een pil. Secties worden gescheiden door een getekende draad mycelium, niet door een lijn.

Beweging

Elk effect heeft een voorwaarde en elk effect wijkt: een openingssluier één keer per bezoek, een mycelium dat achter de hero groeit, fotorijen die het scrollen opzij schuift. Bij minder beweging stopt alles, en de bezoeker kan zijn systeem vanuit de footer in beide richtingen overrulen.

(03)De aanpak

  1. 01

    Elke sectie van de oude pagina kreeg een eigen pagina met een eigen URL, standaard in het Nederlands en in het Engels onder /en. De oude adressen die mensen al delen werken nog, via permanente redirects.

  2. 02

    Vier paletten, één per seizoen, gekozen door de kalender, elk met een nachthelft die de donkere modus van de bezoeker volgt. Er is precies één knop: Seizoen.

  3. 03

    De Nederlandse tekst is die van de stichting zelf, overgenomen zoals hij geschreven was. Workshopdata blijven op het boekingsplatform, zodat de site nooit een verouderde datum toont.

  4. 04

    Op desktop staat het menu bovenaan; op telefoons houdt een dock onderaan de drie dingen waarvoor mensen komen (agenda, steun, contact) plus een Menu met label.

(04)De stack

Next.js 16
Elke pagina vooraf gebouwd in het Nederlands en Engels, met middleware die paden zonder taal naar het Nederlands stuurt en één canoniek adres per pagina houdt.
React 19
Eén sectievorm voor de hele homepage, hergebruikt, zodat de pagina als één geheel leest.
Tailwind CSS 4
Semantische kleurtokens per seizoen en per nachthelft, en de vloeiende schaal voor letter en witruimte.
TypeScript
Alle tekst als getypte Nederlands-Engelse paren, elk gemarkeerd als de eigen woorden van de stichting of als een label dat de nieuwe structuur nodig had.
React Three Fiber
Het vertakkende mycelium achter de hero, gekweekt uit een generator met vaste seed, zodat het op elk apparaat hetzelfde is.
Framer Motion + Lenis
Onthullingen, de scrollgestuurde fotorijen en smooth scrolling, allemaal uit bij minder beweging.
Vercel
Hosting, met het framework vastgelegd in de repository zodat een nieuw project het niet voor een statische site kan aanzien.

(05)In de details

  1. 01

    Hun woorden, niet de onze

    De Nederlandse tekst is van de live site gelezen en overgenomen zoals hij geschreven was. Elk stuk is gemarkeerd als eigen tekst van de stichting of als kop die de nieuwe structuur nodig had. De algemene voorwaarden blijven voor elke bezoeker in het Nederlands, want de Nederlandse tekst is bindend.

  2. 02

    Geen verouderde data

    Workshopdata blijven op het boekingsplatform dat het geld ontvangt, en de site linkt ernaar. Een tweede agenda zou een tweede bron zijn die het oneens kan zijn.

  3. 03

    Oude links blijven werken

    De veldproef houdt de eigen URL van de oude site, en hernoemde pagina's sturen permanente redirects, zodat links die al rondgaan nog steeds landen.

  4. 04

    Eén knop, met een naam

    De enige schakelaar op de site zegt Seizoen Auto · Herfst: je ziet dat de site kiest én wat hij koos. Kies een seizoen en de kalender beslist niet meer tot je weer Auto kiest.

(06) Het resultaat

Negen pagina's in het Nederlands en Engels, met de eigen foto's en film van de stichting, elk met alt-tekst geschreven door er echt naar te kijken, en alle acht kleurachtergronden getoetst aan WCAG AA.

Even kennismaken

Laten we iets
ongewoons bouwen.

Een gratis intakegesprek, zonder verplichtingen. Je gaat weg met een heldere scope en een vaste prijs.

Start een project