De mens is nu eenmaal een visueel wezen. Binnen enkele seconden vormen we een oordeel over een website, vaak nog voordat we de inhoud hebben gelezen. Een professioneel en aantrekkelijk design straalt ook af op hoe potentiële kandidaten jouw organisatie zien. Daarom neem ik je in deze blog mee door de belangrijkste design-aspecten die je OutSite werkenbij-website naar een hoger niveau tillen.
Huisstijl en kleuren bepalen
Je huisstijlkleuren vormen de basis van je design. Maar wat als je klant geen huisstijlhandboek heeft? Geen zorgen! Met een handige Google Chrome extensie genaamd ColorZilla kun je kleuren pikken van de corporate website. Zo ontdek je snel welke kleuren er worden gebruikt en kun je die consistent toepassen in je OutSite thema.
Een tip: begin in de thema-editor met het definiëren van de basiskleuren. Kijk niet meteen naar waar ze worden toegepast, maar start met het vastleggen van de kleuren zelf. Kies voor maximaal drie basiskleuren (naast zwart en wit) om een rustig en professioneel beeld te creëren. Voor een dynamische gebruikerservaring kun je wel werken met afgeleide tinten van deze basiskleuren, bijvoorbeeld voor hover-effecten op knoppen.
De kracht van contrasterende kleuren voor call-to-actions
Wil je dat je ‘Solliciteer nu’-knop opvalt? Gebruik dan een contrasterende kleur. Als je huisstijl voornamelijk blauw is, kies dan voor een oranje of gele knop voor je belangrijke call-to-actions. Die springt er direct uit wanneer iemand je pagina scant.
Het kleurenwiel is hierbij je beste vriend. Kleuren die tegenover elkaar liggen (complementaire kleuren) creëren het sterkste contrast. Denk aan blauw-oranje, paars-geel of rood-groen. Door deze kennis toe te passen, leid je de aandacht van de bezoeker precies naar waar je wilt dat ze actie ondernemen.
Effectief gebruik van witruimte
Een veelgemaakte fout is het volproppen van een pagina met content. Meer is niet altijd beter! Witruimte (of negatieve ruimte) rondom elementen maakt je design rustiger en je content beter scanbaar. Vergelijk het met een drukke kamer versus een opgeruimde kamer – in welke vind jij sneller wat je zoekt?
Op OutSite kun je spelen met marges om meer ruimte te creëren. Een marge van 100 pixels boven en onder tekstblokken geeft je pagina lucht. Let wel op: marges worden op mobiel vaak niet overgenomen. Een slimme truc is om een transparant PNG-plaatje van 100 pixels hoog te gebruiken dat alleen op mobiel wordt geactiveerd, zodat je ook daar die fijne ruimte behoudt.
Typografie optimaliseren
Voor OutSite is het aan te raden om lettergroottes tussen de 15 en 20 pixels te gebruiken voor de hoofdtekst. Dit is groter dan wat je voor Insight zou gebruiken (11-15 pixels), omdat een werkenbij-website anders wordt gebruikt: je wilt informeren en aanzetten tot actie.
Minstens zo belangrijk als de grootte is de regelafstand. Gebruik minimaal anderhalf keer de lettergrootte als regelafstand. Dus bij een lettergrootte van 16 pixels, stel je de regelafstand in op minimaal 24 pixels, maar liever 30. Dit maakt teksten veel beter leesbaar en scanbaar. Voor titels kun je zelfs nog meer ruimte nemen – een regelafstand van 75 pixels bij een lettergrootte van 18 pixels geeft automatisch ook een mooie afstand tussen de titel en de tekst eronder.
Scannend lezen faciliteren
We lezen online niet, we scannen. Maak het bezoekers daarom makkelijk door je content scanbaar aan te bieden. Gebruik korte alinea’s, tussenkoppen, opsommingen en voldoende witruimte. Het verschil tussen een lange lap tekst en een goed opgedeelde tekst met bullets en tussenkoppen is enorm.
Een leuke manier om je opsommingen te stylen is door de standaard bullets te vervangen door iconen, zoals vinkjes. Dit doe je in de thema-editor via ‘Eigenschappen van opzommingstekens’. Hiermee geef je niet alleen visuele structuur aan je pagina, maar je kunt er ook subtiel bepaalde emoties mee oproepen. Groene vinkjes suggereren bijvoorbeeld dat iets positief of afgevinkt is.
Afbeeldingen optimaliseren voor snelheid en impact
Slechts weinig dingen zijn zo frustrerend als een traag ladende website. Als je afbeeldingen van een fotograaf krijgt, zijn deze vaak veel te groot (6000+ pixels breed) voor web-gebruik. Crop ze eerst naar een werkbaar formaat (1920 pixels is meer dan genoeg) en gebruik daarna TinyPNG om ze te comprimeren zonder kwaliteitsverlies. Zo kan een afbeelding van 1,3 MB krimpen naar 150 KB, met nauwelijks zichtbaar verschil.
Gebruik afbeeldingen van je eigen medewerkers, niet van stockmodellen. Als kandidaten later op gesprek komen, moet er een feest van herkenning zijn, geen teleurstelling omdat je echte team er heel anders uitziet dan je website suggereerde. Heb je geen toegang tot professionele foto’s? Met de ImageEye Chrome-extensie kun je afbeeldingen eenvoudig downloaden van bestaande websites (bijvoorbeeld de corporate site).
Open Graph-afbeeldingen voor social media impact
Wist je dat je een specifieke afbeelding kunt instellen die wordt getoond wanneer iemand je vacature deelt op social media? Dit doe je door in de eigenschappen van je document (de vacature) een afbeelding toe te voegen – dit heet een Open Graph-afbeelding.
Voor het beste resultaat op LinkedIn gebruik je een afbeelding van 1200 x 627 pixels. Je kunt deze afbeelding vervolgens ook dynamisch gebruiken in je weergaveschabloon, zodat elke vacature in het overzicht zijn eigen relevante plaatje heeft. Zo zorg je voor een consistente uitstraling, van je site tot aan de deelmogelijkheden op social media.
Animaties: subtiele beweging voor extra aandacht
Statische websites zijn prima, maar subtiele animaties kunnen net dat beetje extra aandacht trekken. In OutSite kun je eenvoudige animaties toevoegen aan weergaveschablonen of afbeeldingen. Denk aan een afbeelding die subtiel inschuift of een hover-effect dat een element benadrukt wanneer je er met je muis overheen gaat.
Hierbij geldt: less is more. Te veel animaties maken je site onrustig en afleidend. Gebruik ze strategisch op plekken waar je de aandacht wilt vestigen, zoals bij een call-to-action knop of een belangrijk tekstblok. Het doel is om de gebruikerservaring te verrijken, niet om te overweldigen.
Verschillende versies voor desktop en mobiel
Wat werkt op desktop, werkt niet altijd op mobiel. In OutSite kun je elementen aan- of uitzetten voor mobiele weergave. Dit biedt mogelijkheden, maar creëert ook uitdagingen. Soms moet je content dubbel invoeren: één versie voor desktop en één voor mobiel.
Denk bijvoorbeeld aan afbeeldingen. Een brede banner die er geweldig uitziet op desktop kan onleesbaar worden op mobiel. Maak dan een alternatieve versie specifiek voor mobiel. Ja, dit betekent extra werk en onderhoud, maar de eindgebruiker – je potentiële nieuwe collega – profiteert van een naadloze ervaring, ongeacht het apparaat.
Vooruitblik naar deel 3
Met deze design-tips heb je de bouwstenen in handen om je OutSite werkenbij-website visueel naar een hoger niveau te tillen. We hebben gekeken naar kleuren, witruimte, typografie, afbeeldingen en animaties – allemaal elementen die bijdragen aan een professionele en aantrekkelijke uitstraling.
In het derde en laatste deel van deze serie gaan we nog een stap verder met geavanceerde technieken. We duiken in het schrijven van krachtige copy met het AIDA-model, geavanceerde mobiele optimalisatie en zelfs het gebruik van Google Tag Manager om je OutSite website echt uniek te maken. Want met de juiste kennis kan OutSite veel meer dan je misschien denkt!
