Waarom is goed website design belangrijk?<\/strong><\/h3>\n\n\nGoed 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<\/a>. Slechts 6% had te maken met de inhoud.<\/p>\n\n\n\nEen goed ontworpen website wekt vertrouwen op bij je lezers en cre\u00ebert een bepaalde sfeer. Daarnaast maakt goed design het eenvoudiger voor je bezoekers om de informatie op je site te absorberen.<\/p>\n\n\n\n
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.<\/p>\n\n\n
Principes van goed website design<\/strong><\/h3>\n\n\nHou het simpel<\/strong>
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.<\/p>\n\n\n\nLaat je gebruikers niet nadenken<\/strong>
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\u00ebrarchie, logische navigatie en consistentie van design elementen.<\/p>\n\n\n\nFocus de aandacht op de juiste dingen<\/strong>
Gebruik kleurcontrast of contrast in grootte om de aandacht van je bezoekers te leiden naar bepaalde onderdelen van je site.<\/p>\n\n\n\nGebruik veel witruimte<\/strong>
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.<\/p>\n\n\n\nOriginaliteit is prima, maar ga niet te ver<\/strong>
Volg design regels waar mensen mee bekend zijn. Gebruikers verwachten een zekere voorspelbaarheid wanneer ze een site bezoeken.<\/p>\n\n\n2. Tekst: lettertypes, grootte en leesbaarheid<\/strong><\/h2>\n\nLettertypes en de impact op je identiteit<\/strong><\/h3>\n\n\nVerschillende 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.<\/p>\n\n\n
Zo kies je een lettertype<\/strong><\/h3>\n\n\nEr zijn duizenden lettertypes om uit kiezen. Om de keuze te vereenvoudigen:<\/p>\n\n\n\n
\n- Aansluiting op je merk.<\/strong> Je hebt weinig aan een mooi lettertype als het niet op je merk aansluit<\/li>\n\n\n\n
- Denk aan je publiek.<\/strong> Probeer een balans te vinden tussen je persoonlijke smaak en wie je site bezoekt<\/li>\n\n\n\n
- Leesbaarheid > uiterlijk.<\/strong> Vermijd zeer artistieke lettertypes, hoe sierlijk ze er ook uitzien<\/li>\n\n\n\n
- Veelzijdigheid.<\/strong> Hoe ziet het lettertype eruit in verschillende groottes en diktes?<\/li>\n<\/ul>\n\n\n\n
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.<\/p>\n\n\n\n![\"\"](\"https:\/\/mijn.host\/blog\/wp-content\/uploads\/2025\/06\/roboto.png\")
<\/figure>\n\n\n\nGebruik 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. <\/p>\n\n\n
Lettertype grootte en schaal<\/strong><\/h3>\n\n\nIk 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. <\/p>\n\n\n\n
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<\/a>.<\/p>\n\n\nTekst kleur en regelhoogte<\/strong><\/h3>\n\n\nVoor 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.<\/p>\n\n\n\n
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.<\/p>\n\n\n
Breedte van je tekst kolom<\/strong><\/h3>\n\n\nDe 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.<\/p>\n\n\n
3. Kleuren<\/strong><\/h2>\n\nKleur: eenvoud en consistentie wint<\/strong><\/h3>\n\n\nKleur 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.<\/p>\n\n\n
Hoe maak je een kleurenpalet<\/strong><\/h3>\n\n\nEen kleurenpalet bepaalt de look and feel van je site en zorgt voor visuele consistentie. Je kunt het opdelen in drie categorie\u00ebn:<\/p>\n\n\n\n
Accent kleuren<\/strong>
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.<\/p>\n\n\n\n![\"\"](\"https:\/\/mijn.host\/blog\/wp-content\/uploads\/2025\/06\/cta.png\")
Je wilt CTA kleuren hebben die sterk afsteken tegen de rest van de website <\/figcaption><\/figure>\n\n\n\nTekst kleuren<\/strong>
Meestal wil je hiervoor een spectrum van grijstinten kiezen. Deze kunnen “grijs grijs” zijn, maar ook een warme of koude tint hebben.<\/p>\n\n\n\nAchtergrond kleuren<\/strong>
Je achtergrond kleuren zijn meestal de lichtste kleuren op je website. Meestal wit of lichtgrijs, maar je kunt ook voor andere lichte kleuren kiezen.<\/p>\n\n\nHandige kleuren tools<\/strong><\/h3>\n\n\n\n- Image Color Picker<\/a> – Upload afbeeldingen en check welke kleuren er gebruikt worden<\/li>\n\n\n\n
- Adobe Color Wheel<\/a> – Ontwerp binnen een paar klikken je eigen kleurenpalet<\/li>\n<\/ul>\n\n\n
4. Afbeeldingen<\/strong><\/h2>\n\nHet belang van afbeeldingen<\/strong><\/h3>\n\n\nIedere website zou afbeeldingen moeten gebruiken. Naast dat het je site er aantrekkelijker uit laat zien, kunnen afbeeldingen ook de gebruiksvriendelijkheid vergroten.<\/p>\n\n\n\n
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.<\/p>\n\n\n
Waar vind je afbeeldingen?<\/strong><\/h3>\n\n\nStock foto websites<\/strong>
De eenvoudigste manier om aan afbeeldingen te komen. Mijn favoriete sites:<\/p>\n\n\n\n\n- Freepik<\/a> (foto’s en vector afbeeldingen)<\/li>\n\n\n\n
- Pexels<\/a> (foto’s en video’s)<\/li>\n\n\n\n
- Pixabay<\/a> (foto’s)<\/li>\n<\/ul>\n\n\n\n
![\"\"](\"https:\/\/mijn.host\/blog\/wp-content\/uploads\/2025\/06\/freepik.png\")
Freepik heeft talloze prachtige gratis foto’s en afbeeldingen<\/figcaption><\/figure>\n\n\n\nMaak zelf foto’s<\/strong>
Tijdrovender, maar je krijgt 100% originele afbeeldingen die echt meerwaarde bieden aan je website.<\/p>\n\n\n\nMaak screen captures<\/strong>
Voor software handleidingen of reviews. Dit maakt je content veel overtuigender en gemakkelijker te volgen.<\/p>\n\n\n\nUpgrade je afbeeldingen met een rand<\/strong><\/p>\n\n\n\nRandjes op afbeeldingen, zoals je hier ziet in dit artikel. Dit zorgt dat ze goed afsteken tegen je tekst, vooral voor screenshots met veel wit.<\/p>\n\n\n
5. User experience (UX)<\/strong><\/h2>\n\nWat is user experience?<\/strong><\/h3>\n\n\nUser 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.<\/p>\n\n\n\n
UX is anders dan UI (user interface). UX is de overkoepelende ervaring, UI gaat over hoe je website oogt en wordt gepresenteerd.<\/p>\n\n\n
Navigatie<\/strong><\/h3>\n\n\nMenu<\/strong>
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.<\/p>\n\n\n\nHomepage<\/strong>
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.<\/p>\n\n\n\nBelangrijke elementen:<\/p>\n\n\n\n
\n- Boven de vouw<\/strong>\u00a0– Duidelijk maken wat je doet + call-to-action<\/li>\n\n\n\n
- Social proof<\/strong> – Reviews, testimonials of bekende publicaties<\/li>\n\n\n\n
- Uitgebreidere uitleg<\/strong> – Concreet uitleggen wat je te bieden hebt<\/li>\n\n\n\n
- Je product\/dienst<\/strong> – Duidelijk en goed presenteren<\/li>\n\n\n\n
- Recente content<\/strong> – Toon dat je site up-to-date is<\/li>\n<\/ol>\n\n\n
Snelheid<\/strong><\/h3>\n\n\nGeen mens houdt van trage websites. Snelle websites converteren beter en rankeren hoger in Google.<\/p>\n\n\n\n
Onderzoek toont aan:<\/p>\n\n\n\n
\n- 0-4 seconden laadtijd leidt tot de beste conversieratio’s<\/li>\n\n\n\n
- Conversieratio’s dalen met 4,42% per extra seconde laadtijd<\/li>\n<\/ul>\n\n\n\n
Grootste impact op WordPress snelheid:<\/strong><\/p>\n\n\n\n\n- Webhosting<\/strong>\u00a0– Zonder goede hosting blijft je site traag: met een host als mijn.host<\/a> zal je site altijd snel laden<\/li>\n\n\n\n
- Theme<\/strong> – Kies lichte themes als Kadence of GeneratePress<\/li>\n\n\n\n
- Afbeeldingen<\/strong> – Gebruik WebP formaat en lazy loading<\/li>\n\n\n\n
- Plugins<\/strong> – Installeer zo min mogelijk plugins<\/li>\n<\/ol>\n\n\n\n
Test je snelheid met PageSpeed Insights<\/a> en GTmetrix<\/a>.<\/p>\n\n\n\n![\"\"](\"https:\/\/mijn.host\/blog\/wp-content\/uploads\/2025\/06\/mijn-host-pagespeed.png\")
Een tool als Google PageSpeed laat je direct zien hoe je website ervoor staat qua snelheid<\/figcaption><\/figure>\n\n\nVolgende stappen<\/strong><\/h2>\n\n\nGoed website design combineert alle bovenstaande elementen. Begin met de basis – leesbare tekst, eenvoudige kleuren en snelle laadtijden. Voeg daarna geleidelijk meer geavanceerde elementen toe.<\/p>\n\n\n\n
Het belangrijkste is dat je begint. Elke verbetering die je aanbrengt, hoe klein ook, draagt bij aan een betere gebruikerservaring en uiteindelijk meer conversies.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":4,"featured_media":2317,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"hide_cta_migrate_site":false,"hide_toc_block":false,"footnotes":""},"categories":[40],"tags":[],"class_list":["post-2316","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-tricks"],"_links":{"self":[{"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/posts\/2316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/comments?post=2316"}],"version-history":[{"count":2,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/posts\/2316\/revisions"}],"predecessor-version":[{"id":2324,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/posts\/2316\/revisions\/2324"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/media\/2317"}],"wp:attachment":[{"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/media?parent=2316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/categories?post=2316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/tags?post=2316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Een goed ontworpen website wekt vertrouwen op bij je lezers en cre\u00ebert een bepaalde sfeer. Daarnaast maakt goed design het eenvoudiger voor je bezoekers om de informatie op je site te absorberen.<\/p>\n\n\n\n
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.<\/p>\n\n\n
Principes van goed website design<\/strong><\/h3>\n\n\nHou het simpel<\/strong>
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.<\/p>\n\n\n\nLaat je gebruikers niet nadenken<\/strong>
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\u00ebrarchie, logische navigatie en consistentie van design elementen.<\/p>\n\n\n\nFocus de aandacht op de juiste dingen<\/strong>
Gebruik kleurcontrast of contrast in grootte om de aandacht van je bezoekers te leiden naar bepaalde onderdelen van je site.<\/p>\n\n\n\nGebruik veel witruimte<\/strong>
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.<\/p>\n\n\n\nOriginaliteit is prima, maar ga niet te ver<\/strong>
Volg design regels waar mensen mee bekend zijn. Gebruikers verwachten een zekere voorspelbaarheid wanneer ze een site bezoeken.<\/p>\n\n\n2. Tekst: lettertypes, grootte en leesbaarheid<\/strong><\/h2>\n\nLettertypes en de impact op je identiteit<\/strong><\/h3>\n\n\nVerschillende 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.<\/p>\n\n\n
Zo kies je een lettertype<\/strong><\/h3>\n\n\nEr zijn duizenden lettertypes om uit kiezen. Om de keuze te vereenvoudigen:<\/p>\n\n\n\n
\n- Aansluiting op je merk.<\/strong> Je hebt weinig aan een mooi lettertype als het niet op je merk aansluit<\/li>\n\n\n\n
- Denk aan je publiek.<\/strong> Probeer een balans te vinden tussen je persoonlijke smaak en wie je site bezoekt<\/li>\n\n\n\n
- Leesbaarheid > uiterlijk.<\/strong> Vermijd zeer artistieke lettertypes, hoe sierlijk ze er ook uitzien<\/li>\n\n\n\n
- Veelzijdigheid.<\/strong> Hoe ziet het lettertype eruit in verschillende groottes en diktes?<\/li>\n<\/ul>\n\n\n\n
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.<\/p>\n\n\n\n<\/figure>\n\n\n\nGebruik 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. <\/p>\n\n\n
Lettertype grootte en schaal<\/strong><\/h3>\n\n\nIk 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. <\/p>\n\n\n\n
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<\/a>.<\/p>\n\n\nTekst kleur en regelhoogte<\/strong><\/h3>\n\n\nVoor 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.<\/p>\n\n\n\n
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.<\/p>\n\n\n
Breedte van je tekst kolom<\/strong><\/h3>\n\n\nDe 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.<\/p>\n\n\n
3. Kleuren<\/strong><\/h2>\n\nKleur: eenvoud en consistentie wint<\/strong><\/h3>\n\n\nKleur 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.<\/p>\n\n\n
Hoe maak je een kleurenpalet<\/strong><\/h3>\n\n\nEen kleurenpalet bepaalt de look and feel van je site en zorgt voor visuele consistentie. Je kunt het opdelen in drie categorie\u00ebn:<\/p>\n\n\n\n
Accent kleuren<\/strong>
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.<\/p>\n\n\n\nJe wilt CTA kleuren hebben die sterk afsteken tegen de rest van de website <\/figcaption><\/figure>\n\n\n\nTekst kleuren<\/strong>
Meestal wil je hiervoor een spectrum van grijstinten kiezen. Deze kunnen “grijs grijs” zijn, maar ook een warme of koude tint hebben.<\/p>\n\n\n\nAchtergrond kleuren<\/strong>
Je achtergrond kleuren zijn meestal de lichtste kleuren op je website. Meestal wit of lichtgrijs, maar je kunt ook voor andere lichte kleuren kiezen.<\/p>\n\n\nHandige kleuren tools<\/strong><\/h3>\n\n\n\n- Image Color Picker<\/a> – Upload afbeeldingen en check welke kleuren er gebruikt worden<\/li>\n\n\n\n
- Adobe Color Wheel<\/a> – Ontwerp binnen een paar klikken je eigen kleurenpalet<\/li>\n<\/ul>\n\n\n
4. Afbeeldingen<\/strong><\/h2>\n\nHet belang van afbeeldingen<\/strong><\/h3>\n\n\nIedere website zou afbeeldingen moeten gebruiken. Naast dat het je site er aantrekkelijker uit laat zien, kunnen afbeeldingen ook de gebruiksvriendelijkheid vergroten.<\/p>\n\n\n\n
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.<\/p>\n\n\n
Waar vind je afbeeldingen?<\/strong><\/h3>\n\n\nStock foto websites<\/strong>
De eenvoudigste manier om aan afbeeldingen te komen. Mijn favoriete sites:<\/p>\n\n\n\n\n- Freepik<\/a> (foto’s en vector afbeeldingen)<\/li>\n\n\n\n
- Pexels<\/a> (foto’s en video’s)<\/li>\n\n\n\n
- Pixabay<\/a> (foto’s)<\/li>\n<\/ul>\n\n\n\n
Freepik heeft talloze prachtige gratis foto’s en afbeeldingen<\/figcaption><\/figure>\n\n\n\nMaak zelf foto’s<\/strong>
Tijdrovender, maar je krijgt 100% originele afbeeldingen die echt meerwaarde bieden aan je website.<\/p>\n\n\n\nMaak screen captures<\/strong>
Voor software handleidingen of reviews. Dit maakt je content veel overtuigender en gemakkelijker te volgen.<\/p>\n\n\n\nUpgrade je afbeeldingen met een rand<\/strong><\/p>\n\n\n\nRandjes op afbeeldingen, zoals je hier ziet in dit artikel. Dit zorgt dat ze goed afsteken tegen je tekst, vooral voor screenshots met veel wit.<\/p>\n\n\n
5. User experience (UX)<\/strong><\/h2>\n\nWat is user experience?<\/strong><\/h3>\n\n\nUser 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.<\/p>\n\n\n\n
UX is anders dan UI (user interface). UX is de overkoepelende ervaring, UI gaat over hoe je website oogt en wordt gepresenteerd.<\/p>\n\n\n
Navigatie<\/strong><\/h3>\n\n\nMenu<\/strong>
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.<\/p>\n\n\n\nHomepage<\/strong>
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.<\/p>\n\n\n\nBelangrijke elementen:<\/p>\n\n\n\n
\n- Boven de vouw<\/strong>\u00a0– Duidelijk maken wat je doet + call-to-action<\/li>\n\n\n\n
- Social proof<\/strong> – Reviews, testimonials of bekende publicaties<\/li>\n\n\n\n
- Uitgebreidere uitleg<\/strong> – Concreet uitleggen wat je te bieden hebt<\/li>\n\n\n\n
- Je product\/dienst<\/strong> – Duidelijk en goed presenteren<\/li>\n\n\n\n
- Recente content<\/strong> – Toon dat je site up-to-date is<\/li>\n<\/ol>\n\n\n
Snelheid<\/strong><\/h3>\n\n\nGeen mens houdt van trage websites. Snelle websites converteren beter en rankeren hoger in Google.<\/p>\n\n\n\n
Onderzoek toont aan:<\/p>\n\n\n\n
\n- 0-4 seconden laadtijd leidt tot de beste conversieratio’s<\/li>\n\n\n\n
- Conversieratio’s dalen met 4,42% per extra seconde laadtijd<\/li>\n<\/ul>\n\n\n\n
Grootste impact op WordPress snelheid:<\/strong><\/p>\n\n\n\n\n- Webhosting<\/strong>\u00a0– Zonder goede hosting blijft je site traag: met een host als mijn.host<\/a> zal je site altijd snel laden<\/li>\n\n\n\n
- Theme<\/strong> – Kies lichte themes als Kadence of GeneratePress<\/li>\n\n\n\n
- Afbeeldingen<\/strong> – Gebruik WebP formaat en lazy loading<\/li>\n\n\n\n
- Plugins<\/strong> – Installeer zo min mogelijk plugins<\/li>\n<\/ol>\n\n\n\n
Test je snelheid met PageSpeed Insights<\/a> en GTmetrix<\/a>.<\/p>\n\n\n\nEen tool als Google PageSpeed laat je direct zien hoe je website ervoor staat qua snelheid<\/figcaption><\/figure>\n\n\nVolgende stappen<\/strong><\/h2>\n\n\nGoed website design combineert alle bovenstaande elementen. Begin met de basis – leesbare tekst, eenvoudige kleuren en snelle laadtijden. Voeg daarna geleidelijk meer geavanceerde elementen toe.<\/p>\n\n\n\n
Het belangrijkste is dat je begint. Elke verbetering die je aanbrengt, hoe klein ook, draagt bij aan een betere gebruikerservaring en uiteindelijk meer conversies.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":4,"featured_media":2317,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"hide_cta_migrate_site":false,"hide_toc_block":false,"footnotes":""},"categories":[40],"tags":[],"class_list":["post-2316","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-tricks"],"_links":{"self":[{"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/posts\/2316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/comments?post=2316"}],"version-history":[{"count":2,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/posts\/2316\/revisions"}],"predecessor-version":[{"id":2324,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/posts\/2316\/revisions\/2324"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/media\/2317"}],"wp:attachment":[{"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/media?parent=2316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/categories?post=2316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/tags?post=2316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
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.<\/p>\n\n\n\n
Laat je gebruikers niet nadenken<\/strong> Focus de aandacht op de juiste dingen<\/strong> Gebruik veel witruimte<\/strong> Originaliteit is prima, maar ga niet te ver<\/strong> 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.<\/p>\n\n\n Er zijn duizenden lettertypes om uit kiezen. Om de keuze te vereenvoudigen:<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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. <\/p>\n\n\n 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. <\/p>\n\n\n\n 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<\/a>.<\/p>\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n 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.<\/p>\n\n\n 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.<\/p>\n\n\n Een kleurenpalet bepaalt de look and feel van je site en zorgt voor visuele consistentie. Je kunt het opdelen in drie categorie\u00ebn:<\/p>\n\n\n\n Accent kleuren<\/strong> Tekst kleuren<\/strong> Achtergrond kleuren<\/strong> Iedere website zou afbeeldingen moeten gebruiken. Naast dat het je site er aantrekkelijker uit laat zien, kunnen afbeeldingen ook de gebruiksvriendelijkheid vergroten.<\/p>\n\n\n\n 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.<\/p>\n\n\n Stock foto websites<\/strong> Maak zelf foto’s<\/strong> Maak screen captures<\/strong> Upgrade je afbeeldingen met een rand<\/strong><\/p>\n\n\n\n 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.<\/p>\n\n\n 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.<\/p>\n\n\n\n UX is anders dan UI (user interface). UX is de overkoepelende ervaring, UI gaat over hoe je website oogt en wordt gepresenteerd.<\/p>\n\n\n Menu<\/strong> Homepage<\/strong> Belangrijke elementen:<\/p>\n\n\n\n Geen mens houdt van trage websites. Snelle websites converteren beter en rankeren hoger in Google.<\/p>\n\n\n\n Onderzoek toont aan:<\/p>\n\n\n\n Grootste impact op WordPress snelheid:<\/strong><\/p>\n\n\n\n Test je snelheid met PageSpeed Insights<\/a> en GTmetrix<\/a>.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Het belangrijkste is dat je begint. Elke verbetering die je aanbrengt, hoe klein ook, draagt bij aan een betere gebruikerservaring en uiteindelijk meer conversies.<\/p>\n","protected":false},"excerpt":{"rendered":" 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 […]<\/p>\n","protected":false},"author":4,"featured_media":2317,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"hide_cta_migrate_site":false,"hide_toc_block":false,"footnotes":""},"categories":[40],"tags":[],"class_list":["post-2316","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-tricks"],"_links":{"self":[{"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/posts\/2316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/comments?post=2316"}],"version-history":[{"count":2,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/posts\/2316\/revisions"}],"predecessor-version":[{"id":2324,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/posts\/2316\/revisions\/2324"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/media\/2317"}],"wp:attachment":[{"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/media?parent=2316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/categories?post=2316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mijn.host\/blog\/wp-json\/wp\/v2\/tags?post=2316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
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\u00ebrarchie, logische navigatie en consistentie van design elementen.<\/p>\n\n\n\n
Gebruik kleurcontrast of contrast in grootte om de aandacht van je bezoekers te leiden naar bepaalde onderdelen van je site.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Volg design regels waar mensen mee bekend zijn. Gebruikers verwachten een zekere voorspelbaarheid wanneer ze een site bezoeken.<\/p>\n\n\n2. Tekst: lettertypes, grootte en leesbaarheid<\/strong><\/h2>\n\n
Lettertypes en de impact op je identiteit<\/strong><\/h3>\n\n\n
Zo kies je een lettertype<\/strong><\/h3>\n\n\n
\n
<\/figure>\n\n\n\nLettertype grootte en schaal<\/strong><\/h3>\n\n\n
Tekst kleur en regelhoogte<\/strong><\/h3>\n\n\n
Breedte van je tekst kolom<\/strong><\/h3>\n\n\n
3. Kleuren<\/strong><\/h2>\n\n
Kleur: eenvoud en consistentie wint<\/strong><\/h3>\n\n\n
Hoe maak je een kleurenpalet<\/strong><\/h3>\n\n\n
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.<\/p>\n\n\n\n
Meestal wil je hiervoor een spectrum van grijstinten kiezen. Deze kunnen “grijs grijs” zijn, maar ook een warme of koude tint hebben.<\/p>\n\n\n\n
Je achtergrond kleuren zijn meestal de lichtste kleuren op je website. Meestal wit of lichtgrijs, maar je kunt ook voor andere lichte kleuren kiezen.<\/p>\n\n\nHandige kleuren tools<\/strong><\/h3>\n\n\n
\n
4. Afbeeldingen<\/strong><\/h2>\n\n
Het belang van afbeeldingen<\/strong><\/h3>\n\n\n
Waar vind je afbeeldingen?<\/strong><\/h3>\n\n\n
De eenvoudigste manier om aan afbeeldingen te komen. Mijn favoriete sites:<\/p>\n\n\n\n\n
Tijdrovender, maar je krijgt 100% originele afbeeldingen die echt meerwaarde bieden aan je website.<\/p>\n\n\n\n
Voor software handleidingen of reviews. Dit maakt je content veel overtuigender en gemakkelijker te volgen.<\/p>\n\n\n\n5. User experience (UX)<\/strong><\/h2>\n\n
Wat is user experience?<\/strong><\/h3>\n\n\n
Navigatie<\/strong><\/h3>\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n\n
Snelheid<\/strong><\/h3>\n\n\n
\n
\n
Volgende stappen<\/strong><\/h2>\n\n\n