3 verschillende scholen, 1 platform

ROC A12 is een mbo-opleider in de regio Arnhem, Velp, Ede en Veenendaal en valt onder de Christelijke Onderwijs Groep (COG). 

Op de scholen van ROC A12 worden zo'n 100 mbo-opleidingen gegeven. De reguliere mbo-opleidingen kunnen studenten volgen op Astrum College, Dulon College en Technova College. Onder de paraplu van ROC A12 profileren de locaties zich op eigen wijze, met een eigen naam en een eigen logo. Het doel is het kleinschalige karakter van het onderwijs te benadrukken, de betrokkenheid van studenten bij de school te vergroten en de relatie met de omgeving te versterken.


Finalist kreeg de opdracht om voor ROC A12 en voor de 3 mbo-scholen binnen ROC A12 websites te ontwerpen. Elk met hun eigen unieke identiteit, maar met de wens om binnen het Drupal platform dezelfde lay-out te gebruiken voor efficiency in beheer en redactie. De verschillen tussen de scholen in ontwerp zitten in de kleur- en vormelementen en in de inhoud. De website van ROC A12 heeft een andere opzet gekregen, die van de paraplu voor de 3 scholen websites.

In het ontwerp moet dus rekening worden gehouden met de verschillen in visuele identiteit (zoals de kleur- en vormelementen) en dat de websites mobielvriendelijk en visueel aantrekkelijk zijn, voldoen aan de behoeften van de doelgroepen van de scholen.

Onze aanpak begon met een mobile-first benadering voor het ontwerpen van de websites. Startend bij het identificeren van de kernelementen waaruit de lay-out zou bestaan en vervolgens bouwen van het ontwerp rond die elementen. En dat op zo'n manier dat het ontwerp naadloos werkt op alle apparaten en schermformaten. 

Vervolgens hebben we een Design System opgezet waarmee we eenvoudig wijzigingen in het ontwerp kunnen aanbrengen met behoud van consistentie op alle drie de websites. Deze aanpak stelde ons in staat om tijd en middelen te besparen en zorgde ervoor dat de websites visueel consistent en on-brand zijn.


Om tegemoet te komen aan de verschillen in visuele identiteit, ontwikkelden we een flexibel kleurenpalet en vormbibliotheek die gemakkelijk kon worden aangepast aan de unieke identiteit van elke school. Vanuit een print huisstijl hebben we een online versie voorgesteld en in co-creatie aangescherpt tot het gewenste vertrekpunt. Via toetsen en itereren zijn de verschillende soorten pagina’s ontworpen zodat begonnen kan worden met de realisatie en implementatie.

Onze aanpak voor het ontwerpen van de websites voor de 3 mbo-scholen van ROC A12 binnen het Drupal platform, met ieder een eigen identiteit, omvatte een mobile-first methodologie en het werken volgens design system principes. 

Het resultaat is één oplossing met een flexibel lay-out ontwerp dat rekening houdt met verschillen in content, kleur- en vormelementen zodat deze optimaal aansluit bij de doelgroep van elke school. Onze design system benadering zorgt voor consistentie en bespaarde tijd en middelen. Bovendien is het voor de marketing en communicatie medewerkers eenvoudiger geworden om hun doelen te bereiken.

Zie www.a12.nl, www.technovacollege.nl, www.astrumcollege.nl en www.duloncollege.nl