Naar de inhoud
UNCODED
EN – English

Koen Vaessen

Een site voor een somatisch coach waar de homepage met je meeademt, zes ademhalingen per minuut.

Gebouwd voor Koen Vaessen, somatisch coach. In ontwikkeling, nog niet op zijn eigen domein.

Sector
Somatische coaching · Coachsite
Jaar
2026
Diensten
Webdesign, Development, Interactieontwerp
Stack
HTML, CSS, JavaScript, Canvas, Vercel

(01)Het idee

Somatische coaching is lastig uit te leggen en makkelijk te voelen. In plaats van ademwerk te beschrijven, moest de site een bezoeker het binnen een paar seconden laten proberen, en dan laten zien hoe je begint.

Koen coacht mensen om sterker te worden, beter te ademen en zich thuis te voelen in hun eigen lichaam. De site moest dat binnen een paar seconden laten voelen, niet alleen laten lezen.

Beginnen is bewust simpel en persoonlijk: stuur START naar @koenvaessen op Instagram, en Koen antwoordt zelf met een paar vragen.

Schermen

De homepage van Koen Vaessen: de kop Strong body. Quiet mind. boven petrolkleurige hoogtelijnen rond een amber stip, met de aanwijzing Breathe in.
Home: het veld ademt, en de aanwijzing onder de kop telt mee.
De ademwerkpagina van Koen Vaessen met drie oefenknoppen en een grote cirkel met Ready.
Ademwerk: kies een oefening en volg de cirkel.
De coachingpagina van Koen Vaessen die overgaat van een krijtwitte sectie naar een petrol sectie met de titel What you get.
Coaching: krijtwitte en petrol banden wisselen elkaar af.
De homepage van Koen Vaessen op een telefoon.
Telefoon: het veld en de aanwijzing, direct onder de kop.
De ademtimer op een telefoon.
De timer past in één hand.

(02)Ontwerpkeuzes

Kleur

  • Tide#0F3B3CHero en donkere banden
  • Kelp#1B5451Vlakken op donker
  • Chalk#EDEFEALichte pagina's
  • Ink#122423Tekst op krijtwit
  • Oxygen#C4ECE4Tekst en lijnen op petrol
  • Pulse#F0B03FAlleen voor calls to action

Typografie

  • Bricolage GrotesqueDisplay: zware, strakke statements.
  • LiterataLopende tekst: een leesschreef voor alles wat je rustig tot je neemt.

Kleur

"Tidewater": diepe petrolvlakken wisselen af met koele, krijtwitte pagina's. Amber is bewaard voor calls to action, zodat het enige wat je daarna moet doen altijd het enige warme op het scherm is.

Typografie

Bricolage Grotesque, zwaar en strak gezet, voor korte statements als "Strong body. Quiet mind." Literata voor de tekst, op een regellengte van 38 rem. Een modulaire schaal met verhouding 1,333 en vloeiende displaymaten.

Beweging

Eén luid ding per pagina. Op de homepage is dat het ademende veld; de rest is rustige letter en ruimte. Het veld staat stil voor wie minder beweging wil.

Layout

Pagina's lezen als een ritme van donkere en lichte banden. De content houdt één goot aan die meeschaalt van 20 tot 72 px, en de navigatie heeft één amber knop: Send START.

(03)De aanpak

  1. 01

    Een hero van hoogtelijnen op een canvas dat ademt in het tempo van coherent ademen (vijf seconden in, vijf uit), met een live aanwijzing onder de kop. Hij staat stil voor wie liever minder beweging ziet.

  2. 02

    Een begeleide ademtimer met box breathing, coherent ademen en een lange uitademing, elk met een korte uitleg over wanneer je hem gebruikt.

  3. 03

    Een "tidewater"-palet: diep petrol en koel krijtwit, met amber alleen voor de knoppen die ertoe doen. Beginnen is één duidelijke stap: stuur "START" op Instagram.

(04)De stack

HTML
Zes met de hand geschreven pagina's en geen framework, want niets op de site heeft er een nodig.
CSS
Eén stylesheet. Kleuren, lettergroottes en witruimte zijn tokens bovenaan.
JavaScript
Drie kleine scripts: het ademende veld, de ademtimer en het telefoonmenu met een kopieerknop.
Canvas 2D
Tekent 26 hoogtelijnen die met elke ademhaling zwellen en weer zakken, scherp op schermen met hoge resolutie.
Vercel
Statische hosting zonder build-stap.

(05)In de details

  1. 01

    Een hero die zes keer per minuut ademt

    Vijf seconden in, vijf seconden uit, vloeiend als een echte in- en uitademing. Een live aanwijzing onder de kop zegt wat je moet doen en telt de seconden.

  2. 02

    Een timer met oefeningen die hij echt geeft

    Box breathing (4-4-4-4, vier rondes) om je te ankeren voor iets spannends, coherent ademen (5-5) voor dagelijkse rust, en een lange uitademing (4-8). Bij elke oefening staat wanneer je hem gebruikt.

  3. 03

    Beginnen is één bericht

    De Start-pagina legt één stap uit: stuur START op Instagram. Een kopieerknop zet het woord op je klembord, en Koen antwoordt persoonlijk.

  4. 04

    Helemaal geen dependencies

    Geen framework, geen package manager, geen build. De hele site draait vanaf `python3 -m http.server`.

(06) Het resultaat

Zes statische pagina's zonder build-stap en zonder dependencies: gewone HTML, één stylesheet met tokens en drie kleine scripts.

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