Stel je voor dat je een winkel binnenloopt op zoek naar nieuwe werkkleding. Je ziet vlekken op de vloer, ongeorganiseerde schappen en ruikt een vreemde geur terwijl je rondkijkt. Zou je in de winkel blijven en bij de winkelier kopen?
Het ontwerp van een winkel beïnvloedt hoe klanten zich gedragen – hetzelfde geldt voor websites.
Uit een onderzoek van Clutch onder 612 mensen bleek dat 83% van de deelnemers het opmerkt als het ontwerp van een website esthetisch mooi en actueel is. Anderzijds zou 50% van de deelnemers een website voorgoed verlaten als ze vinden dat de content irrelevant is of niet aan hun behoeften voldoet.
Dus, hoe ontwerp je een website die klanten leuk vinden?
Daarover gaat dit artikel. We laten je zien waarom goed webdesign essentieel is en delen 15 webdesignprincipes die je kunt gebruiken om een website van hoge kwaliteit te bouwen.
Bekijk onze videohandleiding over webdesignprincipes
Waarom is goed webdesign belangrijk?
De gemiddelde webdesigner verdient jaarlijks 57.000 dollar – ongeveer 8.000 dollar meer dan junior webdevelopers die gemiddeld 44.000 dollar per jaar verdienen. Ontwerpers worden redelijk goed betaald om een goede reden: hun werk is van vitaal belang.
Wanneer een nieuwe lead je website bezoekt, is dat de eerste indruk die de toekomstige interacties met je merk bepaalt. Op dat moment ontwikkelen ze hun eerste mening over jou.
Je website brengt ook de identiteit, visie en positie van je merk binnen de branche over. Als je naaste concurrenten hebt met een vergelijkbaar product, zal een website die mensen “wow” laat zeggen je meer bijblijven en je naamsbekendheid vergroten boven de concurrentie.
Bovendien kan een sterke website je inspanningen voor search engine optimization (SEO) verbeteren.
Zoekmachines bekijken hoe mensen reageren op websites bij het ranken ervan in de zoekresultaten. Als je bouncepercentage laag is en mensen vaak meerdere pagina’s op je site bezoeken, zullen zoekmachines je waarschijnlijk hoger plaatsen dan een concurrent met een hoog bouncepercentage.
Technische SEO is hier ook belangrijk. Websites met goed ontworpen titels, paginastructuren en links zijn toegankelijker. Zowel zoekmachines als klanten geven er dus de voorkeur aan. Laten we eens kijken naar enkele belangrijke webdesignprincipes.
15 principes van effectief webdesign
Als we het hebben over “webdesignprincipes”, dan verwijzen we naar algemene regels voor het ontwerpen van de texturale en visuele elementen van een website of webpagina. Elk merk omarmt webdesignprincipes anders – sommige in overeenstemming met best practices en andere niet.
Om je te helpen een uitstekende website te maken, zijn hier 15 webdesignprincipes (plus voorbeelden van websites die ze effectief gebruiken):
1. Pagina’s moeten gemakkelijk te navigeren zijn
In het onderzoek van Clutch naar gebruikerservaringen op websites beschouwde 94% van de deelnemers de websitenavigatie als de “belangrijkste websitefeature”
Het is geen verrassing waarom. Als een gebruiker van een zoekmachine op je website komt op zoek naar informatie over “mobiel ontwerp” en die niet kan vinden, is de logische volgende stap om “terug” te klikken en een andere website te proberen.
Hoe krijg je een goed geplande navigatie? Laat je inspireren door de website van The Cool Club.
Als je op de homepage van The Cool Club komt, is de lay-out van de website uiterst overzichtelijk. Je kunt met de knoppen aan de linkerkant naar de belangrijkste productonderdelen navigeren (zoals “card games” en “bucket list”), en met de knoppen aan de rechterkant naar de pagina’s “about” en “contact”.
De productpagina’s van The Cool Club zijn ook heel gemakkelijk te navigeren. Het merk heeft momenteel een interactief kaartspel met 54 coole variaties en bijbehorende pagina’s. Je scrolt simpelweg naar beneden en klikt op de kaart waarvan je meer wilt zien.
Om een even effectieve website te maken, sorteer je de content in duidelijke categorieën voor je headers en footers en geef je ze beschrijvende titels. Rangschik je pagina’s vervolgens op onderwerp, zodat mensen gemakkelijk tussen soortgelijke onderwerpen kunnen navigeren.
Maak je header en footer bovendien consistent in je hele website.
2. Maak altijd gebruik van negatieve ruimte
Negatieve ruimte (of “witruimte”) is het gebied rond de onderwerpen van een pagina, of dat nu afbeeldingen, video’s, tekst of knoppen zijn.
Veel enthousiaste marketeers vullen maar al te graag elke vrije ruimte op een pagina, in de hoop dat het geven van meer informatie bezoekers meer betrokken zal maken. Dit leidt echter vaak tot overweldigende en verwarrende pagina’s.
Daar komt negatieve ruimte om de hoek kijken. Het gebruik van negatieve ruimte benadrukt de meest kritische elementen van elke pagina, omdat het gebrek aan kleur de ogen van de bezoeker naar heldere delen trekt.
Natuurlijk betekent “negatieve ruimte gebruiken” niet “een saaie witte website maken” In plaats daarvan kun je de ruimte benutten door je merkkleuren te gebruiken, net als Garoa doet.
De homepage van Garoa gebruikt een crème-achtig palet om sfeer op te bouwen en toch gebruik te maken van negatieve ruimte. Het resultaat is dat je ogen naar de inleidende content in het gedeelte “skincare for autumn” in het midden gaan in plaats van naar de minder belangrijke delen.
Maak ook op je eigen website gebruik van witruimte om hiërarchie aan te brengen.
3. Pagina’s moeten consistent, maar boeiend zijn
Als je merken leest als “Cadbury,” “Hershey’s,” of “Nike,” denk je waarschijnlijk meteen aan hun logo’s, lettertypes en ontwerpstijlen. Dat is de kracht van een consistente huisstijl.
Maak bij het ontwerpen van je websitepagina’s met consistente elementen om je merk een duidelijke visuele identiteit te geven. Dat betekent:
- Dezelfde lettertypen, stijlen en kleuren gebruiken in alle headers
- Spaties tussen visuele elementen op pagina’s hetzelfde houden
- Kleurpaletten gebruiken in plaats van willekeurige kleuren
- Richtlijnen opstellen voor de opmaak van lange content zoals nieuwsberichten en blogberichten
- Een webtemplate gebruiken voor alle pagina’s
Consistente pagina’s hoeven er niet helemaal uniform uit te zien. In plaats daarvan kun je consistentie en betrokkenheid in evenwicht brengen door elementen door elkaar te gebruiken.
Je kunt bijvoorbeeld verschillende lettertypen en kleuren gebruiken voor H1, H2 en H3 koppen. je kunt de lay-out van verschillende soorten pagina’s veranderen, om de boel af te wisselen.
4. Omarm complementaire kleuren
Complementaire kleuren zijn kleurenparen die je kunt mengen zonder dat je ontwerp er overweldigend en lelijk uitziet.
De manier waarop kleuren op een scherm worden weergegeven volgt het Rood, Groen en Blauw (RGB) kleurenmodel in plaats van het Cyaan, Magenta, Geel en Zwart (CMYK) model dat bij drukken wordt gebruikt. Schilders gebruiken ook vaak het Rood-Geel-Blauw (RYB) kleurenmodel dat complementaire kleuren beschouwt als rood-groen, blauw-oranje en geel-paars.
Welk model je ook verkiest, het gebruik van complementaire kleuren heeft hetzelfde doel als zwart en wit. Complementaire kleuren geven nadruk en creëren een duidelijke visuele identiteit voor je merk.
Je kunt dit zien op de website van Swab The World.
In de screenshot hieronder gebruikt de liefdadigheidsinstelling voor bloedkanker groen en tinten magenta. Deze kleuren veranderen in andere complementaire kleurencombinaties wanneer je verschillende websiteonderdelen bezoekt (hoewel alle kleuren een vergelijkbare verzadiging hebben, zodat de branding consistent blijft).
Complementaire kleuren zijn een gemakkelijk principe om te gebruiken in je ontwerp. Als je het eenvoudig wilt houden, kies dan twee complementaire kleuren en voeg ze toe aan contrasterende elementen (zoals een H2 en bodytekst). Of gebruik meerdere tinten van elke kleur op elke pagina.
5. Ontwerp met je doelgroep in gedachten
Als je de websites van The Cool Kids, Garoa en Swab The World bekijkt, zie je dat elke website een unieke “feel” heeft. Die feel ontstaat door het ontwerp van de website af te stemmen op het publiek.
Personalisatie is hier het uiteindelijke doel. De meesten van ons kopen graag producten en diensten van merken waarmee we ons verbonden en vertegenwoordigd voelen. Uit onderzoek blijkt zelfs dat 72% van de consumenten waarde hecht aan het kopen bij bedrijven die “aansluiten bij hun overtuigingen en waarden.” Dus als iemand je website bezoekt en daar zijn waarden, doelen en prioriteiten terugziet, is de kans groter dat hij bij je koopt.
Om het ontwerp van je website af te stemmen op je publiek, kun je het volgende overwegen:
- Welke beelden resoneren specifiek met je doelmarkt
- Welke toon werkt voor je publiek (bijvoorbeeld professioneel, minimalistisch, sprankelend, enz.)
- Voor welke onderwerpen je doelgroep naar je website komt
- Hoe je je merkpositionering kunt overbrengen via je webdesign
- Op welke calls-to-action (CTA’s) je publiek reageert (en waar je ze moet plaatsen om je click-through rate (CTR) te optimaliseren)
Bonuspunten als je website automatiseringen kunt gebruiken om een persoonlijke ervaring te leveren op basis van het profiel van de gebruiker en eerdere interacties met je merk.
Het kan nuttig zijn om inspiratie op te doen bij concurrenten of merken die andere dingen verkopen aan je doelgroep.
6. Lettertypen moeten leesbaar en toegankelijk zijn
De lettertypen die je gebruikt op je website bepalen of je bezoekers kunnen lezen wat je hebt geschreven of niet. Het is duidelijk dat ze erg belangrijk zijn.
Het eerste waar je aan moet denken bij het kiezen van een lettertype is webveiligheid. Webveilige lettertypen worden ondersteund door besturingssystemen en webbrowsers, zodat ze op de meeste apparaten werken.
Je moet ook rekening houden met toegankelijkheid. Toegankelijke lettertypen moeten duidelijk en gemakkelijk te lezen zijn in grote en kleine afmetingen. Zo zijn cursieve lettertypen niet erg toegankelijk, terwijl Times New Roman redelijk toegankelijk is.
Let bovendien bij het kiezen van een lettertype op trends van lettertypen op andere websites. In 2021 analyseerde datawetenschapper Michael Li de lettertypes op meer dan 1000 websites. Hij vond de volgende trends:
- 85% van de lettertypes gebruikt geen serifs (de kleine toegevoegde lijntjes aan letters in lettertypes die je bij kranten vaak ziet)
- De top vijf lettertypes zijn Sans Serif, Arial, Helvetica, Helvetica Neue en Roboto
- H1 headers hebben 58% kans om geen serifs te hebben (vergeleken met 93% voor paragraaftekst)
- De twee meest gebruikelijke groottes voor alinealettertypen zijn 14 px en 16 px
Je zou ervoor kunnen kiezen deze informatie te omarmen om een lettertypestijl te kiezen die aansluit bij wat mensen zoeken in websites. Of je zou ervoor kunnen kiezen om iets anders te doen.
Virgin is een merk dat voor de tweede optie koos. Virgin gebruikte minstens vijf lettertypen in de screenshot hieronder. Deze lettertypen scheiden secties van de pagina en zorgen ervoor dat ze er boeiend uitzien.
7. Volg de Wet van Fitt en de Wet van Hick
Psycholoog Paul Fitts ontwikkelde de Wet van Fitt voor het eerst in 1954, maar hij is nog steeds zeer relevant voor webdesign in 2022. De Wet van Fitt stelt dat de grootte van een doel beïnvloedt hoeveel tijd iemand nodig heeft om het te bereiken.
In de context van webdesign of User Experience (UX) betekent dit dat het mensen minder tijd kost om op grotere knoppen te klikken of meer tijd om op kleinere knoppen te klikken. Om gebruik te maken van de Wet van Fitt moet je je CTA knoppen dus extreem groot en prominent maken, zodat ze gemakkelijker aan te klikken zijn.
“Gemakkelijk” is hier cruciaal. De Wet van Hick, ontwikkeld door de Britse psycholoog William Edmund Hick en de Amerikaanse psycholoog Ray Hyman, zegt dat mensen vermoeid raken telkens als ze iets beslissen.
Kortom, hoe meer beslissingen je van een websitebezoeker vraagt, hoe groter de kans dat ze te moe worden om door te gaan.
8. Gebruik invariantie om belangrijke informatie te benadrukken
Als iets “invariant” is, onderscheidt het zich als een unieke optie tussen meerdere zeer vergelijkbare opties. Het duidelijkste voorbeeld van invariantie is het benadrukken van abonnementen op prijspagina’s zoals deze van Box.
Maar dat is niet de enige manier waarop je invariantie kunt gebruiken. Met invariantie kun je een visuele hiërarchie op je pagina’s aanbrengen om belangrijke informatie te benadrukken en mensen naar belangrijke delen van je pagina te trekken.
Kijk bijvoorbeeld eens hoe het Frans Hals Museum invariantie gebruikte om een visuele hiërarchie aan te brengen op zijn homepage:
De hiërarchie in deze afbeelding is als volgt: het “welcome” teken, de afbeeldingen, het “buy tickets” teken, het “all exhibitions” teken, dan de overige content.
Om invariantie te gebruiken om je eigen hiërarchie te maken, rangschik je pagina elementen in volgorde van belangrijkheid. Pas dan de grootte, kleur en plaatsing van elk element aan totdat de ogen van de bezoekers naar elk element gaan in de volgorde die jij wilt.
9. In CTA’s: gebruik duidelijke taal waar mensen op willen klikken
We bespraken het belang van grote en gemakkelijk aan te klikken knoppen, maar de grootte is niet het enige waar je rekening mee moet houden bij het maken van knoppen.
Klikbare knoppen zijn beschrijvend en overtuigend tegelijk. Ze maken de bezoeker nieuwsgierig naar waar de knop naar verwijst, en ze geven hem een reden om erheen te gaan.
Eén manier om dit te doen is door gedetailleerde knoptekst te gebruiken zoals “klik hier om onze blog te lezen,” “vind hier onze marketinggeheimen,” of “hier is ons 2022 rapport.” Een andere is om je knoppen visueel spannend of uniek te maken.
Rainforest Protector heeft voor beide benaderingen gekozen. Rainforest Protector laat je door het Amazoneregenwoud navigeren door verschillende locaties te bezoeken. De knop van elke locatie bevat een afbeelding en een actie zoals “bezoek het dorp”
10. Maak gebruik van het F-patroon of het Z-patroon
Gedurende 13 jaar gebruikten onderzoekers van de Nielsen Norman Group (NN Group) eyetracking om te zien hoe 500+ mensen met content omgaan. Dit leidde hen tot de ontwikkeling van het F-patroon, dat zegt dat het eerste wat mensen doen is de pagina naar beneden scannen, daarna lezen ze in lijnen van links naar rechts. Als volgt:
Je kunt het F-patroon op je website benutten door je content eromheen te structureren of een alternatief model.
Facebook is beroemd om het Z-vormige patroon op zijn homepage. Als je de pagina bezoekt, gaan je ogen naar het “Facebook” logo, dan naar de “login” knop, dan naar de afbeelding links, en tenslotte naar de “create an account” knop.
11. Goede websites zijn snel en mobielvriendelijk
Vanaf het vierde kwartaal van 2021 kwam wereldwijd 54,4% van het websiteverkeer van een mobiel apparaat. Dus als je website niet mobielvriendelijk is, kun je je verkeer halveren.
Snelheid is ook van invloed op organisch websiteverkeer. Uit onderzoek van Google blijkt dat 53% van de mensen een website verlaat als die langer dan drie seconden laadt.
De gemakkelijkste manier om je website mobielvriendelijk of snel te maken is door een snel websitethema te kiezen dat gemaakt is door deskundige ontwerpers. Of, als je meer betrokken wilt zijn bij het ontwerp van je website, kun je een responsieve website op maat bouwen.
Dat is wat de ontwerpers achter de film 1917 deden. de website van 1917 levert een meeslepende ervaring om mensen bij de film te betrekken. Hij is speciaal ontworpen voor mobiele apparaten, want je kunt je vinger gebruiken om je te verplaatsen in de loopgraven van de Eerste Wereldoorlog.
Als je oplet, zie je dat de website van 1917 ook gebruik maakt van het F-patroon.
12. Breek tekst op in hapklare brokken
Ga maar na: je zoekt op “denkspelletjes” en vindt een webpagina die veelbelovend lijkt. Maar als je erop klikt, word je overweldigd door grote stukken tekst die moeilijk te lezen zijn.
Zoals veel mensen klik je de website misschien af (hoe veelbelovend de content ook is!).
Eye-tracking onderzoek van de Missouri University of Science and Technology toont aan dat websitebezoekers gemiddeld 5,59 seconden besteden aan het lezen van tekst. Dus, als mensen je tekst niet in die tijdspanne kunnen lezen, is het onwaarschijnlijk dat je ze goed zult weten te boeien.
Los dit probleem op door je tekst in kleine stukjes te verdelen. Bovendien:
- Gebruik korte zinnen
- Blijf weg van spreektaal
- Geef definities voor alle specifieke woorden die je in de sector gebruikt
- Vermijd ‘purple prose’ (onnodige metaforen, bijwoorden en bijvoeglijke naamwoorden)
13. Gebruik rasters
Als we zeggen “gebruik rasters”, bedoelen we niet dat je je website op een Excel tabel moet laten lijken. Verdeel je website in plaats daarvan in verschillende secties die een specifiek doel dienen, zodat bezoekers snel de content kunnen vinden.
Daarvoor hoef je geen rasterlijnen te gebruiken. Maak in plaats daarvan onderscheid tussen rasterruimtes met kleur, negatieve ruimte en schaduw, zoals Atlason heeft gedaan. De homepage van Atlason toont nieuwe en best verkochte producten in rasters. Omdat bezoekers waarschijnlijk op zoek zijn naar deze producten, helpen de rasters hen om ze binnen enkele seconden te vinden.
Een van de gemakkelijkste manieren om rasters op je website te gebruiken is door een WordPress thema te kiezen dat ze gebruikt. Voorbeelden zijn Gridframe, Masonry Grid en Shuttle Grid.
14. Denk aan balans
In de context van webdesign verwijst “balans” naar de manier waarop ontwerpelementen ten opzichte van elkaar staan en of de elementen harmonie uitstralen. Er zijn veel manieren om balans op je website te creëren, waaronder enkele van deze webdesign principes:
- Door symmetrie (inclusief bilaterale, radiale of translationele symmetrie)
- Door complementaire of contrasterende kleuren te gebruiken
- Door elementen van gelijke vorm en grootte te gebruiken
- Gebruik van zich herhalende patronen
Je kunt balans in actie zien op de website van Woven. Deze website gebruikt een evenwichtig kleurenpalet, zwart en wit om contrast in de tekst te creëren, en symmetrie om de aandacht van bezoekers op de inhoud te content.
15. Besteed aandacht aan details
De Gestalt theorie zegt dat mensen iets als een geheel waarnemen voordat ze naar individuele elementen kijken. Of, zoals Kurt Koffka zei: “Het geheel bestaat onafhankelijk van de delen.” Hoewel mensen de Gestalttheorie meestal gebruiken voor psychologie, is ze ook van toepassing op webdesign.
Je moet aandacht besteden aan de kleine details op je website om ervoor te zorgen dat je ontwerp er gepolijst en compleet uitziet. Als je iets ontwerpt, is het gemakkelijk om je te concentreren op belangrijke elementen als koppen, afbeeldingen en CTA’s en andere dingen te vergeten:
- Footer- en headerpictogrammen
- Knoppen voor social media
- Hoe effectief je je website hebt omgezet naar WordPress (indien van toepassing)
- Tekstspatiëring
- Typo’s en grammaticafouten
- Browsercompatibiliteit
- Grootte van afbeeldingen
Dubbelcheck deze elementen voordat je op “Publiceren” drukt en zorg ervoor dat je website professionaliteit uitstraalt. Jij ziet misschien kleine foutjes over het hoofd, maar bezoekers niet.
Blijf bovendien op de hoogte van nieuwe trends en concepten in webdesignprincipes. Als je deze aan je website toevoegt, blijft hij er nieuw, fris en aantrekkelijk uitzien.
Samenvatting
Een goed ontworpen winkel verbetert de klantervaring, terwijl een slecht ontworpen winkel klanten voorgoed van je merk kan afhouden. Zo is het ook met webdesign.
Het bouwen van een visueel aantrekkelijke website is meer dan een leuk project. Het kan je helpen:
- Professionaliteit overbrengen
- Vertrouwen wekken bij je bezoekers
- Je onderscheiden van je concurrenten
- Organisch verkeer van zoekmachines aantrekken
Gebruik de webdesignprincipes in dit artikel om een website te bouwen die bezoekers “wow” laat zeggen.
Nu we alles wat we weten over webdesign hebben behandeld, horen we graag van jou. Wat valt jou op als je de website van een merk bezoekt? Gebruik je bovendien principes die we niet genoemd hebben op je website? Vertel het ons in de comments hieronder.
Laat een reactie achter