Website design: een complete handleiding

In deze handleiding vind je alles wat komt kijken bij goed website design. 

Het goede nieuws:

We gaan het niet slechts houden bij theorie. Ik geef je ook een aantal super concrete design tips die je vandaag nog op je website toe kunt passen.

We gaan het hebben over hoe je:

  • De tekst van je site zo leesbaar mogelijk maakt
  • Kleuren op de juiste manier gebruikt
  • Afbeeldingen zo goed mogelijk uit de verf kan laten komen
  • Een goede gebruikerservaring creëert 
  • En meer

De inhoudsopgave hieronder laat je precies zien welke onderwerpen we gaan tackelen. Klik op een van de onderwerpen om direct door te scrollen. Maar je kunt natuurlijk ook gewoon bij het begin beginnen. 

Ben je er klaar voor? Laten we dan beginnen.

1. Het belang van goed website design

In dit hoofdstuk gaan we kijken naar waarom het eigenlijk zo belangrijk is om te investeren in website design. 

Veel mensen onderschatten het belang hiervan. Maar denk hieraan: je hebt slechts één kans op het maken van een goede eerste indruk op je bezoekers. 

Ook ga ik in dit hoofdtuk een paar van de universele principes van goed webdesign met je delen. 

Waarom is goed website design belangrijk? 

Goed website design is extreem belangrijk voor het succes van je website. Een studie die onderzocht waarom mensen websites niet vertrouwden, liet zien dat 94% van het commentaar design-gerelateerd was. Slechts 6% had te maken met de inhoud.

Interessant genoeg keek dit onderzoek specifiek naar medische websites, een onderwerp waarvan je misschien zou verwachten dat vorm ondergeschikt is aan de inhoud.

Niks bleek minder waar: mensen beoordelen inderdaad een boek vooral op zijn kaft.

Dit oordeel wordt ook nog eens vliegensvlug gevormd. Dit onderzoek toont aan dat het bezoekers 50 milliseconden kost om een oordeel over een web pagina’s aantrekkelijkheid te vormen. Ter vergelijking: knipperen met je ogen duurt 100-150 milliseconden.  

Een goed ontworpen website wekt vertrouwen op bij je lezers en kan helpen een bepaalde sfeer te scheppen. Daarnaast maakt goed design het eenvoudiger voor je bezoekers om de informatie op je site tot hen te nemen.

WebsiteGecko, een voorbeeld van goed website design
WebsiteGecko.com, een voorbeeld een goed ontworpen, betrouwbaar ogende website

Omgekeerd leidt suboptimaal design ertoe dat gebruikers je site minder zullen vertrouwen en sneller je pagina’s zullen verlaten. Je bounce rate zal omhoogschieten. En als gevolg zal je slechter converteren en daarmee sales mislopen. 

Kortom, als er staat nogal wat op het spel als het op design aankomt. Ben je een ondernemer (zoals wij van Start24 zijn), dan kan goed webdesign directe impact hebben op je bottom line.

Een korte samenvatting: principes van goed website design

Hieronder vind je een aantal universele design principes waar iedere goed ontworpen website aan moet voldoen, kort samengevat:

Hou het simpel

Denk: less is more. Eenvoud moet het primaire doel van website design zijn. 

Hoe verleidelijk het ook is om allerlei franjes en effecten aan je site toe te voegen, denk altijd aan je gebruiker. Hoe kun je de informatie die zij zoekt presenteren op een zo simpele, helder mogelijke manier? Wordt haar gebruikerservaring beter van allerlei verschillende kleuren, content blokken en andere elementen die op haar afkomen?

Laat je gebruikers niet nadenken 

Of, don’t make me think! in Steven Krug’s woorden. Krug’s boek over dit onderwerp is decennia oud maar anno 2021 nog steeds zeer relevant. 

Wanneer je je website ontwerpt is het aan jou om alle vraagtekens bij je bezoekers weg te nemen. Dit kun je doen door het creëren van een duidelijke visuele hiërarchie, logische navigatie en consistentie van design elementen. 

Tekst speelt hier ook een ontzettend grote rol: zit er geen dubbelzinnigheid in de woorden die je op je site gebruikt? Is je copywriting zo scherp en helder als het zou kunnen zijn?

Focus de aandacht van je gebruikers op de juiste dingen

