Platform Havo-P · jurrebuunk.com

Platform Havo-P verbindt scholen, docenten, hbo-instellingen en bedrijven rond praktijkgericht havo-onderwijs. Het platform brengt kennis, scholing, lesmateriaal, regionale netwerken en samenwerking bij elkaar.

Ik werkte aan dit project bij B302 als frontend developer.

Animatie van de landingspagina van Havo-P — De landingspagina introduceert het platform en de belangrijkste onderdelen.

Het project

Havo-P draait om het praktijkgerichter maken van havo-onderwijs. Het platform helpt scholen en docenten bij het vinden van ondersteuning, evenementen, regionale contacten en lesmateriaal. Op de publieke website komt dat samen in pagina’s voor scholing, regionetwerk, samenwerking en leermiddelen.

Voor de klant was het belangrijk dat de website meer deed dan alleen informatie tonen. Ze hadden specifieke WordPress-functionaliteit nodig die aansloot op hoe zij scholing en evenementen organiseren.

Visuele identiteit

Het platform heeft een gedurfde, kleurrijke visuele identiteit. Alles, van het logo tot het kleurenpalet, is ontworpen om energiek en toegankelijk te voelen — passend bij een landelijk onderwijsnetwerk voor docenten en scholen.

Het primaire logo combineert het Havo-P-woordmerk met een P-beeldmerk in de vorm van een gevouwen pagina. Het icoon kan in elke accentkleur van het platform verschijnen.

Kleurenpalet van Havo-P met zes benoemde kleuren en hun betekenis — Elke kleur in het palet heeft een betekenis — indigo voor innovatie, geel voor optimisme, groen voor groei.

Typografie van Havo-P met Poppins Black voor koppen en Poppins voor lopende tekst — Poppins Black wordt gebruikt voor de grote koppen. Het reguliere gewicht wordt op het hele platform voor lopende tekst gebruikt.

Mijn rol

Ik werkte samen met één andere developer, meerdere designers en een projectmanager. Mijn focus lag op frontendontwikkeling en het omzetten van de ontwerpen naar een werkende WordPress-ervaring.

Daarnaast bouwden we een eigen WordPress-plugin voor de specifieke scholingsbehoeften van de klant. Daarin zat onder andere:

een agenda voor scholing en evenementen;
inschrijfflows voor deelnemers;
eigen formulieren voor het platform;
contentbeheer dat past bij hoe het Havo-P-team werkt.

Animatie van de scholingspagina van Havo-P — Het scholingsonderdeel had duidelijke pagina’s nodig, met eigen evenementfunctionaliteit erachter.

Pagina’s en functies

De site heeft een speelse visuele stijl met kleurrijke blokken, sterke typografie en een rasterachtergrond. Het designsysteem vertalen naar WordPress betekende de frontend dicht bij de originele ontwerpen houden, terwijl het Havo-P-team de site zelf goed moest kunnen onderhouden.

Scholingspagina van Havo-P met vier scholingscategorieën — De scholingspagina toont verschillende soorten ondersteuning voor scholen, van verkennen tot inspiratie.

Wat ik heb geleerd

Dit project was een goede mix van frontendwerk en klantspecifieke WordPress-ontwikkeling. Ik heb veel geleerd over werken in een groter team, ontwerpdetails precies overnemen en pluginfunctionaliteit bouwen rond echte behoeften van een organisatie in plaats van generieke WordPress-features.