WordPress website voor Praktijk Tezamen

Een professionele WordPress website begint wat mij betreft niet bij een template. Eerst moet duidelijk zijn welk verhaal de website moet vertellen en wat een bezoeker nodig heeft om dat verhaal te begrijpen.

Bij Praktijk Tezamen van psychomotorisch therapeut Mitch Ligtvoet was dat extra belangrijk. Zijn visie op psychomotorische therapie, jarenlange ervaring en zijn eigen methodiek De Rode Draad vormden samen een uitgebreid verhaal waarin alles met elkaar samenhangt.

De uitdaging was daarom niet om simpelweg een nieuwe website te maken. De uitdaging was om uit al die inhoud een heldere websitestructuur te ontwikkelen waarop een bezoeker snel begrijpt: waar loop ik tegenaan, wat doet Praktijk Tezamen en wat kan dit mij opleveren?

Daarvoor moest ik eerst zelf de rode draad vinden.

Mitch werkt met mensen die merken dat bepaalde reacties en patronen steeds opnieuw terugkomen. Onder druk kun je bijvoorbeeld gaan vechten, vluchten, bevriezen of pleasen. De manier waarop je reageert, heeft invloed op jezelf én op de mensen om je heen.

Binnen Praktijk Tezamen gebruikt Mitch daarvoor onder andere zijn eigen methodiek De Rode Draad. Die helpt om zichtbaar te maken waar gedrag vandaan komt, wat er gebeurt wanneer spanning oploopt en waar ruimte ontstaat om andere keuzes te maken.

Daar kwam nog een tweede uitdaging bij: Praktijk Tezamen richt zich zowel op particulieren als op organisaties en professionals. Die bezoekers komen niet met dezelfde vraag naar de website.

Er lag dus veel waardevolle inhoud, maar die moest worden vertaald naar een logische websitestructuur voor verschillende bezoekers.

En dat zonder van de website een digitaal studieboek te maken.

Dit project begon daarom niet in WordPress.

Een belangrijk uitgangspunt was het uitgebreide manuscript achter De Rode Draad. Om een goede website te kunnen maken, moest ik eerst begrijpen wat Mitch wilde vertellen: welke ideeën horen bij elkaar, welke informatie heeft een bezoeker nodig en wat is achtergrondinformatie die pas later relevant wordt?

Van daaruit ontstond de structuur.

Er kwamen duidelijke routes voor het particuliere en zakelijke aanbod. De uitleg over psychomotorische therapie kreeg een logische plek. De Rode Draad werd niet weggestopt als één methode tussen andere informatie, maar kreeg een centrale rol binnen de website.

Ook de teksten zijn tijdens dat proces aangescherpt en opnieuw gestructureerd. Niet vanuit de vraag wat wil Praktijk Tezamen allemaal vertellen?, maar zoveel mogelijk vanuit de vraag wat moet een bezoeker hier begrijpen of herkennen?

Pas toen die inhoudelijke basis stond, werd het tijd om te ontwerpen en bouwen.

De Rode Draad moest meer worden dan een pagina waarop Mitch zijn methodiek uitlegt.

Daarom heb ik het principe ook visueel en functioneel door de website heen verwerkt.

De vier automatische reacties vechten, vluchten, bevriezen en pleasen kregen ieder een herkenbare plek. Ze komen terug in de inhoud, in visuele elementen en in het blog. Zo ontstaan verschillende ingangen waarmee bezoekers verder kunnen lezen vanuit gedrag dat ze bij zichzelf herkennen.

Voor de pagina over De Rode Draad zelf bouwde ik een interactieve tijdlijn. De bezoeker volgt het proces stap voor stap en kan op verschillende momenten verdieping openen.

Dat maakt een belangrijk verschil.

De methodiek wordt niet alleen uitgelegd.

De bezoeker beweegt erdoorheen.

Een praktijk voor psychomotorische therapie hoeft wat mij betreft niet automatisch te leiden tot een website vol pasteltinten, ronde wolkjes en algemeen welzijnsjargon.

Dat zou bovendien totaal niet bij Mitch passen.

Voor Praktijk Tezamen was al een sterke visuele basis aanwezig. Joke van Vormbuilders ontwikkelde het logo en verschillende herkenbare grafische elementen, waaronder de illustraties voor vechten, vluchten, bevriezen en pleasen en het gele grafische vlak dat bij Mitch' portret wordt gebruikt.

Mijn uitdaging was om die losse huisstijlelementen te vertalen naar een complete visuele taal voor de website.

Vanuit die basis ontwierp ik een stevige webstijl met antraciet en felgeel als belangrijkste kleuren. Schuine vlakken, uitgesproken typografie, fotografie, iconen en contrast zorgen voor energie en beweging. Bestaande elementen keren op verschillende manieren terug, zodat de herkenbaarheid behouden blijft zonder dat iedere pagina hetzelfde wordt.

De fotografie van Corine van Ariene Fotografie speelt daarin een belangrijke rol. In plaats van generieke stockfoto's kon ik ontwerpen rondom beelden die daadwerkelijk bij Mitch en zijn praktijk horen.

Die beweging past ook inhoudelijk bij Praktijk Tezamen. Psychomotorische therapie draait juist niet alleen om praten en analyseren, maar ook om ervaren, voelen en doen.

Tegelijkertijd moest de vormgeving de inhoud ondersteunen en niet overschreeuwen. Grote tekstblokken zijn opgebroken, informatie wordt afgewisseld met beeld en verschillende onderdelen krijgen bewust hun eigen ritme.