Dit sluit aan op het vorige punt. Gebruik kleurcontrast of contrast in grootte om de aandacht van je bezoekers te leiden naar bepaalde onderdelen van je site. Hiermee kun je hen eenvoudig van punt A naar B brengen, zonder dat dit ze moeite kost. 

Schroom je niet witruimte in te zetten 

Je site is een stuk beter te behappen wanneer je veel witruimte plaatst tussen je design elementen en tekst.

Witruimte geeft webpagina’s een ruimtelijk gevoel en biedt je bezoekers momenten van ademruimte. Een van de eerste dingen die bezoekers doen is je pagina scannen en de informatie mentaal in makkelijk te behappen blokken te verdelen. Witruimte maakt dit een stuk eenvoudiger.

Originaliteit is prima, maar verlaat de gebaande paden niet te veel 

Het internet zou een onmogelijk te navigeren plek zijn als websites vaste design conventies aan de kant gooide. 

Net als in het echte leven (bijvoorbeeld, de meeste vliegvelden volgen een soortgelijke blauwdruk), verwachten gebruikers ook op het internet een zekere voorspelbaarheid wanneer ze een site bezoeken. Denk aan een navigatiemenu bovenaan de site, hoe een gemiddeld blog artikel gestructureerd is en hoe een contactpagina eruit ziet. 

Originaliteit is geweldig, maar zorg dat je site niet te veel uit de pas loopt. Volg design conventies waar mensen mee bekend zijn.

Design is not just what it looks like and feels like. Design is how it works.

Steve jobs

2. Tekst: lettertypes, grootte en leesbaarheid

Het kiezen van het juiste lettertype voor je site zorgt niet alleen dat je tekst goed leesbaar is. Het heeft ook een belangrijke psychologische impact op je bezoekers. 

De grootte van je lettertype en de regelafstand is ook van groot belang, net als de verhouding van je titels tot je tekst. 

Verder heeft de breedte van je tekst een belangrijke invloed op het ontwerp van je site.

Dit alles gaan we in dit hoofdstuk bespreken.

Lettertypes en de impact op je identiteit

Verschillende lettertypes genereren onbewust verschillende gevoelens bij mensen. Dit heeft directe impact op de identiteit van je brand. Deze gevoelens kunnen te maken hebben met vertrouwen, kracht, professionaliteit en creativiteit.

Als je site over yoga gaat, dan wil je ander gevoel naar boven brengen dan met een zakelijk blog. Bij die eerste wil je een lettertype wat misschien creatiever en lichter voelt, terwijl je met die laatste professionaliteit wilt uitstralen.

Voorbeeld van een yoga website

Zo kies je een lettertype voor je website

Er zijn duizenden lettertypes om uit kiezen. Met zoveel keus kun je gemakkelijk uren besteden aan het kiezen van een lettertype. 

Om de keuze te vereenvoudigen, hou rekening met de volgende punten:

  • Aansluiting op je merk. Je hebt weinig aan een mooi lettertype als het niet op je merk aansluit
  • Denk aan je publiek. Zouden zij dit een prettig lettertype vinden? Probeer een balans te vinden tussen je persoonlijke smaak en wie je site bezoekt
  • Leesbaarheid > uiterlijk. Kies een lettertype dat niet alleen bij je merk aansluit, maar ook zeer goed leesbaar is. Vermijd de zeer artistieke lettertypes, hoe sierlijk ze er ook uit mogen zien 
  • Veelzijdigheid. Hoe ziet het lettertype eruit in verschillende groottes? Heeft het meerdere diktes? Hoe ziet het er cursief uit? Hoe ogen de komma’s, punten en andere leestekens? 

Vind je het nog steeds lastig een lettertype te kiezen, kijk dan naar een van deze lettertypes: Roboto, Lato of Open Sans.

Het voordeel van deze lettertypes is dat ze neutraal ogen en bij een groot aantal soorten websites aansluiten. Ook kun je ze gratis gebruiken. Deze drie lettertypes worden gebruikt door tientallen miljoenen websites.

Ik zou maximaal twee verschillende lettertypes voor je site gebruiken: een voor de titels en een voor je gewone tekst. Hoe meer lettertypes je kiest, hoe groter de kans de je de visuele cohesie van je site om zeep helpt en je je bezoekers verward. 

Bovendien geldt: hoe meer lettertypes je gebruikt hoe trager je site laadt. 

Voor Start24 gebruiken we overigens system fonts. Dit houdt in dat onze bezoekers het lettertype van hun apparaat op onze site zien. Zo zien Android-gebruikers het Roboto lettertype op onze site.

