WPLounge
webdesign
Home » WordPress Algemeen » 10 veelgemaakte fouten in webdesign

10 veelgemaakte fouten in webdesign

Over smaak valt niet te twisten… over webdesign fouten die ervoor zorgen dat bezoekers je site sneller verlaten wel! In dit artikel doorloop ik tien veelgemaakte fouten bij het vormgeven van een WordPress website. 

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

Designfout 1: Slecht contrast in de headerfoto

Je headerfoto is het eerste beeld wat de bezoekers van je website krijgen te zien. 

Zorg er daarom ook voor dat het een mooie afbeelding is. En sterker nog, indien je er tekst bij hebt staan: zorg ervoor dat die tekst goed leesbaar is! De tekst (of button) die je in je headerfoto zet is waarschijnlijk je grootste call-to-action.

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!

Bekijk de themes »»
Lees meer over Divi.

Tekst op een foto is geen enkel probleem, maar houd je dan wel aan wat basisregels.

Als de tekstkleur wit is, zorg dan voor een donkere achtergrondkleur of afbeelding. En andersom natuurlijk, met een zwarte tekst, zorg dan voor een lichte achtergrondkleur of afbeelding. 

Headerfoto webdesign contrastfout
headerfoto webdesign

Als je een achtergrondafbeelding gebruikt, kijk dan ook goed of het gedeelte van de afbeelding waar je je tekst hebt geplaatst niet te druk is. Een afbeelding waarin teveel gebeurt leidt namelijk ook af van je call-to-action.

Headerfoto webdesignfout

Designfout 2: Een te grote headerfoto

Om weer even terug te komen op die headerfoto: te grote headerfoto’s kunnen ook een misser zijn. Waarom? Omdat je vaak prima de helft van de foto kan weglaten. Het is namelijk enkel sfeerbeeld.

Te grote headerfoto

Met een te grote headerfoto druk je belangrijke tekst dat op je homepage staat naar beneden.

De ideale hoogte voor een header is meestal rond de 500 pixels hoog. Soms iets meer omdat de foto daarom vraagt, maar liever nog minder als het kan.

Dit zorgt ervoor dat niet je gehele scherm gevuld wordt met je headerafbeelding. 

Designfout 3: Sliders

Slider waren (en zijn eigenlijk nog steeds) erg populair. Ja, ze zien er vaak mooi uit. Nee, ze zijn meestal niet goed om te gebruiken op je website.

Beter één sterk beeld dat direct duidelijk maakt waar de betreffende pagina over gaat dan diverse foto’s in een slider. 

Waarom je geen sliders moet gebruiken? Omdat niemand de tijd neemt om je slides te bekijken.

Uit onderzoek blijkt dat 90% van de bezoekers klikt op de eerst slide, dus vraag jezelf af waarom je de moeite zou nemen om de rest van de slides te maken. 

De enige manier waarop ik sliders zou gebruiken op je website is bijvoorbeeld op een productpagina, waarin je meerdere foto’s laat zien van het product. Of je bent een fotograaf en laat erg graag je werk zien in een slider. Maar gebruik sliders niet op je homepage, en stop er ook geen call-to-actions in! 

Bezoekers kijken niet verder dan de eerste slide, dus je kan beter gewoon een statische header hebben, met daarin je meest belangrijke call-to-action.

Designfout 4: Te veel of te weinig witruimte

Witruimte is ontzettend belangrijk in je website ontwerp. Het geeft rust en overzicht aan je gebruikers. Sommige sites maken de fout om te veel witruimte te gebruiken. Dan moeten bezoekers onnodig lang scrollen om bij je content te komen. 

Teveel witruimte

Aan de andere kant kun je beter niet te weinig witruimte gebruiken: dan lijkt alles op elkaar gedrukt te staan, wat weer rommelig en onoverzichtelijk overkomt. 

Te weinig witruimte

Bij veel pagebuilders kun je de witruimte van elementen op je site instellen door aan de zogenaamde ‘padding’ en ‘margin’ te sleutelen. 

Designfout 5: Niet passend kleurgebruik

Naast witruimte biedt een juiste combinatie van kleuren ook een fijne ervaring voor de bezoeker.

De meeste WordPress thema’s maken vaak gebruik van een primaire en een secundaire kleur. Maar je kan natuurlijk ook zelf kleuren samenstellen die goed bij elkaar passen. 

Een handige gratis tool hiervoor is coolors.co. Met deze gratis online tool kun je bij elkaar passende kleuren genereren.

Als je de tool start krijg je 5 bij elkaar passende kleuren te zien. Door op de spatiebalk te klikken genereert de tool 5 nieuwe kleuren. 

Als er een kleur tussen zit die je mooi vindt kun je deze op slot zetten. Als je dan weer op de spatiebalk drukt krijg je vier kleuren die goed bij je ‘vastgezette’ kleur passen. 

