Terug naar werk

Compacte case

Vardus

Een bestaande huisstijl vertaald naar een schaalbare website voor een breed aanbod aan trainingen, advies en digitale toepassingen.

Mijn rol
Volledig websiteontwerp in Figma, informatie- en paginastructuur, responsive design, visuele uitwerking met SVG-elementen en advies over interacties en animaties tijdens development.
Development
Ontwikkeld door een collega.
Status
De website is live en gebruikt de bestaande huisstijl van Vardus. Het alternatieve merkvoorstel binnen deze case is een concept gebleven.
Periode
2024 – 2025
Disciplines
Webdesign · Informatiearchitectuur · Responsive design · Motion design
Tools
Figma
De Vardus-homepage met de kop over trainingen en veiligheid, binnen de bestaande geel-grijze huisstijl

Van breed aanbod naar één systeem

Voor Vardus lagen het logo, de huisstijl en de inhoudelijke informatie al vast. Mijn opdracht was om die basis te vertalen naar een samenhangende website waarin het brede aanbod duidelijk en herkenbaar kon worden gepresenteerd.

Vardus combineert veiligheidstrainingen, e-learning, advies en digitale toepassingen. In plaats van iedere dienst als een losse pagina te benaderen, zocht ik daarom eerst naar een vaste pagina- en componentstructuur die voor verschillende soorten content hergebruikt kon worden.

Vroege wireframe van de Vardus-landingspagina, waarin de structuur wordt bepaald voordat de visuele uitwerking begint
Eerst bepalen welke informatie waar hoort, daarna pas de visuele uitwerking.

Een herhaalbare structuur

Die aanpak kwam vooral terug bij de trainingen. Het overzicht moest ruimte bieden aan verschillende soorten aanbod, terwijl detailpagina’s volgens dezelfde basisstructuur opgebouwd konden worden. Nieuwe trainingen konden daardoor binnen hetzelfde systeem worden toegevoegd zonder iedere pagina opnieuw te hoeven ontwerpen.

Ook responsive gedrag nam ik mee in die structuur, zodat dezelfde inhoud op verschillende schermformaten logisch bleef werken.

De huisstijl digitaal verder uitwerken

Voor de visuele uitwerking gebruikte ik veel SVG-elementen. Daarmee kon ik illustratieve vormen uit de bestaande stijl flexibel door de interface laten terugkomen en kreeg de website meer karakter zonder afhankelijk te zijn van grote afbeeldingen.

De technische realisatie lag bij een andere developer. Tijdens development bleef ik betrokken bij de vertaling van het ontwerp en gaf ik advies over interacties en animaties, zodat beweging en gedrag aansloten op de oorspronkelijke ontwerpintentie.

Een voorstel buiten de opdracht

Tijdens het ontwerpen zag ik ook mogelijkheden om de visuele identiteit verder te ontwikkelen. Het bestaande beeldmerk verloor op kleinere formaten wat herkenbaarheid en de geel-grijze kleurcombinatie sloot sterk aan bij wat vaker binnen de veiligheidsbranche wordt gebruikt.

Een nieuwe identiteit ontwerpen hoorde niet bij mijn opdracht, maar ik wilde onderzoeken hoe Vardus er met een onderscheidendere richting uit zou kunnen zien. Daarom maakte ik een aantal varianten van een woordmerk waarin de V zelf het beeldmerk vormt.

Het bestaande Vardus-logo naast vijf varianten van een alternatief woordmerk waarin de V het beeldmerk vormt
Links het bestaande logo, daarnaast de richtingen die ik uit eigen initiatief onderzocht.

Niet alleen een logo laten zien

Een los logo zegt nog weinig over hoe een merk in de praktijk voelt. Daarom werkte ik één richting verder uit tot een volledige homepage met diepblauw en teal als basis.

De inhoud en dienstverlening bleven hetzelfde. Alleen de visuele wereld veranderde. Daardoor werd veel duidelijker wat zo’n andere richting voor het complete merk zou betekenen.

Voorstel voor een alternatieve Vardus-homepage in diepblauw en teal, met een banner over verkeersregeling, dienstenkaarten en het nieuwe woordmerk
Hetzelfde aanbod in een andere visuele richting. Dit bleef een concept; de live website gebruikt de bestaande huisstijl.

Het voorstel is uiteindelijk niet doorgevoerd, maar het proces leverde voor mij wel een waardevolle les op. Alleen zeggen dat iets anders zou kunnen blijft abstract. Zodra je een alternatief daadwerkelijk ontwerpt en in context laat zien, ontstaat er iets concreets waar mensen op kunnen reageren.

Een idee dat alleen wordt uitgelegd blijft abstract. Zodra je het zichtbaar maakt, kan er een echt gesprek over ontstaan.