De voordelen hiervan zijn dat je bezoekers een lettertype te zien krijgen waar ze aan gewend zijn, en dat je site sneller laadt. Het nadeel is dat je je website’s unieke identiteit niet via je lettertype kunt uiten en je jezelf lastiger onderscheidt van andere sites. 

Lettertype grootte en schaal

Ik zou op z’n allerminst een tekstgrootte van 16px kiezen, maar beter nog is 18px (dat is de grootte van de tekst die je nu leest). Ga je kleiner dan dat, dan komt de leesbaarheid van je site in het geding. 

Een content-gedreven website zoals Medium gebruikt zelfs een tekstgrootte van 21px:

Medium site pagina

Het resultaat? Super leesbare tekst die uitnodigt tot meer lezen.

Kies de grootte van je tekst en titels niet willekeurig. Als mensen voelen we ons aangetrokken tot schoonheid. En de meeste mooie dingen in het leven hebben perfecte proporties. 

Geloof het of niet, maar dit geldt ook voor lettergroottes. Zorg dus dat je titel-, subtitel- en tekstgroottes modulair geproportioneerd zijn. Dit kun je eenvoudig doen met behulp van deze tool

Voer de tekstgrootte in van je paragraaf tekst in bij “base size,” kies een gewenste schaal onder “scale,” et voilà: je ziet nu precies welke lettergrootte het beste past bij je titels en subtitels.

Tekst kleur

Voor de kleur van je tekst doe je er goed aan het veilig te spelen. Donkergrijs op een witte, of zeer lichtgrijze achtergrond werkt het best. Voor je titels kun je wat wildere kleuren kiezen, zolang deze de leesbaarheid niet bemoeilijken.

Pikzwarte letters zijn een minder goede keuze. Dit is namelijk vermoeiender voor de ogen dan een grijstint. 

Regelhoogte

Door genoeg regelhoogte te gebruiken, ademt je tekst meer en is deze beter leesbaar. Voor een lettergrootte van 18px zou ik minimaal een regelhoogte van 1,8em (definitie van em) gebruiken. De regelhoogte die wijzelf gebruiken is 1,9em. 

Als je je site met WordPress maakt, kun je de regelhoogte (bij veel themes) gemakkelijk in de theme customizer toepassen op alle tekst van je website. 

Regelhoogte aanpassen in WordPress

Breedte van je tekst kolom

De breedte van je tekst kolom heeft een directe invloed op de leesbaarheid van je content.

Dit onderzoek heeft aangetoond dat de prettigst te lezen tekst tussen de 480 en 700 pixels breed is (Start24 zit op precies 700 pixels). Is je tekst kolom breder dan dat, dan moet je je ogen te veel heen en weer bewegen. Dit leidt sneller tot vermoeidheid.

Vergelijk eens de volgende twee website lay-outs:

Bij Wikipedia spreidt de tekst zich uit over bijna de hele pagina (dit effect is nog sterker op een breed beeld). Medium daarentegen heeft een relatief smalle kolom breedte, wat de tekst veel prettiger te lezen maakt.

3. Kleuren

Kleur op de juiste manier gebruiken is een van de lastigste aspecten van het ontwerpen van een website.

In dit hoofdstuk ga ik je laten zien hoe je kleur zo effectief mogelijk gebruikt via een kleurenpalet.

Ook deel ik een paar van m’n favoriete tools voor het ontdekken van kleuren en het opstellen van een kleurenpalet. 

Kleur: eenvoud en consistentie wint

Kleur is een aspect van design wat invloed heeft op de emoties van je bezoekers. Ook helpt kleur je bezoekers eenvoudiger je site te navigeren. 

Een onderzoek van Adobe en de University of Toronto heeft gekeken naar kleur keuze en de voorkeuren van mensen naar bepaalde kleuren. Een van de conclusies die ze trokken was dat mensen de voorkeur hadden voor simpele kleuren. 

In veel gevallen werd het gebruik van 2 of 3 verschillende kleuren als het aantrekkelijkst gezien. Dit is waarom het zo belangrijk is een kleurenpalet voor je site op te stellen en je hieraan te houden.  

Hoe maak je een kleurenpalet 