Zo kun je je eigen primaire en secundaire kleuren genereren en de HEX codes hiervan opslaan. Deze opgeslagen kleuren kun je dan toevoegen aan je eigen WordPress website.

Designfout 6: Een onoverzichtelijk navigatiemenu

Breng structuur aan in je navigatiemenu door deze in te stellen in een logische volgorde. Belangrijke items eerst, minder belangrijke later. Je kan minder belangrijke items ook in een dropdownmenu plaatsen. 

Zo zijn de algemene voorwaarden en disclaimer pagina’s minder belangrijk dan je belangrijkste call-to-action. Daarom moeten ze dus eigenlijk niet op hetzelfde niveau staan in je menu. Dit soort pagina’s kun je dan beter in de footer van je website plaatsen.

Indien je een blogwebsite beheerd kun je je blogs indelen in categorieën. Deze categorieën kun je in een dropdownmenu plaatsen onder het hoofditem ‘Blog’ of ‘Nieuws’. Zo creëer je ook meer hiërarchie in je navigatiemenu.

Daarnaast kun je je belangrijkste menu item ook een opvallende kleur geven, of er een button van maken, om deze meer op te laten vallen.

Houd je navigatiemenu dus opgeruimd! Streef naar maximaal vijf of zes menu items.

Wees eerlijk met jezelf: je bent geen Nike of Coca Cola. Jouw logo is niet algemeen bekend bij je bezoekers.

webdesignfout te groot logo

Je logo is slechts een onderdeel van jouw website en je branding, net zoals andere onderdelen van je site. De gebruiker moet weten welk merk er achter de website staat: maar de diensten, producten en content die jij op je website hebt staan is veel belangrijker!

Welke grootte moet je logo dan zijn? Probeer de standaard aan te houden die je krijgt tijdens het uploaden van je logo naar je WordPress website. 

Designfout 8: Een logo van lage kwaliteit

Als je je eigen logo hebt gemaakt, of hebt laten maken, dan is het belangrijk dat je deze in vectorformaat hebt. De basis van een logo moet je altijd in een vector hebben, dus bijvoorbeeld als een pdf, AI-bestand, SVG-bestand of een EPS-extensie. 

Als je je logo niet als vector in bezit hebt, investeer dan in een grafisch vormgever die dit voor je kan doen. Je zult hier later veel profijt van hebben als je het logo later ook wilt gebruiken (bijvoorbeeld voor promotiemateriaal). 

Designfout 9: Foto’s van lage kwaliteit

Afbeeldingen hebben een grote impact op je bezoekers. Zeker in een webshop kan een afbeelding het verschil maken tussen een aankoop of geen aankoop. 

Als je geen goede kwaliteit foto’s beschikbaar hebt kun je uit verschillende stockfotowebsites kiezen. 

Een goed gratis alternatief is unsplash.com. Je kan zoeken naar een bepaald onderwerp, en dan kun je alles gratis downloaden. Wel zo netjes trouwens om de maker een shoutout te geven voor zijn of haar werk.

Of je kan een abonnement nemen voor ShutterStock, een van de grootste aanbieders van hoge kwaliteit afbeeldingen. 

Designfout 10: Slechte leesbaarheid

En ten slotte, misser 10: slechte leesbaarheid. Zo’n 95% van de informatie op het internet is geschreven tekst. Daarom is het enkel logisch dat jij als webdesigner ervoor zorgt dat de tekst op je site duidelijk geschreven is, en goed leesbaar is.

Voor goede leesbaarheid hou je rekening met de volgende punten:

  • Iedere regel is maximaal 60-80 karakters (inclusief spaties).
  • Geef tekst genoeg (wit)ruimte.
  • Gebruik geen te lichte tekstkleur. 
  • Gebruik niet te kleine lettergrootte. Het kleinste wat ik adviseer te gebruiken is een lettergrootte van 14 pixels. 
  • Wees voorzichtig met het gebruik van custom fonts. Sommige lettertypes zijn gemaakt voor koppen en niet geschikt voor paragrafen. Andere lettertypes zijn gemaakt voor print en niet voor het web. Bedenk daarom goed waarom je een specifiek lettertype wilt gebruiken en wijk alleen af van de standaard webfonts als je hier overtuigd van bent!
  • Gebruik de juiste uitlijning. In 95% van de gevallen is links uitlijnen gewoon de beste optie. In de overige 5% kun je gebruik maken van centreren (of rechts uitlijnen).

Conclusie: goed webdesign

Ik hoop dat je iets hebt kunnen leren van deze 10 veelgemaakte fouten. Met een goed webdesign onderscheid je je van je concurrenten. Daarnaast straalt je website professionaliteit uit!

Beoordeel dit artikel

Thomas van Duijn

Reageer

Partners