Het resultaat is een website die niet probeert eruit te zien als iedere andere therapeutische praktijk, maar als Praktijk Tezamen.

Iemand die persoonlijk vastloopt en op zoek is naar begeleiding, bezoekt een website met een andere vraag dan een organisatie die ondersteuning zoekt voor een team of medewerker.

Daarom kregen particulier en zakelijk ieder een eigen route binnen de website.

De inhoud, voorbeelden en insteek kunnen daardoor aansluiten bij de bezoeker, zonder dat er twee afzonderlijke websites ontstaan. De visie, visuele identiteit en De Rode Draad verbinden beide kanten van Praktijk Tezamen.

Dat klinkt als een eenvoudige keuze, maar het voorkomt een probleem dat op veel websites ontstaat: proberen álles voor íedereen tegelijk te vertellen.

Ook het blog moest onderdeel worden van de inhoudelijke structuur.

Artikelen zijn daarom gekoppeld aan de thema's vechten, vluchten, bevriezen en pleasen. Op de website kan een bezoeker vanuit die thema's verder lezen en bij een artikel blijft zichtbaar binnen welk onderdeel van De Rode Draad het valt.

Daarvoor bouwde ik in Divi 5 dynamische templates voor de verschillende overzichten en artikelen.

De actieve categorie wordt automatisch gemarkeerd. Wie bijvoorbeeld een artikel over pleasen leest, ziet dat thema ook visueel terug in de navigatie rondom het artikel.

Zo wordt het blog geen archief waarin steeds meer berichten verdwijnen, maar een groeiende kennislaag binnen de website.

Zo wordt het blog geen archief waarin steeds meer berichten verdwijnen, maar een groeiende kennislaag binnen de website.

Een groot deel van Praktijk Tezamen is gebouwd met WordPress en Divi 5. Maar tijdens het project kwamen we verschillende situaties tegen waarin de standaardmogelijkheden niet voldoende waren voor wat het ontwerp nodig had.

In plaats van het ontwerp dan aan te passen aan de beperkingen van de pagebuilder, heb ik gericht maatwerk toegevoegd.

Het zijn technische oplossingen die een bezoeker waarschijnlijk nooit bewust zal opmerken.

En dat is precies de bedoeling.

De techniek moet ervoor zorgen dat het ontwerp werkt. Niet uitleg nodig hebben over waarom iets helaas niet kon.

De desktopversie bevat veel elementen die hun kracht ontlenen aan compositie: overlappende vlakken, schuine kaarten, grids, iconen, fotografie en een verticale tijdlijn.

Die kun je op mobiel niet simpelweg smaller maken en onder elkaar zetten.

Daarom is de mobiele versie als een eigen ontwerpstap behandeld.

Grids werden opnieuw opgebouwd, verhoudingen veranderden, witruimte werd opnieuw beoordeeld en elementen kregen waar nodig een andere positie of afmeting. Ook de tijdlijn van De Rode Draad werd aangepast om op een klein scherm dezelfde logica te behouden.

Het doel was niet dat de desktopwebsite ook op een telefoon past.

Het doel was dat Praktijk Tezamen ook op een telefoon een goede website is.

Praktijk Tezamen heeft nu een website waarin de inhoudelijke visie, vormgeving en techniek niet los van elkaar staan.

Particuliere en zakelijke bezoekers hebben ieder een duidelijke ingang. De Rode Draad verbindt verschillende onderdelen van de website. De vier automatische reacties geven bezoekers herkenningspunten en vormen tegelijkertijd de basis voor verdere verdieping in het blog.

Mitch kan nieuwe artikelen publiceren binnen die bestaande structuur, waardoor de website inhoudelijk kan blijven groeien zonder dat de samenhang verloren gaat.

En misschien wel het belangrijkste resultaat: de hoeveelheid inhoud waarmee het project begon, is niet verdwenen of platgeslagen om in een website te passen.

Praktijk Tezamen laat daarmee ook goed zien waarom een maatwerk WordPress website niet betekent dat alles vanaf nul geprogrammeerd moet worden. Het maatwerk zit juist in de combinatie: een goede websitestructuur, een eigen webdesign, bestaande WordPress- en Divi-functionaliteit waar dat kan en aanvullende code waar dat nodig is.

Een pagebuilder kan een ontwerp uitvoeren, maar vertelt me niet welke informatie belangrijk is, welke route een bezoeker moet volgen of hoe je een ingewikkeld verhaal begrijpelijk maakt.

Bij Praktijk Tezamen betekende dat: lezen, vragen stellen, schrappen, structureren, schrijven, ontwerpen, bouwen, testen en soms alsnog zelf een technische oplossing maken wanneer de standaardmogelijkheden ophielden.

Soms begint een website met een huisstijl en vijf kant-en-klare pagina's tekst.

En soms begint hij met een manuscript, een methodiek en een enorme hoeveelheid informatie.

Dan is mijn eerste taak niet om een website te bouwen.

Dan is mijn eerste taak om de rode draad te vinden.

Niet ieder bedrijf laat zich vangen in vijf standaardpagina's met bovenaan een grote foto en daaronder drie gekleurde blokjes.

Heb je veel kennis, verschillende diensten of een verhaal waarvan je zelf inmiddels niet meer weet waar een bezoeker moet beginnen? Dan is de oplossing niet per definitie méér tekst of nóg een pagina.

Soms moet eerst de structuur helder worden.

Daarna kunnen we een WordPress website bouwen die jouw verhaal wél goed vertelt.