Een kleurenpalet is iets wat je toepast op je hele site. Het bepaalt op een subtiele manier de look and feel van je site. Naast dat zo’n palet voor visuele consistentie op je website zorgt, wordt het ontwerpen van je site er ook eenvoudiger van. Je hoeft namelijk niet steeds te bedenken welke kleuren je wilt gebruiken.

Een kleurenpalet kun je opdelen in accent kleuren, tekst kleuren en basiskleuren.

Accent kleuren

Accent kleuren komen het minst voor op je site. Het zijn kleuren die je gebruikt om de aandacht van je lezer te trekken. Hierom is het belangrijk dat deze kleuren sterk afsteken tegen de rest van je site.

Deze kleuren wil je gebruiken voor bijvoorbeeld je call-to-actions (CTA). Het is belangrijk veel tijd de besteden aan bedenken welke kleuren je hier kiest, want ze zetten de toon voor je merk.

De accent kleuren van Start24 zijn oranje

Veel mensen gaan hier de mist mee in. Zo zie je dat ze bijvoorbeeld blauw kiezen als een overheersende kleur op hun site, en vervolgens hun CTA-knoppen ook blauw maken. Hierdoor vallen deze knoppen minder op en zullen bezoekers er minder snel op klikken. 

Tekst kleuren

Deze kleuren gebruik je om hiërarchie te creëren binnen je tekst en de randen die je op je site gebruikt. Meestal wil je hiervoor een spectrum van grijstinten kiezen. Deze kunnen “grijs grijs” zijn, maar ook een warme of koude tint hebben: 

Deze afbeelding is afkomstig van de Kadence website

Experimenteer hiermee om te kijken wat het beste bij jouw site aansluit. 

Achtergrond kleuren

Je achtergrond kleuren zijn meestal de lichtste kleuren op je website. Meestal zijn deze kleuren wit of lichtgrijs, maar je kunt ook voor andere lichte kleuren kiezen. Deze achtergrondkleuren vallen het minst op binnen je website, maar ze spelen een belangrijke rol in het goed laten samenkomen van je andere design elementen.  

Handige kleuren tools

Hieronder vind je een paar van m’n favoriete tools die me helpen met kleuren te kiezen voor m’n websites:

In dit artikel kun je meer lezen over kleuren kiezen voor je website.

4. Afbeeldingen

Een site zonder afbeeldingen oogt kaal en onaantrekkelijk. 

In dit hoofdstuk gaan we bespreken waarom afbeeldingen nou precies zo belangrijk zijn voor je site. Ook gaan we kijken waar je het beste afbeeldingen vandaan kunt halen. 

Tot slot deel ik een truc waarmee je jouw afbeeldingen er nét een tandje aantrekkelijker uit kunt laten zien.

Het belang van afbeeldingen op je website

Iedere website zou afbeeldingen moeten gebruiken. Naast dat het je site er aantrekkelijker uit laat zien, kunnen afbeeldingen ook de gebruiksvriendelijkheid van je site vergroten.

Afbeeldingen van producten, afbeeldingen die een bepaalde sfeer scheppen, screen captures die uitleggen hoe je software gebruikt, of je eigen foto’s dragen allemaal bij aan een betere website. 

Mensen zijn visueel ingestelde wezens. Je bezoekers zullen langer je content blijven lezen wanneer je tekst wordt afgewisseld door afbeeldingen. Deze langere leestijd vormt een positief signaal naar Google, wat eraan bijdraagt dat je website hoger in haar zoekmachine komt.

Kortom, genoeg redenen om je site te voorzien van afbeeldingen.

Waar vind je afbeeldingen?

Er zijn pak en beet drie manieren om aan afbeeldingen voor je site komen. 

Stock foto websites

De eenvoudigste manier om aan afbeeldingen te komen is via stock foto websites. De afbeeldingen op deze sites zijn vrij van copyright, en kun je dus in tegenstelling tot de eerste de beste afbeelding die je op Google vindt legaal gebruiken. 

Dit zijn m’n favoriete sites voor gratis stock afbeeldingen:

  • Freepik (voor foto’s en vector afbeeldingen)
  • Pexels (voor foto’s en video’s)
  • Pixabay (voor foto’s)
  • AllTheFreeStock (voor van alles en nog wat, waaronder geluidseffecten)

Bedenk wel dat wanneer je geen betaald lidmaatschap op deze sites hebt, je in veel gevallen een bronvermelding moet toevoegen.

Freepik homepage

Maak zelf foto’s en illustraties

