Deze website design handleiding is een beknopt overzicht van wat ik de afgelopen 10 jaar heb geleerd over wat komt kijken bij effectief website design.
Het goede nieuws: we gaan het niet slechts houden bij theorie – ik geef je concrete design tips die je vandaag nog op je website toe kunt passen.
We behandelen hoe je tekst zo leesbaar mogelijk maakt, kleuren op de juiste manier gebruikt, afbeeldingen goed uit de verf laat komen, en een goede gebruikerservaring creëert.
1. Het belang van goed website design
Waarom is goed website design belangrijk?
Goed website design is super belangrijk voor het succes van je site. 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.
Een goed ontworpen website wekt vertrouwen op bij je lezers en creëert een bepaalde sfeer. Daarnaast maakt goed design het eenvoudiger voor je bezoekers om de informatie op je site te absorberen.
Omgekeerd leidt slecht design ertoe dat gebruikers je site minder zullen vertrouwen en sneller je pagina’s zullen verlaten. Je bounce rate zal omhoogschieten en je zult slechter converteren.
Principes van goed website design
Hou het simpel
Eenvoud moet het primaire doel van website design zijn. Hoe verleidelijk het ook is om allerlei franjes en effecten toe te voegen, denk altijd aan je gebruiker.
Laat je gebruikers niet nadenken
Wanneer je je website ontwerpt is het aan jou om alle vraagtekens bij je bezoekers weg te nemen. Dit kun je doen door het neerzetten van een duidelijke visuele hiërarchie, logische navigatie en consistentie van design elementen.
Focus de aandacht op de juiste dingen
Gebruik kleurcontrast of contrast in grootte om de aandacht van je bezoekers te leiden naar bepaalde onderdelen van je site.
Gebruik veel witruimte
Je site is een stuk prettiger te consumeren wanneer je veel witruimte plaatst tussen je design elementen en tekst. Witruimte geeft webpagina’s een ruimtelijk gevoel.
Originaliteit is prima, maar ga niet te ver
Volg design regels waar mensen mee bekend zijn. Gebruikers verwachten een zekere voorspelbaarheid wanneer ze een site bezoeken.
2. Tekst: lettertypes, grootte en leesbaarheid
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. Als je site over yoga gaat, wil je een ander gevoel naar boven brengen dan met een zakelijk blog.
Zo kies je een lettertype
Er zijn duizenden lettertypes om uit kiezen. Om de keuze te vereenvoudigen:
- Aansluiting op je merk. Je hebt weinig aan een mooi lettertype als het niet op je merk aansluit
- Denk aan je publiek. Probeer een balans te vinden tussen je persoonlijke smaak en wie je site bezoekt
- Leesbaarheid > uiterlijk. Vermijd zeer artistieke lettertypes, hoe sierlijk ze er ook uitzien
- Veelzijdigheid. Hoe ziet het lettertype eruit in verschillende groottes en diktes?
Vind je het lastig een lettertype te kiezen? Kijk naar Roboto, Lato of Open Sans. Deze zijn neutraal, sluiten bij veel websites aan en kun je gratis gebruiken.
Gebruik maximaal twee verschillende lettertypes: een voor titels en een voor gewone tekst. Hoe meer lettertypes je kiest, hoe groter de kans dat je de visuele balans van je site tegen werkt.
Lettertype grootte en schaal
Ik zou op z’n allerminst een tekstgrootte van 16px kiezen, maar beter nog is 18px. Ga je kleiner dan dat, dan raakt dat de leesbaarheid van je site – vooral voor je oudere bezoekers.
Kies de grootte van je tekst en titels niet willekeurig. Zorg dat je titel-, subtitel- en tekstgroottes modulair geproportioneerd zijn. Dit kun je eenvoudig doen met behulp van deze tool.
Tekst kleur en regelhoogte
Voor de kleur van je tekst wil je het veilig spelen. Donkergrijs of donkerblauw op een witte achtergrond werkt het best. Pikzwarte letters zijn vermoeiender voor de ogen dan een grijstint.
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 gebruiken.
Breedte van je tekst kolom
De breedte van je tekst kolom heeft directe invloed op de leesbaarheid. Onderzoek heeft aangetoond dat de prettigst te lezen tekst tussen de 480 en 700 pixels breed is. Is je tekst kolom breder, dan moet je je ogen te veel heen en weer bewegen.
3. Kleuren
Kleur: eenvoud en consistentie wint
Kleur heeft invloed op de emoties van je bezoekers en helpt hen eenvoudiger je site te navigeren. Onderzoek van Adobe en de University of Toronto toont aan dat mensen de voorkeur hebben voor simpele kleuren. In veel gevallen werd het gebruik van 2 of 3 verschillende kleuren als het aantrekkelijkst gezien.
Hoe maak je een kleurenpalet
Een kleurenpalet bepaalt de look and feel van je site en zorgt voor visuele consistentie. Je kunt het opdelen in drie categorieën:
Accent kleuren
Deze kleuren gebruik je om aandacht te trekken, bijvoorbeeld voor call-to-actions. Het is belangrijk dat deze kleuren sterk afsteken tegen de rest van je site.
Tekst kleuren
Meestal wil je hiervoor een spectrum van grijstinten kiezen. Deze kunnen “grijs grijs” zijn, maar ook een warme of koude tint hebben.
Achtergrond kleuren
Je achtergrond kleuren zijn meestal de lichtste kleuren op je website. Meestal wit of lichtgrijs, maar je kunt ook voor andere lichte kleuren kiezen.
Handige kleuren tools
- Image Color Picker – Upload afbeeldingen en check welke kleuren er gebruikt worden
- Adobe Color Wheel – Ontwerp binnen een paar klikken je eigen kleurenpalet
4. Afbeeldingen
Het belang van afbeeldingen
Iedere website zou afbeeldingen moeten gebruiken. Naast dat het je site er aantrekkelijker uit laat zien, kunnen afbeeldingen ook de gebruiksvriendelijkheid vergroten.
Mensen zijn visuele 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.
Waar vind je afbeeldingen?
Stock foto websites
De eenvoudigste manier om aan afbeeldingen te komen. Mijn favoriete sites:
Maak zelf foto’s
Tijdrovender, maar je krijgt 100% originele afbeeldingen die echt meerwaarde bieden aan je website.
Maak screen captures
Voor software handleidingen of reviews. Dit maakt je content veel overtuigender en gemakkelijker te volgen.
Upgrade je afbeeldingen met een rand
Randjes op afbeeldingen, zoals je hier ziet in dit artikel. Dit zorgt dat ze goed afsteken tegen je tekst, vooral voor screenshots met veel wit.
5. User experience (UX)
Wat is user experience?
User experience verwijst naar hoe een gebruiker een website ervaart en hiermee omgaat. Een goede UX zorgt ervoor dat je gebruiker eenvoudig het probleem kan oplossen waarvoor hij kwam.
UX is anders dan UI (user interface). UX is de overkoepelende ervaring, UI gaat over hoe je website oogt en wordt gepresenteerd.
Navigatie
Menu
Een goed gestructureerd menu kan de navigeerbaarheid maken of breken. Plaats je menu bovenaan je site met je logo aan de linkerkant. In het midden plaats je de belangrijkste onderdelen van je website.
Homepage
Voor veel websites is de homepage de belangrijkste pagina. Hier laat je bezoekers zien wat je doet en waarom jouw business de moeite waard is.
Belangrijke elementen:
- Boven de vouw – Duidelijk maken wat je doet + call-to-action
- Social proof – Reviews, testimonials of bekende publicaties
- Uitgebreidere uitleg – Concreet uitleggen wat je te bieden hebt
- Je product/dienst – Duidelijk en goed presenteren
- Recente content – Toon dat je site up-to-date is
Snelheid
Geen mens houdt van trage websites. Snelle websites converteren beter en rankeren hoger in Google.
Onderzoek toont aan:
- 0-4 seconden laadtijd leidt tot de beste conversieratio’s
- Conversieratio’s dalen met 4,42% per extra seconde laadtijd
Grootste impact op WordPress snelheid:
- Webhosting – Zonder goede hosting blijft je site traag: met een host als mijn.host zal je site altijd snel laden
- Theme – Kies lichte themes als Kadence of GeneratePress
- Afbeeldingen – Gebruik WebP formaat en lazy loading
- Plugins – Installeer zo min mogelijk plugins
Test je snelheid met PageSpeed Insights en GTmetrix.
Volgende stappen
Goed website design combineert alle bovenstaande elementen. Begin met de basis – leesbare tekst, eenvoudige kleuren en snelle laadtijden. Voeg daarna geleidelijk meer geavanceerde elementen toe.
Het belangrijkste is dat je begint. Elke verbetering die je aanbrengt, hoe klein ook, draagt bij aan een betere gebruikerservaring en uiteindelijk meer conversies.
Geef een reactie