Naar de inhoud
UNCODED
EN – English

Francien Rutten

Een rustige, Nederlandstalige site voor een therapeut, in nachtblauw, maanlicht en rozenhout, met een telefoondock in de vorm van een kiezel.

Gebouwd voor de praktijk van Francien Rutten in dieptepsychologie en lichaamswerk in Eijsden (NL). In ontwikkeling, nog niet op haar eigen domein.

Sector
Dieptepsychologie & lichaamswerk · Praktijksite
Jaar
2026
Diensten
Webdesign, Development, Mobiele navigatie
Stack
Next.js, React, Tailwind CSS, TypeScript, Vercel

(01)Het idee

Wie een therapeut zoekt, komt vaak onrustig binnen. De site moest stil en veilig voelen voordat hij iets zegt, en de eerste stap (kennismaken) op elke pagina de makkelijkste maken.

Voor vrouwen die zich vrij willen voelen in hun lichaam, hun expressie en hun emoties. De site spreekt hen direct aan, in het Nederlands, en in de toon van de praktijk: zonder haast en warm.

Elke pagina eindigt in één stap: Kennismaken, een gratis eerste gesprek. Het ontwerp maakt die stap makkelijk te vinden zonder ooit te duwen.

Schermen

De pagina dieptepsychologie van Francien Rutten: een grote schreefkop met een zachte blosroze cirkel erachter.
Dieptepsychologie: grote schreefletters en een zachte vorm die drijft.
De contactpagina van Francien Rutten met telefoon, e-mail, adres en een kennismakingsformulier.
Contact: het kennismakingsformulier naast telefoon, mail en adres.
De homepage van Francien Rutten op een telefoon met de donkere kiezeldock en een roze knop Kennismaken.
De kiezeldock, met een eigen vorm voor Kennismaken.
De pagina dieptepsychologie op een telefoon, met Diepte actief in de dock.
De actieve plek krijgt een zacht blad dat tussen de plekken glijdt.

(02)Ontwerpkeuzes

Kleur

  • Nacht#161A33Diepte, de dock, donkere secties
  • Maan#F4F0F0Achtergrond, ruimte
  • Inkt#1C1B2ETekst
  • Rozenhout#C48B86Warmte, alleen vlakken en lijnen
  • Rozenhout tekst#8E4F4BRozenhout als leesbare tekst (5,6:1)
  • Blos#EBD8D4Zachte vormen, Kennismaken
  • Lavendel#C9C3DCZachte vormen

Typografie

  • Instrument SerifDisplay en koppen, met één zinsdeel cursief.
  • Hanken GroteskLeestekst op 17 px met een regelhoogte van 1,7, en de interface.

Kleur

Nachtblauw voor diepte, maanlicht voor ruimte, rozenhout voor warmte. Rozenhout vult alleen een vlak of trekt een lijn. Waar het gelezen moet worden, is het donkerder gemaakt tot #8E4F4B, zodat het WCAG AA haalt.

Typografie

Een hoge, stille schreefletter op displaygrootte, "Verder dan het oppervlak", met de tweede helft cursief. Een zachte grotesk voor alles wat je leest. Beide schalen vloeiend van een telefoon van 390 px tot een desktop van 1280 px.

Beweging

Langzaam en lichamelijk. Zachte vormen ademen en drijven achter de tekst, lijnornamenten tekenen zichzelf, een citaat licht woord voor woord op en een kronkelende tijdlijn vult zich terwijl je leest. Alles staat stil voor wie minder beweging wil.

Layout

Eén grid (1240 px, 12 kolommen, marges van 20 tot 64 px) waar alles op uitlijnt. Secties wisselen tussen maanlicht, papier, blos en nacht, verbonden door zachte golfranden in plaats van harde lijnen.

(03)De aanpak

  1. 01

    Nachtblauw voor diepte, maanlicht voor ruimte, rozenhout voor warmte. Rozenhout is alleen ooit een vlak of een lijn; waar het als tekst gelezen moet worden, is het donkerder gemaakt zodat het WCAG AA haalt.

  2. 02

    Op telefoons een zwevende dock in de vorm van een kiezel in plaats van een glazen balk: drie plekken links en één roze parel rechts voor Kennismaken, zodat de belangrijkste stap een eigen vorm krijgt.

  3. 03

    Alle praktijkgegevens (adres, telefoon, e-mail) staan in één bestand, waar de footer, de contactpagina en de gestructureerde data allemaal uit lezen.

(04)De stack

Next.js 16
Elke pagina wordt vooraf als statische HTML gebouwd, dus hij laadt direct en kost niets om te draaien.
React 19
Eén component per element (sectie, titel, organisch beeld, golf, ornament…), met een catalogus; pagina's stellen alleen samen.
Tailwind CSS 4
Het palet staat als tokens in één @theme-blok, met een vloeiende typeschaal ernaast.
TypeScript
Alle praktijkgegevens (adres, telefoon, e-mail, links) staan in één getypt bestand.
next/font
Instrument Serif en Hanken Grotesk komen van de site zelf, niet bij elk bezoek van een fontdienst.
Vercel
Hosting en previewdeploys.

(05)In de details

  1. 01

    De Schelp, een dock met een eigen vorm

    Op telefoons zweeft een donkere kiezel met zachte, asymmetrische hoeken boven de pagina. Links drie plekken, rechts één blosroze parel voor Kennismaken, zodat de belangrijkste stap een eigen vorm krijgt.

  2. 02

    De ijsberg, getekend als druppel

    De pagina dieptepsychologie tekent de waterlijn: het kleine bewuste deel erboven, het grote onbewuste deel (95 %) eronder. Onder water is de vorm zacht en rond, meer druppel dan ijs.

  3. 03

    Een formulier dat je mail opent

    Het kennismakingsformulier stuurt geen gegevens naar een server. Het opent het mailprogramma van de bezoeker met alles al ingevuld, zodat er niets persoonlijks ergens anders staat dan in het gesprek zelf.

  4. 04

    Haar eigen woorden

    Fragmenten uit Franciens Instagramposts staan op de site, elk met een link naar de oorspronkelijke post.

(06) Het resultaat

Vier pagina's (home, dieptepsychologie, over, contact) op een vloeiende typeschaal van telefoon tot desktop, met Instrument Serif en Hanken Grotesk.

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