Zelf foto’s of illustraties maken is tijdrovender, maar het voordeel is dat je site afbeeldingen krijgt die 100% origineel zijn. 

Afbeeldingen die je zelf hebt gemaakt kunnen echt meerwaarde bieden aan je website.

Eigen afbeelding op website

Hierboven zie je een foto die ik heb genomen voor een product recensie. Deze foto zorgt ervoor dat lezers kunnen zien dat ik het product daadwerkelijk heb gebruikt en getest. Dit komt een stuk overtuigender over dan wanneer ik enkel een generieke foto van de fabrikant zou hebben gebruikt.

Dus wanneer het kan, zorg dat je je eigen unieke foto’s en afbeeldingen aan je site toevoegt. 

Maak screen caps

Indien je site software handleidingen of reviews bevat, zorg dan dat je kwistig gebruik maakt van screen captures. 

Voorbeeld van content met screen captures

Naast dat dit je content er beter uit laat zien, maakt dit je content veel overtuigender en gemakkelijker te volgen. 

Upgrade je afbeeldingen met een rand

Praktisch alle afbeeldingen op Start24 hebben een rand. Het komt aan op persoonlijke smaak, maar ik vind het er een stuk netter uitzien. Dit geldt vooral voor screen captures die veel wit bevatten. Een rand kadert deze afbeeldingen mooi af en zorgt dat ze goed afsteken tegen je tekst. 

Als je de WordPress editor (Gutenberg) gebruikt, dan is niet 1-2-3 duidelijk hoe je een randje aan je afbeeldingen toevoegt. Maar gelukkig is het erg makkelijk dit te doen. Het enige wat je nodig hebt is een minuscuul beetje kennis van CSS, wat ik hieronder met je ga delen.

Ga in de WordPress theme customizer naar Additional CSS (dit kan bij jouw theme net iets anders heten – zolang CSS genoemd wordt zit je waarschijnlijk goed). En voeg hier nu de volgende regels code toe:

.img-border {

  border: 3px solid #cccccc;

Ga dan naar een bericht of een pagina en klik op een afbeelding. Voeg vervolgens de tekst img-border toe onder Advanced en dan Additional CSS (classes)

CSS toevoegen in Gutenberg

Vervolgens zal je zien dat je afbeelding een rand heeft:

Deze site legt je precies uit hoe je de dikte, radius en kleur van je randen aanpast via CSS. 

5. User experience (UX)

In dit hoofdstuk gaan we het hebben over website user experience.

Eerst gaan we bespreken wat user experience precies inhoudt. 

Daarna geef ik je een paar praktische user experience tips die je direct op jouw site toe kunt passen

Wat is user experience?

User experience verwijst naar hoe een gebruiker een product, systeem of dienst (zoals een website) ervaart en hiermee omgaat. 

User experience (UX) en user interface (UI) zijn termen die vaak door elkaar heen worden gebruikt, maar ze zijn niet hetzelfde.

UX is een overkoepelende term die verwijst naar de algehele ervaring van een gebruiker die je site bezoekt. Om een goede UX te kunnen bieden moet je weten wat de doelen van je gebruikers zijn, voorspellen hoe ze je site gaan gebruiken, en je site zodanig structureren dat ze zowel hun eigen doelen bereiken als die van jouw business. 

Een website met goede UX zorgt dat:

  • Het duidelijk is welk probleem bezoekers willen oplossen en manieren creëert om deze problemen op te lossen
  • Gebruikers eenvoudig de site kunnen navigeren en vinden wat ze zoeken
  • Gebruikers een soepele ervaring hebben die leidt tot een succesvolle transactie
  • De gebruiker de site verlaat met een goed gevoel over de website en het merk

UI daarentegen refereert naar hoe je website oogt en wordt gepresenteerd. Dit wordt bepaald door lettertype, kleur, afbeeldingen, witruimte en andere design elementen. Eigenlijk alles wat we tot nu toe in deze handleiding hebben besproken. 

Een website met goede UI zorgt dat:

  • Het visueel aantrekkelijk oogt
  • Het lettertype makkelijk te lezen is
  • Er een duidelijke visuele hiërarchie is
  • De lay-out niet druk is en genoeg witruime bevat
  • Design elementen gebruikt worden die je bezoekers bekend voorkomen, zodat ze hun doelen makkelijker kunnen bereiken

Dit betekent dat UI een onderdeel van UX is. Het een is niet beter dan het ander, en beide disciplines vergen evenveel aandacht. 

Een goede user experience op je website zorgt ervoor dat je gebruiker eenvoudig het probleem op kan lossen wat zij heeft.

Nu gaan we kijken naar een paar punten die kunnen leiden tot een betere website user experience.

Navigatie

Het is frustrerend wanneer je niet kunt vinden op een site wat je zoekt. 

Hieronder vind je de twee belangrijkste dingen die bijdragen aan het eenvoudig kunnen navigeren van je website.  

Menu

Een goed gestructureerd menu kan de navigeerbaarheid van je website maken of breken. 

Het beste hier is conventies te volgen: plaats je menu bovenaan je site met je logo aan de linkerkant. In het midden plaats je de belangrijkste onderdelen van je website. 

Aan de rechterkant kun je eventueel een CTA plaatsen, zoals bijvoorbeeld een “schrijf je in” knop. 

Is je site erg groot, dan kan het ook handig zijn een zoekknop aan je menu toe te voegen.

Homepage

Voor veel websites is de homepage de belangrijkste pagina. Het is samen met je “Over ons” pagina de belangrijkste plek om je bezoekers te laten zien wat je precies doet en waarom jouw business de moeite waard voor ze is.

Daarnaast gebruiken veel bezoekers je homepage om te navigeren naar een andere delen van je website. 

Ik ga hieronder de homepage van Start24 ontleden en je precies uitleggen wat het nut is van ieder element van deze pagina. Onze site is een blog en zal misschien een hele andere insteek hebben dan jouw website. Niettemin zijn de principes hieronder toepasselijk voor de meeste sites.

Start24 homepage

1. Laten zien wat de website doet en een call-to-action

Above the fold verwijst naar het deel van een pagina wat mensen zien wanneer ze deze openen. Je wilt hier 1) direct duidelijk maken wat je pagina of website doet en 2) je bezoekers motiveren tot een bepaalde actie. 

