Allereerst: wat is goed webdesign eigenlijk?
Een goed design is in ieder geval méér dan alleen leuke plaatjes. Het moet ook functioneel zijn en het gebruikers makkelijk maken. Bij de meeste websites ondersteunt het visuele ontwerp het doel: omzet of meer leads halen. Maar … hoe bereik je dat dan? Hiervoor is het belangrijk te begrijpen hoe het menselijke brein werkt en visuele informatie opneemt. Alle belangrijke elementen die hierbij spelen, komen verderop aan bod. Hiermee ga jij doelen halen én maak jij je website aantrekkelijk.
Bedien het oog: visuele hiërarchie
Met hiërarchie bedoel ik dat bezoekers in één oogopslag zien wat de belangrijkste onderdelen op een webpagina zijn. Gebruik je meerdere call to actions? Rangschik deze dan in grootte. Of geef ze een opvallende kleur, zodat iedereen weet dat die het belangrijkste zijn. Wat het belangrijkste is? Dat bepaal jij natuurlijk zelf en hangt ook weer af van je doel.
Enkele andere belangrijke structuur-tools:
A. Koppen
B. Lettertypes
C. Witruimtes
D. Grid
Over deze punten vind je hieronder meer.
Zo scannen bezoekers je pagina
Weet je dat we als mensen een webpagina razendsnel ‘scannen’? Binnen enkele seconden proberen we als bezoekers die al op waarde te schatten. Op basis daarvan beslissen we of we op de pagina blijven. Uit onderzoek blijkt dat we op 2 manieren scannen. Deze manieren hangen af van de lengte van de tekst:
- Bij webpagina met veel tekst (zoals deze blog 😉): in soort F-patroon.
We letten hierbij vooral op trefwoorden, linkjes en onderwerpen.
Die F is letterlijk de vorm waarin onze ogen over de pagina glijden. Dus eerst de bovenste regel (het bovenste streepje van de F), dan omlaag, een eindje verderop een zinnetje of kopje (het 2e streepje in de F) en dan weer omlaag. - Bij pagina’s met minder tekst: in een soort Z-patroon; net zoals we de krant scannen.
Pas je webdesign dus hierop aan. Zet bij lange pagina’s de belangrijkste content linksboven en gebruik koppen die links uitlijnen.
Opvallen? Maak het groter
Als je echt wil dat iets opvalt, maak het dan groter. Een zeer voor de hand liggende manier, toch? Door te spelen met groottes stuur je bezoekers een kant op, van boven naar beneden of van links naar rechts. Gebruik hierbij wel een goed kleurcontrast dat extra valt.
Opvallen? Gebruik felle kleuren
Met felle kleuren trek je nagenoeg altijd de aandacht. Meestal zie je hierbij neonachtige kleuraccenten op een zachte steunkleur, zoals lichtgrijs of gebroken wit.
Koppen voor de structuur
Koppen geven de lezer duidelijkheid over wat er verderop komt. Hierbij zijn vooral de headings H1, H2 en H3 online belangrijk. Stel deze in, zodat ze consistent zijn op je hele website.
Lettertype voor leesvolgorde
Een vaak vergeten, maar belangrijke factor is de keus voor je lettertypes. De combinatie van lettertype, tint, dikte en regelafstand doet meer met je website dan je denkt. Het beïnvloedt namelijk onder meer de volgorde van lezen. Gebruik je onderstreepte of cursieve teksten, dan trek je de aandacht van je bezoeker.
Slim gebruik van witruimtes
De moderne mens verleid je het meest met kleine ‘brokjes’ informatie. Maar … het kan soms heel lastig zijn je boodschap in slechts paar zinnen over te brengen. De oplossing? Maak slim gebruik van witruimtes. Dit zijn ruimtes tussen ontwerpelementen op je website. Ze splitsen je informatie op in die kleinere brokjes en helpen jouw bezoekers zo om je content beter te begrijpen.
Witruimtes brengen hiermee structuur en rust op een pagina. Een bezoeker concentreert zich hierdoor makkelijk op dat wat hij of zij belangrijk vindt. En dat helpt uiteindelijk ook mee aan meer conversie.
Designen op basis van een grid
Een grid, of raster, is een handige manier om structuur en orde aan te brengen op een pagina met veel content. Rasters zijn voor het menselijk brein ook logisch om te begrijpen; dat voelt dus al prettig aan. Een webdesigner gebruikt bijvoorbeeld een raster met meerdere kolommen om bij elkaar horende groepen elementen visueel mooi weer te geven.
Voorkom te veel kleuren
Gebruik hooguit 2 of 3 basiskleuren voor je design. Want het is met gebruik van kleuren net als met drank: als je er te veel van gebruikt, sla je door en verdwijnt het effect.
Aanrader: gebruik een huisstijlgids. Hiermee heb je houvast en zorg je dat al je uitingen consistent blijven.
Sliders, foto’s en gif’s: do’s en dont's
Het lijkt heel aantrekkelijk: sliders op je homepagina gebruiken. Of animerende gif’jes. Toch leidt dit de aandacht van je bezoeker af. Mijn advies daarom? Gebruik stilstaande afbeeldingen. Wees wel kritisch in je keus; afbeeldingen moeten wel relevant zijn en informatie toevoegen aan je content.
Less is more
De 80/20 regel geldt ook voor webdesign. Vaak zie je webpagina’s met veel informatie … waarbij het meest waardevolle eigenlijk in een hoekje wordt gedrukt. Mijn advies: haal alle onnodige informatie weg en focus op wat belangrijk is. Zo maak je je design veel effectiever. Een handige manier om dit te ontdekken? Doe een A/B-test ; hiermee meet je zelf of het werkt.
Toegankelijk: sluit niemand buiten
Natuurlijk wil je je website toegankelijk houden. Wat dan belangrijk is? Dat de teksten leesbaar en de lettertypes duidelijk zijn. Overweeg binnen bepaalde branches een fontvergrotingstool of voorleesfunctie op je website; handig bijvoorbeeld in de zorg. Zo begrijpen ook slechtzienden of slechthorenden de pagina goed. Wat ook helpt? Contrastknopjes.
Beperk de publiekskeuzes in je design
Wij mensen vinden te veel keuzes eigenlijk helemaal niet leuk; dat geeft keuzestress. Ga je een actiepagina maken? Beperk dan het aantal keuzes om meer conversie te behalen. In een goede actiepagina zitten meestal:
- een duidelijke foto met een stukje tekst
- één krachtige call-to-action om duidelijk te maken waar de focus moet liggen
Nou, hiermee heb je alle belangrijke ingrediënten voor een sterk webdesign. Veel succes!
