Design inspiratie Geplaatst op: 16 februari 2021, aangepast op: 1 december 2023
Binnenkort zijn er weer Tweede Kamerverkiezingen. 17 maart gaan we naar de stembus. Maar hoe zien de websites van de politieke partijen eruit? En weten ze de zwevende kiezer te overhalen?
In dit artikel bekijken we de websites van de 10 grootste politieke partijen (naar aantal zetels in de Tweede Kamer). We kijken niet alleen naar het ontwerp, maar ook naar hoe de standpunten en de lijsttrekkers worden gepresenteerd. In 2017 bekeek Mediaweb al de websites van 16 politieke partijen, maar intussen zijn veel websites aangepast of vernieuwd. Tijd dus voor een nieuwe vergelijking.
Op de website van de VVD neemt de fractievoorzitter Klaas Dijkhoff een prominente plaats in: hij staat naast de slogan 'Samen sterker verder', op een lichtgrijze achtergrond. Hieronder staan twee blokken, met in de linker belangrijke links naar het verkiezingsprogramma, de kandidatenlijst en downloads van het campagnemateriaal. In het rechterblok een formulier om je in te schrijven voor de nieuwsbrief van Mark Rutte. Dit blok valt op door de knalblauwe achtergrond en de knalgroene button.
Deze kleuren komen trouwens vaker terug op de website. Het blauw en oranje zijn de huisstijlkleuren van de VVD en worden gecombineerd met veel wit en grijs, het felle groen wordt voornamelijk als call-to-action kleur gebruikt.
De kleur groen komt bijvoorbeeld terug in de navigatie: hier wordt de kleur gebruikt als achtergrondkleur van de knop om lid te worden van de VVD. Hierdoor valt de knop goed op in de rest van de navigatie. Deze navigatie zit trouwens goed in elkaar: hier zijn zes menu-items te zien. Drie hiervan (Partij, Mensen en Leden) maken gebruik van een submenu welke bij een mouse over tevoorschijn komt.
Op mobiel werkt de website aardig goed. Het menu is dan verstopt achter een 'hamburgertje', en de submenu's zijn eenvoudig open en dicht te klappen door op de pijltjes achter de titels te klikken. De tekst op de homepage is wel slecht leesbaar doordat de blauwe tekst over het blauwe vest van Klaas Dijkhoff is geplaatst en zo onvoldoende contrast heeft. In de footer zijn alle links opeens in het midden gecentreerd, wat niet lekker leest omdat de links niet even lang zijn.
Al met al zit de website van de VVD prima in elkaar. De navigatie is helder en de tekst goed leesbaar. Door het blauw en oranje is het duidelijk dat je de website van de VVD bekijkt, maar het grijs komt af en toe wat saai en somber over.
Op de website van de Partij voor de Vrijheid is Geert Wilders prominent aanwezig in de fotocarrousel. Verder ontbreekt een duidelijke focus. Onder deze carrousel is een banner te zien die leidt naar een pagina om een poster te downloaden: maar de website van de PVV doet verder niets om de twijfelende kiezer over de streep te trekken. Zo zijn de standpunten nergens op de homepage te vinden: hier staan verder alleen nieuwsberichten.
Het verkiezingsprogramma is gelukkig wel in de navigatie te vinden, welke overigens 8 links bevat (submenu's niet inbegrepen). Deze submenu's hebben op geen enkele manier een visuele aanwijzing. Een belangrijke actie die websitebezoekers kunnen uitvoeren (lid worden van de partij) is hierdoor moeilijk te vinden. Deze is namelijk onder de pagina 'Partij' geplaatst.
De website van de PVV is niet responsive. Hierdoor moet er op smartphones ingezoomd worden om de tekst te lezen en de navigatie te gebruiken. Ook werkt bepaalde media (zoals de video's) niet, omdat hiervoor Flash wordt gebruikt. Ook het verkiezingsprogramma is alleen in pdf-formaat beschikbaar.
De website van de Partij voor de Vrijheid maakt een gedateerde en slordige indruk. De navigatie lijkt niet goed uitgedacht en er is geen duidelijke focus op de website. Door het blauw, rood en wit hoort de website wel duidelijk bij de PVV, maar dat is dan ook het enige positieve wat er over deze website gezegd kan worden.
Ook op de website van het CDA staat de lijsttrekker centraal. Wopke Hoekstra staat midden op de homepage, met daarnaast de slogan van het CDA: 'Nu doorpakken'. De belangrijke acties 'Word lid' en 'Doneer' hebben een prominente plaats op de home. De doneer-knop is zelfs twee keer zichtbaar.
De website van de CDA ziet er modern uit: een frisse groen tint wordt gecombineerd met veel wit, petrolblauw en beige. Oranje wordt ingezet als accent- en call-to-action-kleur. Mooi detail: het blauw, beige en wit komen allemaal terug in de portretten die iets lager op de homepage zijn geplaatst. Dit geeft de website een uniforme en verzorgd uiterlijk.
De navigatie is helder vormgegeven en bestaat uit 6 hoofditems. Ook is er een secundair menu waar onder andere wordt gelinkt naar de contactpagina en het aanmeldformulier voor vrijwilligers. Ook kan hier gekozen worden voor variant van de website met hoog contrast. Hiermee wordt de tekst nog beter leesbaar door kleuren aan te passen.
De standpunten staan verrassend laag op de homepage, maar hier is eenvoudig naartoe te navigeren vanuit het menu. De standpunten zijn standaard gesorteerd op alfabetische volgorde, en bovenaan staan twee uitgelichte thema's die het meest worden gekozen. Ook kunnen de standpunten bekeken worden op thema.
De typografie ziet ook modern uit. Een dik lettertype wordt gebruikt in titels, terwijl een schreefloze variant voor langere teksten wordt gebruikt. Door de hoofdletters in de titels is de tekst echter niet altijd prettig te lezen.
De responsive website van het CDA werkt goed op smartphones. Het menu werkt prettig en de rest van de website wordt donker gemaakt waardoor de focus op de navigatie wordt gelegd. Op de homepage is de tekst in de header goed te lezen door de balken die achter de tekst zijn geplaatst. Ook de belangrijke acties zijn nog steeds zichtbaar boven de fold. De oranje knop 'Word lid' die over de inhoud is geplaatst, leidt wel af van de inhoud, omdat deze op een vaste plek vast blijft staan.
De website van het CDA is verrassend modern. Bij het ontwerpen is duidelijk rekening gehouden met de websitebezoeker. De tekst is prettig te lezen, de navigatie duidelijk en de inhoud logisch ingedeeld. Ook is er een duidelijke call-to-action aanwezig.
De website van D66 maakt een ruimtelijke indruk. Dit komt mede door de witruimte en het klein aantal elementen wat zichtbaar is boven de fold. De slogan 'Stem voor nieuw leiderschap', dat naast de foto van Sigrid Kaag is geplaatst, staat mooi op ooghoogte. Hieronder staat een link naar de campagnevideo, welke in een pop-up scherm geopend wordt. De profielfoto's die als achtergrond dienen van deze knop wisselen elkaar snel af, waardoor de knop goed opvalt.
Wat verder opvalt aan de homepage van de website van D66 is dat de navigatie achter een knop is verborgen. Dit zien we vaker op mobiele websites, maar is redelijk uniek voor websites die op een desktop worden getoond. Het verborgen menu draagt wel bij aan de ruimtelijke gevoel die op de homepage heerst. Het menu wat tevoorschijn komt na het aanklikken van de knop is duidelijk. De navigatie bestaat uit zes hoofditems waarvan de laatste 3 minder prominent aanwezig zijn. De drie eersten hebben verschillende submenu's, welke in de rechterhelft van het menu tevoorschijn komen bij mouse over. Hierdoor zijn direct alle thema's van de standpunten van D66 te zien. Onder in het menu zijn twee call-to-actions te zien: Word lid en Mijn D66 voor bestaande leden.
Op de homepage zijn een aantal belangrijke thema's uitgelicht. Deze thema's zijn geplaatst op een lichtgroene achtergrond. Deze groen tint past mooi bij het grasgroen van D66. De website van D66 gebruikt meer kleuren: pastelkleuren worden gecombineerd met andere felle kleuren. Groen, roze, oranje, geel en donkerblauw worden door elkaar heen gebruikt. De kleuren werken goed samen, maar lijkt af en toe op een kermisattractie.
De tekst is goed te lezen. Een klassiek lettertype met schreef wordt gecombineerd met een modernere, schreefloze variant. De tekstgrootte wordt gevarieerd om zo hiërarchie aan te geven. De tekst is vrijwel op de gehele website zwart, behalve als de achtergrond te donker is, dan wordt er wit gebruikt. Dit zorgt voor een prettig leesbare tekst, maar soms is er te veel tekst tegelijkertijd op het scherm te zien.
De website van D66 is responsive opgezet, waardoor hij ook op smartphones werkt. Op kleinere schermen valt het logo achter de menu-knop. Ook staat de tekst niet meer naast, maar valt deze over de foto op de homepage. Twee kleine foutjes die er echter wel slordig uitzien. Het menu werkt trouwens erg goed op mobiel. In plaats van de mouse over, moet er nu geklikt worden op submenu's te zien. Deze verschuift vervolgens in plaats van het hoofdmenu.
De website van D66 is helder en is gemakkelijk te lezen. De teksten zouden sterker overkomen als er meer werd afgewisseld met andere media. Ook is het kleurgebruik af en toe gewaagd. De navigatie is daarentegen erg sterk en helder: jammer dat de belangrijkste pagina's zijn verborgen achter het menu-knopje.
De website van GroenLinks maakt gebruik van rechthoekige blokken met daarin vette titels en duidelijke call-to-actions. Bij een aantal blokken is een achtergrondafbeelding gekozen waar de tekst overheen is geplaatst. Hierdoor is soms de witte tekst niet goed leesbaar.
Als kleur van de call-to-actions is gekozen voor een felle tint paars. Deze contrasteert mooi op de witte achtergrond, maar de huisstijlkleuren groen en rood komen verder nauwelijk terug op de website.
De navigatie zit helder in elkaar. De drie belangrijkste pagina's (Missie, Standpunten en Onze mensen) zijn links in de menubalk geplaatst. Het logo is in het midden gecentreerd en twee belangrijke call-to-actions (Word lid en Doe mee) staan rechts in de balk. Een aantal minder belangrijke pagina's zijn verborgen achter een menu-icoon.
De standpunten staan redelijk laag op de homepage: de webwinkel, nieuws en lid worden is blijkbaar belangrijker voor GroenLinks. De standpunten zijn verdeeld in verschillende thema's. De foto's die hierbij gebruikt worden maken het geheel wat druk. Iconen, zoals op de website van de VVD, zouden deze pagina wellicht wat makkelijker scanbaar maken.
De pagina Kom in Actie zit heel slim in elkaar. Het wordt de websitebezoeker heel gemakkelijk om te helpen. Zo is er een overzicht te zien met de verschillende manieren waarop GroenLinks geholpen kan worden. De meest gekozen functie is hierbij uitgelicht.
De website van GroenLinks werkt erg goed op smartphones. De meeste blokken worden onder elkaar geplaatst en worden schermbreed gemaakt, andere blokken (zoals die van de webwinkel) krijgen een breedte van 75% wat er een beetje ongemakkelijk uitziet, vooral omdat de afbeelding erboven wel gewoon de hele schermbreedte inneemt. Door de nieuwsberichten kan geswiped worden, wat vooral op mobiele apparaten erg makkelijk werkt. Ook de navigatie werkt prettig op mobiele apparaten. Handig is dat de zoekbalk, die onderaan de navigatie is geplaatst, altijd zichtbaar blijft.
De website van GroenLinks ziet er helder uit, maar is niet heel bijzonder. De vormgeving had wel wat urgenter en activistischer gemogen. De navigatie is eenvoudig en doeltreffend en ook de belangrijkste acties zijn doordacht vormgegeven.
De SP heeft een speciale landingspagina voor de verkiezingen gemaakt. Hierop wordt zelfs afgeteld naar de komende verkiezingen. Hiermee wordt het urgentiegevoel goed aangesproken. De vette letters en de knalrode huisstijlkleur dragen hieraan bij.
Net als op de website van GroenLinks, maakt de SP gebruik van cards. In deze blokken is een afbeelding naast een blok met witte achtergrond en zwarte tekst geplaatst. Op de website van de SP zijn deze blokken van wat extra vormgeving voorzien. De bekende tomaat uit het logo komt hier namelijk terug in de lijstjes met de belangrijkste punten per thema. Deze lijstjes zijn in het midden gecentreerd, wat er rommelig uitziet.
De navigatie van de website van de SP is eenvoudig: er staan slechts vijf links in: geen submenu's en geen knoppen. De meeste links verwijzen echter wel naar de homepage van de SP en leiden de websitebezoeker dus weg van deze landingspagina. Dit kan verwarrend werken, vooral omdat de eerste link (Kandidaten) in deze menu's naar twee verschillende pagina's leiden.
Het verkiezingsprogramma is in 11 hoofdstukken verdeeld, voorafgegaan door een voorwoord. De standpunten zijn voorzien van 10 redenen om op de Socialistische Partij te stemmen, wat helpt bij het scannen van de tekst. Jammer dat deze redenen ook niet bij het voorwoord zijn geplaatst.
De website van de SP is responsive en de navigatie werkt prima op smartphones. De tekst die over de foto heen is geplaatst blijft goed leesbaar, dankzij de schaduw achter de witte tekst. De foto's die worden gebruikt in de cards waarin de thema's zijn geplaatst vallen weg op mobiel, maar hierdoor is de tekst wel goed leesbaar. In de kaarten van de verschillende kandidaten valt juist de lange omschrijving weg. Slimme keuzes om zo een goede ervaring te bieden aan smartphonegebruikers.
De website van de SP is onmiskenbaar van de socialisten. De kleur rood en de bekende tomaat die over de gehele website terugkomt doet veel goed voor de branding. Verder is de website makkelijk te navigeren en zijn de teksten goed te lezen. Wel kan de landingspagina verwarrend werken doordat deze niet duidelijk apart staat van de rest van de website van de SP.
Ook op de website van het de PvdA is de lijsttrekker prominent aanwezig. In dit geval zien we een schermvullende portretfoto van Lilianne Ploumen. Er is zoveel ruimte gereserveerd voor deze foto dat de tekst, die half over de foto is geplaatst, bijna wegvalt. De knoppen hieronder, die linken naar een video van een huiskamergesprek, de acties van de PvdA en de pagina om lid te worden, vallen hierdoor onder de fold.
Onder de header is een balk te zien met knoppen waarmee direct naar vaak bezochte pagina's is te navigeren. Dit is een handige functionaliteit voor websitebezoekers die weten waar ze naar op zoek zijn. Het hoofdmenu van het PvdA bestaat uit slechts vier items, waarvan één knop om lid te worden. Deze valt goed op door de rode achtergrond.
De website gebruikt veel wit, rood en lichtgrijs. Ook hier zien we weer cards met een witte achtergrond. Deze vallen goed op op de grijze achtergrond. In deze cards zien we veel kleurrijke foto's die wat kleur toevoegen aan de website.
Iets lager op de website zijn 9 belangrijke thema's te zien. Deze thema's vallen op doordat ze genummerd zijn met grote, rode cijfers. Op de pagina Verkiezingsprogramma worden ook nog eens de hoogtepunten uitgelicht. Dit is een handige samenvatting van de belangrijkste punten.
De website van het PvdA werkt goed op smartphones. Het valt op dat het menu al snel verdwijnt achter een knopje, terwijl er nog meer dan genoeg ruimte is voor het menu. Hierdoor is op tablets een grote witte balk te zien, terwijl het mobiele menu wat vervolgens verschijnt meer dan de helft van het scherm in beslag neemt. Op smartphones is er trouwens meer te zien van de homepage dan op grotere schermen: de foto neemt hier nog maar een kwart van het scherm in beslag. Er zit op smartphones wel heel weinig witruimte tussen de elementen en de rode cijfers die over de thema's gelegd zijn lijken nu wel heel groot. De website lijkt hierdoor een beetje uit balans geraakt.
Met de website van de PvdA is niet heel veel mis. De navigatie is overzichtelijk en de tekst prima te lezen. Het ontwerp is daarentegen eenvoudig en spreekt niet echt tot de verbeelding. Ook op mobiel laat de website een paar kleine steken vallen.
Ook hier een foto van de belangrijkste kandidaten. De foto is echter niet schermbreed waardoor er een grijze ruimte aan beide zijden ontstaat. Een voordeel hiervan is dat de meest gezochte standpunten nog net zichtbaar zijn.
De navigatie van de ChristenUnie bestaat uit zes menu items, en een knop om lid te worden. Deze laatste knop valt goed op door het blauwe kleurverloop. Dit kleurverloop komt hier en daar terug, in bijvoorbeeld titels en de footer. Bij deze tinten blauw wordt veel wit en grijs gebruikt. Het grijs en de kleurverlopen doen de website gedateerd ogen.
Het hoofdmenu is verder logisch ingedeeld, maar 'Gift geven' had wellicht beter naast de andere call-to-action geplaatst kunnen worden.
Van het verkiezingsprogramma is een video gemaakt van 2 minuten waarin een poging gedaan wordt het programma samen te vatten. Hieronder staan 20 belangrijke punten in tekst uitgelegd, met hier en daar een schermbrede afbeelding tussendoor. Deze lijst van punten ziet er niet heel spannend uit, maar is prima leesbaar. Hieronder zijn portretinterviews te zien die het geheel een persoonlijke touch geven.
Het verkiezingsprogramma is bij het schrijven van dit artikel nog een conceptversie, over de definitieve versie is op 30 januari over gestemd, maar de website is nog niet bijgewerkt. Dit geeft de website een wat gedateerde indruk.
De website van de ChristenUnie is responsive en werkt zo ook op smartphones. Waar het hoofdmenu op laptops en computers makkelijk te gebruiken was, is deze net iets minder op smartphones. Door de lichtblauwe achtergrond zijn de witte icoontjes niet duidelijk. Ook is het op het eerste gezicht niet duidelijk wat deze icoontjes betekenen. Verder is de tekst op de website ook op smartphones prima te lezen en zijn de foto's haarscherp.
De website van de ChristenUnie ziet er enigszins gedateerd uit. Dit komt in de eerste plaats door het kleurgebruik en de kleurverlopen. Verder werkt de website prima. Het is jammer dat het verkiezingsprogramma niet up-to-date is gemaakt. De portretinterviews geven het verkiezingsprogramma een persoonlijk gezicht, maar het is jammer dat de gezichten vaak afgesneden worden door de menubalk bovenaan.
De website van de Partij van de Dieren komt druk over. Over de website heen verschijnen verschillende schermen en pop-ups, waarvan een chat en een cookiemelding. Centraal staat een video genaamd Plan B, wat ook de titel is van het verkiezingsprogramma. De video kan direct gedeeld worden, en er staat ook een call-to-action die bezoekers moet verleiden om lid te worden van de partij. Onder de video staan drie blokken naast elkaar die linken naar het verkiezingsprogramma, de kandidaten en nogmaals de vraag om lid te worden.
Onder deze splash page is de echte website te zien. Deze gebruikt vooral veel wit, in combinatie met zwarte tekst en hier en daar donkergroen. Het logo, de vlinder, komt regelmatig terug en zorgt zo voor herkenning.
De navigatie bestaat uit zes items, waarvan één link naar de webwinkel. Ook is er nog een call-to-action in de header geplaatst die opvalt door de oranje achtergrond. Het eerste menu item (Onze idealen) heeft maar liefst 10 subitems.
De lijsttrekker (Esther Ouwehand) is erg zichtbaar op de website. Op de homepage tellen we maar liefst 5 keer een foto van haar. Ook de andere kandidaten zijn goed zichtbaar, met grote portretfoto's. Het is jammer dat deze foto's niet in één stijl zijn gemaakt, zoals op de website van het CDA.
De tekst op de website is prima te lezen, al is de lettergrootte aan de krappe kant (14 pixels). Waar tekst over foto's is geplaatst is deze altijd voorzien van een contrasterende achtergrondkleur. Dit bevordert de leesbaarheid.
Navigatie op smartphones is niet duidelijk doordat alle 10 subitems zichtbaar zijn. De rest van de menu items zijn hierdoor niet zichtbaar. De tekst is net te klein om gemakkelijk te lezen.
De website van de PvdD zit prima in elkaar. De vormgeving is herkenbaar en draagt bij aan de branding. Wel is de homepage, en dan met name de sectie over de aankomende verkiezingen, niet erg duidelijk vormgegeven en ziet deze er druk uit. De navigatie is prima, en ook zijn de teksten goed leesbaar, al is de tekst soms de kleine kant.
De huisstijlkleur van 50PLUS is paars, zoveel is wel duidelijk bij het openen van de website. De website maakt veel gebruik van de kleur, in combinatie met wit, licht- en donkergrijs en zwart. Verder is de website in rechthoeken verdeeld. Deze zijn soms net te klein voor de inhoud, waardoor de website een gedrongen uiterlijk heeft. De website had ruimtelijker opgezet kunnen worden door scherm breed te maken. Nu is er aan beide kanten de witte achtergrond te zien.
De navigatie bestaat uit zeven items, waarvan twee (Partij en Word lid) een submenu hebben. Deze submenu's komen tevoorschijn bij een mouse over. Het valt op dat standpunten of het verkiezingsprogramma niet in het hoofdmenu te vinden zijn. Gelukkig is het verkiezingsprogramma wel in de slider op de homepage te vinden.
Het verkiezingsprogramma is op één enkele pagina geplaatst en onderverdeeld in thema's. Deze thema's kunnen open- of dichtgeklapt worden. De thema's zijn elk van een afbeelding voorzien die enigszins het gevoel van clipart oproept. Jammer, want dit doet afbreuk aan de inhoud van het programma. De tekst hiervan is prima te lezen, maar zit veel te dicht op de rand, en heeft bijna geen ademruimte. Ook is het verkiezingsprogramma amper van opmaak voorzien. Hierdoor is het niet gemakkelijk om deze te scannen.
De mensen van de partij worden naast elkaar getoond, met grote portretfoto's. Dit is fijn, maar de lijst lijkt niet te zijn uitgelijnd. Ook is het niet duidelijk wie de leider of lijsttrekker is van de partij. Het lijkt erop of deze pagina niet bijgewerkt is.
De website is responsive en werkt op sommige vlakken zelfs beter op smartphones. Sommige blokken, die op grotere schermen te klein zijn, worden op mobiele apparaten schermbreed weergegeven. De tekstgrootte die op grotere schermen goed leesbaar is, is op mobiele apparaten iets teveel van het goede. Sommige titels worden hierdoor afgekapt op kleinere beeldschermen.
De vormgeving van 50PLUS ziet er gedrongen en gedateerd uit. Het kleurgebruik valt wel op. Verder zijn de standpunten moeilijk te vinden en lijkt de website niet recent bijgewerkt. De tekst is goed leesbaar, maar is amper van opmaak voorzien om het scannen makkelijk te maken. Hierdoor scoort de website van 50PLUS onvoldoende.
In dit artikel bekeken we de websites van de 10 grootste politieke partijen. Wat zijn nu de belangrijkste lessen die we hebben geleerd? En wat zou we zelf anders doen? Hieronder de belangrijkste punten:
Het is van belang dat je websitebezoekers gemakkelijk door je site kunnen navigeren en snel kunnen vinden waar ze naar op zoek zijn. Zorg hiervoor voor een duidelijke navigatie, met zo rond de 5 á 7 menu-items.
Wil je leden werven of donaties ontvangen? Zorg voor een duidelijke call-to-action en zorg dat deze opvalt tussen de andere menu items.
Een website is de uitgelezen kans om je branding te communiceren. Denk hierbij aan visuele uitingen zoals je logo en het kleurgebruik, maar denk ook aan de schrijfstijl en het gebruik van afbeeldingen, video's en andere media.
Overtuig zwevende kiezers door je verkiezingsprogramma en je politieke standpunten duidelijk te maken. Zorg voor een aantrekkelijke opmaak en denk ook aan scanners: niet iedereen wilt lappen tekst lezen.