In ons geval laten we onze bezoekers weten dat het doel van onze site is hen helpen hun bedrijf te groeien. 

Vervolgens sturen we hen direct aan zich in te schrijven voor onze emaillijst. We doen dit via een duidelijke CTA: een belofte tot exclusieve ondernemerstips en een dijk van een inschrijfknop.

2. Social proof

Social proof is een belangrijke manier om conversies op je site te vergroten. 

De term verwijst naar het concept dat mensen de acties van andere mensen volgen. Het idee is dat omdat andere mensen iets doen of iets vinden, het wel goed zal zitten.

Met Start24 presenteren we social proof door een aantal grote, bekende websites te laten zien waarop artikelen van ons zijn verschenen. 

Als jij direct met klanten werkt, dan kun je social proof genereren door positieve reviews van deze klanten op je homepage te plaatsen. 

Voorbeelden van testimonials

3. Een iets uitgebreidere, maar nog steeds bondige uitleg van wat we doen

We leggen bij 1. al uit wat onze website doet, maar we zijn hier nog niet echt concreet. In dit gedeelte leggen we in meer detail uit wat we precies te bieden hebben. 

Veel websites komen helaas niet verder dan het plaatsen van een stel generieke buzzwords op hun homepage. Hier heb je als bezoeker natuurlijk niets aan. 

Zorg dat je ergens op je homepage duidelijk maar bondig uitlegt, of laat zien, wat je nou echt doet.

4. Ons product

Gezien we een blog zijn is ons product onze content. In dit gedeelte etaleren we de hoogtepunten van deze content.

Op Start24 schrijven we over websites maken, business development, business tools en meer. Hier laten we deze verschillende categorieën zien, samen met onze beste artikelen binnen iedere categorie. 

Je vindt hier ook links naar de verschillende categorieën, wat de site navigatie verbetert. 

Zorg dat je op de homepage altijd je product of dienst duidelijk en goed presenteert.

5. Meest recente artikelen

Hier vinden onze bezoekers de laatste artikelen die op onze site verschenen zijn. Vooral met content websites wil je duidelijk communiceren dat je site up-to-date is. Hierom plaatsen we ook datums bij deze artikelen. 

Snelheid

Geen mens op aarde houdt van trage websites. Trage websites converteren slechter dan snelle websites. Ook zullen je sneller terug klikken naar de zoekresultaten wanneer je site niet snel laadt.

Simpel gezegd: snelle websites dragen bij aan een goede website UX.  

