digital design digital development umbraco

Horizon College

Een ambitieus ROC dat MBO-onderwijs verzorgt op vier locaties in Noord-Holland met 13.000+ studenten en 1.200+ medewerkers

  • Compleet nieuwe website met toegangelijke stijl
  • Gericht op generatie Z en dus volledig responsive
  • Supersnelle frontend op basis van Vue.js
  • Magazine look & feel

Van digitale strategie tot eindproduct

Voor Horizon College hebben we een digitale strategie ontwikkeld die gefocust is op het werven van aankomende studenten. Daarbij is informatievoorziening op een aantrekkelijke wijze voor scholieren en hun ouders key.

Design sprint
Om een website te ontwikkelen die naadloos aansluit op de behoeften van deze gebruikers, zijn we begonnen met de digitale strategie. Deze strategie ontwikkelden we samen met Horizon College door middel van een design sprint. Deze start met een workshop waarin we persona's en hun customer journey in kaart brengen. Voor Horizon College betekende dit het samenstellen van drie student journeys voor verschillende typen aankomend student waarin we belangrijke touchpoints en conversiepunten in kaart brengen. Dit vormt de basis voor de digitale strategie. Daarna hebben we tijdens een creatieve brainstorm gewerkt aan de nieuwe huisstijl en het design van de website. De design sprint eindigt met een design en prototype voor het online platform.

Magazine look&feel
De doelgroep van Horizon is breed samen te vatten als 'Generatie Z'. Een belangrijk kenmerk voor Generatie Z is dat on- & offline veel meer in elkaar verweven is ten opzichte van andere generaties. Focus in het design ligt daarom op (bewegend) beeld en niet op tekst. Voor alle typen tekstuele content, hebben we gekeken naar alternatieven die meer tot de verbeelding van de doelgroep spreken. Zo hebben we opleidingskenmerken doorvertaald naar infographics en integreren we social media om te informeren over de verschillende locaties. Om lekker door de site te kunnen 'swipen' is gekozen voor een magazine look&feel met grote afbeeldingen, afgewisseld met korte teksten.

Website optimalisatie

Een groot risico bij een website met veel afbeeldingen is een langzame website. We hebben daarom op drie punten geoptimaliseerd om dit risico uit te sluiten. We hebben extra aandacht besteed aan: afbeeldingsgrootte, afbeeldingstype en het moment waarop de afbeeldingen ingeladen worden.

Optimaliseren van afmetingen
We hebben ervoor gezorgd dat alle afbeeldingen die worden ingeladen in het Umbraco CMS de juiste bestandsgrootte hebben zodat het volume per bezochte pagina minimaal blijft. Daarnaast hebben we de afbeeldingstypes onder de loop genomen. Sinds kort heeft Google een nieuw type ontwikkeld; genaamd WebP. Dit type is tot wel 25% kleiner dan de gebruikelijke types zoals JPEG en PNG. Alle foto's de worden geupload worden automatisch omgezet, verkleind en klaargezet in verschillende formaten. Het systeem bepaald per devices vervolgens welk formaat wordt uitgeserveerd.

Timing
Normaal gesproken laden alle afbeeldingen in als een pagina geladen wordt, zelfs de afbeeldingen die de gebruiker nog niet ziet. Door de timing aan te passen worden de afbeeldingen pas ingeladen, net voordat de gebruiker deze te zien krijgt. Dit zorgt ervoor dat de pagina geleidelijk laadt en deze sneller weergegeven kan worden en wordt 'lazy loading' genoemd.

Jouw project direct starten?

Neem contact met ons op:
info@w3s.nl | 010 2700333

Start jouw project
Cookies?

We gebruiken cookies om het functioneren van onze website te verbeteren. De gegevens worden volledig anoniem verzameld.