Home Blog Bewezen webdesign tips voor betere conversie
Let’s collab
Bewezen webdesign tips voor betere conversie
  • 23 jan 15:28
  • 4 min.
  • Design
akad demirdag
Akad Demirdag

Bewezen webdesign tips voor betere conversie

In de online marketing heb je ieder jaar weer nieuwe ontwikkelingen en trends; ze inspireren je en zetten je aan het denken. Tegelijkertijd komen bepaalde elementen eigenlijk altijd terug, vooral op het gebied van webdesign. In deze blog sta ik stil bij een aantal voorbeelden en tips die je helpen met goed webdesign.

De volgende onderwerpen behandel ik:

  • Bedien het oog: visuele hiërarchie
    • Koppen voor structuur
    • Lettertypes voor leesvolgorde
    • Slim gebruik van witruimtes
    • Designen op basis van grid
  • Zo scannen bezoekers je pagina
  • Opvallen? Maak het groter
  • Opvallen? Gebruik felle kleuren
  • Voorkom te veel kleuren
  • Sliders, foto’s en gifs: do’s en don’ts
  • Less is more
  • Toegankelijk: sluit niemand buiten
  • Beperk de bezoekerskeuzes in je design

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:

  1. 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.
  2. 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.

gebruik Koppen voor de structuur

 

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.

grid design maken

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:

  1. een duidelijke foto met een stukje tekst
  2. één krachtige call-to-action om duidelijk te maken waar de focus moet liggen

beperk je keuzes op een website

Nou, hiermee heb je alle belangrijke ingrediënten voor een sterk webdesign. Veel succes!

akad demirdag

Akad Demirdag

Eigenaar

Let’s collab
Offerte aanvragenPlan een gesprek