Ook is website snelheid zowel een directe als een indirecte Google ranking factor.  

Dit onderzoek, wat de website snelheid van ecommerce sites onderzocht heeft, toonde het volgende aan:

  • 0-4 seconden laadtijd leidt tot de beste conversieratio’s 
  • De eerste 5 seconden van de laadtijd van de pagina hebben de grootste invloed op conversieratio’s
  • De conversieratio’s van websites dalen met gemiddeld 4,42% met elke extra seconde laadtijd (tussen 0-5 seconden)
  • De conversieratio’s van websites dalen met gemiddeld 2,11% met elke extra seconde laadtijd (tussen seconden 0-9)

Er zijn een aantal tools waarmee je je website snelheid kunt checken. Hieronder vind je een paar voorbeelden:

  • PageSpeed Insigths. Google’s eigen tool die de content van een webpagina analyseert, en vervolgens concrete suggesties biedt om deze sneller te maken
  • GTmetrix. Gebruikt data van Google PageSpeed maar biedt extra features. Je kunt bijvoorbeeld instellen vanaf welke locatie je site getest wordt. Echter, om ook de snelheid van de mobiele versie van je site te checken, heb je een betaalde account nodig 

Dit heeft de grootste invloed op de snelheid van een WordPress website

Gebruik je WordPress, dan hebben de volgende factoren de grootste impact op de snelheid van je website:

  1. Webhosting. Hoe goed je site ook gecodeerd is, zonder goede hosting zal hij altijd traag blijven. Bekijk hier ons overzicht van de beste, snelste web hosting providers
  2. Theme. De meeste WordPress themes zijn verschrikkelijk slecht gecodeerd en zullen je website dodelijk traag maken. Page builders als Elementor of Divi vertragen je ook site ook aanzienlijk. Kies een lichte theme als Kadence of GeneratePress en bouw je site met Gutenberg
  3. Afbeeldingen. Je ziet veel websites nog steeds PNG of JPEG gebruiken voor hun afbeeldingen. Gebruik in plaats daarvan Google’s WebP formaat. Dit formaat is zeer licht en laat praktisch geen kwaliteitsverlies zien. Er zijn verschillende plugins die je afbeeldingen naar WebP kunnen converteren. Zorg daarnaast dat je site gebruik maakt van lazy loading (dit kan ook via een plugin). Voor Start24 doen wij dit alles via de SG Optimizer plugin van SiteGround
  4. Plugins. Installeer zo min mogelijk plugins op je site. Verwijder plugins die je niet meer gebruikt, en kies plugins die goed gecodeerd zijn (of dit zo is, kun je meestal opmaken uit de reviews)

Dankzij het bovenstaande is het me gelukt dit soort snelheidsscores te halen:

GTmetrix score van site met Kadence en SiteGround

Het bereiken van deze scores kostte me minimale moeite. Alles wat ik heb gebruikt – m’n hosting, theme en plugins – kun je in deze WordPress handleiding terugvinden. 

Volgende stappen

Dit is het einde van deze website design handleiding. Allereerst wil ik een paar inspiratiebronnen hun credits geven die veel invloed hebben gehad op mijn denken rondom (website) design:

  • Steve Krug. Hij is de auteur van Don’t Make Me Think: A Common Sense Approach to Web Usability
  • Paul Rand. De legendarische art director en grafisch ontwerper. Ik raad je zijn boek Thoughts on Design van harte aan om een beter gevoel voor design in het algemeen te krijgen. Dit boek stamt uit de jaren ’40, maar is nog steeds relevant
  • Het team achter Kadence. Kadence is een gratis WordPress theme wat wij gebruiken voor Start24. Op hun blog vind je een aantal gouden design inzichten
  • Brian Dean. De oprichter van Backlinko, een SEO blog waar je zo nu en dan uitstekende webdesign tips treft 

Mocht je een designer voor je site willen inhuren, dan kijk dan naar 99Designs. In dit artikel beschrijf ik mijn ervaringen met hen. Het is een betaalbare dienst die je in contact brengt met top designers van over de hele wereld.  

Nu is het jouw beurt

Ik hoop dat je iets hebt gehad aan deze website design handleiding.

Laat me weten wat je ervan vond. Aan welke tip heb je het meeste gehad? 

Als je nog vragen hebt, hoor ik ze ook graag.

Laat het me weten door hieronder een bericht achter te laten.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *