Wordpress website voor SKC Studentenvolleybal
No-code development, CMD minor, 2025
Tijdens mijn CMD minor Visual Design & Frontend Development heb ik zelf leerdoelen gekozen. Eén daarvan is het herontwerp van SKC uitwerken in een no-code WordPress website met een passend thema en plugin. Dit leerdoel heb ik gekozen omdat we bij de studie vaak stoppen na het ontwerpen en testen, en het eindproduct zelden echt live zetten. Juist dat laatste vind ik erg interessant, maar coderen wat minder, dus ik wilde graag oefenen met no-code development. Doordat het eerder gemaakt ontwerp niet één-op-één over te nemen was, heb ik geleerd hoe ik slim moet schakelen tussen ontwerp en techniek. Die ervaring wil ik meenemen om in de toekomst ontwerpen te maken die niet alleen mooi zijn, maar ook echt goed werken.
Bekijk de Wordpress website op www.skcvolleybal.nl
Hoe ben ik te werk gegaan?
Ik ben begonnen met het herontwerp dat ik eerder voor een ander vak had gemaakt en heb dit opnieuw bekeken in combinatie met de sitemap en extra feedback van de opdrachtgever. Op basis daarvan kreeg ik een duidelijker beeld van hoe ik het ontwerp wilde realiseren in WordPress.
Tijdens dit proces heb ik veel geleerd over de mogelijkheden binnen WordPress en de rol van verschillende thema’s en plugins. Ook heb ik ontdekt hoe waardevol het is om een testversie van je website te hebben, waarin je alles eerst veilig kunt uitproberen.
Thema kiezen
Ik zocht een thema dat aansloot bij mijn herontwerp én bij de uitstraling van de vereniging. Belangrijk daarbij was een duidelijke navigatie met logo en koppen, en een homepagina-header met drie blokken naast elkaar en een achtergrond erachter. In WordPress kwam ik echter veel thema’s tegen die werkten met achtergrond-afbeeldingen en blokken in plaats van losse foto’s in de blokken. Dat bleek niet alleen beter leesbaar, maar ook direct een waardevolle les voor toekomstige ontwerpen.
.png)
Het herontwerp
Verschillende Wordpress thema's
Naast een passende lay-out wilde ik ook voldoende mogelijkheden zonder meteen een pro-versie te hoeven aanschaffen. Na het testen van verschillende opties viel mijn keuze uiteindelijk op het thema Mistify, dat werkt met de Kubio page builder.
Bouwen van de homepagina
Nadat ik het thema had gekozen, begon ik met de Kubio page builder. Ik richtte eerst de navigatie in met koppen uit de sitemap, een duidelijke verbetering ten opzichte van de oude site.
Daarna bouwde ik de homepagina sectie voor sectie op en experimenteerde met verschillende componenten. Voor de nieuwspagina gebruikte ik WordPress componenten die automatisch berichten tonen, zodat het bestuur dit zelf kan bijhouden.
Secties met verschillende achtergronden en knoppen waren makkelijk te maken. De grootste uitdaging was de fotopagina, die ik handmatig heb opgebouwd. Deze blokken zijn echter makkelijk te dupliceren en met een korte handleiding overdraagbaar.
Tot slot voegde ik een sponsoren sectie en een uitgebreide footer toe, waarmee de homepagina compleet was.
Lid worden bij SKC?
Voor nieuwe leden had SKC vier losse pagina’s met informatie over de vereniging en het lidmaatschap. Deze waren onoverzichtelijk en versnipperd. Maar deze informatie is wel belangrijk om nieuwe leden aan te trekken. Daarom heb ik dit in mijn herontwerp samengevoegd tot één duidelijke pagina: “Lid worden?”. Deze had ik inhoudelijk al uitgewerkt, maar nog niet visueel. In WordPress ben ik aan de slag gegaan met de opmaak en heb ik verschillende indelingen uitgeprobeerd. Het was soms lastig om secties te vinden die én bij het ontwerp passen én aantrekkelijk zijn voor geïnteresseerde leden.
Herontwerp versie
Wordpress versie
Mobiele versie
Een grote les voor mij was echter de mobiele versie van de website. Gelukkig deed WordPress dit grotendeels zelf al goed, wat erg fijn was. Wel moest ik goed letten op de navigatie, omdat dit op mobiel een andere versie had. Op de homepagina waren er nog wat handmatige blokken die rechtgezet moesten worden, maar verder was het soepel. Elke aanpassing, zoals marges, werd automatisch overal op de pagina toegepast, wat erg handig was.
Engelse versie
Bij SKC hebben we ook internationals, dus het was belangrijk om een Engelse versie van de website beschikbaar te stellen. Tot nu toe koppelden we handmatig voor elke pagina een Engelse versie, maar dit was moeilijk bij te houden bij wijzigingen of toevoegingen.
Voor dit project heb ik geprobeerd om een Engelse versie in WordPress te maken. De pagina’s konden wel gekoppeld worden, maar ik kon maar één navigatie kiezen. Na feedback van docenten ben ik gaan kijken naar de vertaalfunctie in browsers. Zowel Google Chrome als Safari bieden een goede vertaalfunctie.
Na input van internationals besloot ik de Engelse kopieën op de website te vervangen door een uitlegpagina die laat zien hoe je de website kunt laten vertalen via de browser, voor het geval ze het nog niet wisten.
Eindresultaat
Een nieuwe website maken voor SKC was stiekem al een droom die ik sinds het begin van mijn studie CMD had. Het voelt geweldig om dit nu eindelijk te hebben gerealiseerd. Het proces verliep niet altijd vlekkeloos, aangezien ik een nieuwe tool moest leren, maar het was fijn om me te kunnen focussen op de tool, omdat ik de vereniging en de opdracht goed kende. Dit project heeft me ook bevestigd dat ik no-code development echt gaaf vind, vooral het moment waarop je ontwerp tot leven komt.