Best practices, tips & richtlijnen in webdesign die je moet kennen

8 Min.
Beste praktijken voor webontwerp

Wat zijn de best practices in webdesign? Hoe implementeer je ze succesvol in jouw volgende webdesign project? En wat definiëren we eigenlijk als designstandaard en best practices in webdesign?

Wat bedoelen we eigenlijk met "beste praktijken"?

Er zijn vaste regels in web development, die vooral te maken hebben met de leesbaarheid en zuiverheid van de code en de veiligheid van een website. Bij webdesign daarentegen is de terminologie wat vager en staan de regels wat meer open voor eigen interpretaties.

Beste Praktijken: Webdesign is meer dan esthetiek

Best practices in webdesign zijn een mix van visueel design, user experience design, accessibility en content writing - met een focus op SEO.

Best practices in webdesign zijn een reeks regels die moeten worden gevolgd om aan de algemene verwachtingen van de gebruikers te voldoen. Bovendien zijn het richtlijnen voor meer duidelijkheid en een betere gebruikerservaring.

In dit artikel presenteer ik de best practices voor goed webdesign. Voor elk gebied geef ik je tips over hoe je meer kennis kunt vergaren en laat ik hulpmiddelen en voorbeelden zien die jou bij het volgende project helpen.

Ik zal ook kort ingaan op het onderwerp van de beste practices op het gebied van WordPress Development. Zoals je ongetwijfeld weet, vormen projectplanning en projectmanagement een belangrijk onderdeel van webdesign. In dit artikel laat ik beide onderwerpen voorlopig buiten beschouwing, omdat het artikel anders te uitgebreid wordt.

Beste Praktijken: Visueel Ontwerp

We beginnen nu met de gevestigde standaards voor visueel design: Wat zijn de best practices op het gebied van visueel ontwerp? En welke factoren spelen daarbij een rol?

Herkenbare eigenschappen en branding

De website moet passen bij de rest van de uitstraling van het bedrijf en moet zich oriënteren aan de stijlgids. Controleer de website op de volgende vragen:

  • Kun je op het eerste gezicht herkennen voor welk bedrijf de website gemaakt is?
  • Is de stijlgids geïntegreerd?
  • Zijn de websitebeheerders herkenbaar aan de visuele elementen?
  • Worden de visuele elementen consequent gebruikt?
  • Weerspiegelt het taalgebruikt op de website de branding?

Google loopt ver voorop als het gaat om consistente branding. Ik kan zo uit mijn hoofd geen ander merk bedenken dat zoveel verschillende producten heeft en er toch in slaagt elk product de sfeer van het bedrijf te geven. Zelfs wanneer ik naar een tot dusver onbekend Google-product kijk, kan ik het direct met het merk associëren.

Hoe doet Google het?

Onder andere door consistent gebruik van Google kleuren, typografie, onderscheidende whitespace, consistente Call To Actions (CTA) en navigatie. De logo's laten ook een zekere consistentie zien die overkoepelt voor bedrijven en categorieën werkt - hoewel dit laatste niet noodzakelijkerwijs betekent dat het ontwerp iedereen kan bekoren.

Met consistentie in de branding analyseer je eerst alleen maar of de website het bedrijf en de branding optimaal weerspiegelt.

Webdesign Standard und Usability

Een andere "best practice" wordt gedefinieerd door de integratie van standaards. Dit omvat bijvoorbeeld de plaatsing van het logo in de linkerbovenhoek, het uiterlijk van buttons, links enzovoort. Deze helpen de bezoekers van je site om snel en gemakkelijk hun weg te vinden. Daarom zijn deze standaards onmisbaar bij de implementatie van een succesvolle usability.

Verdere bronnen op het gebied van usability:

Waarom zou je als webdesigner geïnteresseerd zijn in usability en user experience? U kunt meer uitgebreide benaderingen van het onderwerp bruikbaarheid vinden in dit artikel en op https://www.usability.gov/.

Wat is een standaard voor webdesign?

Wij definiëren veelgebruikte ontwerpnormen in webontwerp door UI-ontwerppatronen. Hoe standaarden worden gedefinieerd, legt Andy Crestodina zeer begrijpelijk uit in zijn artikel over webdesign standaarden.

Volgens hem moet een designbenadering op tenminste 80 procent van de websites gebruikt worden om als standaard te gelden. Al het andere is ofwel een gewoonte (50-79 procent) of brengt zelfs inconsistentie en verwarring (0-49 procent) op je site.

Harmonieus design: de regel van derden

Ik heb reeds verslag uitgebracht over het onderwerp harmonieus webdesign. Deze keer wil ik wat dieper ingaan op de regel van derden.

Deze wordt al enkele honderden jaren gebruikt - voornamelijk op het gebied van de schone kunsten en later in de fotografie. Hier is het ontwerp, zoals de tekening laat zien, verdeeld in 9 even grote hokjes:

Interactie Ontwerp
Bron: interactie-ontwerp

Bij het maken van websites helpt de regel van derden vooral bij het plaatsen van de belangrijkste informatie op zo'n manier dat de bezoeker deze direct kan waarnemen. 

Simpel gezegd mag een visueel element niet meer dan drie hokjes in beslag nemen en moet het zich op een derde van de lay-out bevinden. De knooppunten zijn ook bijzonder geschikt voor het plaatsen van belangrijke boodschappen en Call-To-Actions.

In Photoshop kun je het "Uitsnijden gereedschap" en de "Regel van derden" instelling gebruiken om snel en gemakkelijk je lay-outs te controleren en aan te passen. Om de Regel van Derden te illustreren, nam ik een kijkje op de website van Marqeta:

Best practices

Het product en zijn boodschap zijn goed verspreid over de knooppunten. Hier kan het ontwerp iets efficiënter worden gemaakt door de CTA een beetje te verschuiven. Maar de harmonie van het ontwerp zou daaronder te lijden hebben:

Best practices

De mobiele versie laat duidelijk zien dat de boodschap het onderste derde deel van de lay-out vult, terwijl het product redelijk gecentreerd wordt weergegeven. Hier kunnen we de plaatsing van de CTA nog eens overdenken.

Zogenaamde "heatmaps" helpen u ook te achterhalen waar de bezoekers van uw site vooral kijken en klikken. De tool Crazy Egg, bijvoorbeeld, biedt hier een (betaalde) dienst aan.

Een andere manier om uw ontwerp te controleren is de zogenaamde onscherpheidstest. Hier haal je de scherpte uit je opmaak (bijvoorbeeld met behulp van Photoshop en de "Gaussian Blur" - 12 procent). Als gebruikers de inhoud niet meer kunnen lezen, wordt het snel duidelijk waar de focus ligt bij het bekijken van de website. Deze test is ook zeer geschikt voor het analyseren van de CTA. Is het nog als zodanig herkenbaar?

Best-Practices-in-Web-Design

Hiervoor heb ik opnieuw de website van Marqeta gebruikt. Vooral prominent is de rechter CTA en het product, gevolgd door de boodschap en tenslotte het logo en de tweede CTA:

Best-Practices-in-Web-Design

De mobiele versie heb ik nog meer geblurred om te testen wat er nog van over blijft. Hier springt het product als eerst in het oog, gevolgd door de CTA en het logo. Je kunt deze test met de hele site doen - het beste in de ontwerpfase. Hier kun je snel en eenvoudig analyseren welke elementen van jouw design prominent aanwezig zijn en beslissen of dit is wat je wilt.

Text en SEO

Het maken van websites omvat uiteraard ook geschreven inhoud. Hiervoor zijn er weliswaar professionele copywriters die - met het oog op SEO, usability en styleguide - zinvolle content voor je website schrijven. Maar er zijn ook een paar richtlijnen die je zelf kunt volgen. 

Je moet hierbij vooral letten op de lengte en de leesbaarheid van de teksten - vaak zijn die te uitgebreid en te gecompliceerd. 

Zelfs als de doelgroep gewend is aan een bepaald jargon, moet je je er altijd van bewust zijn dat onze aandachtsspanne op een website veel kleiner is dan bijvoorbeeld bij het lezen van gespecialiseerde artikelen. We zijn eerder op zoek naar specifieke informatie bij het surfen op websites. De kans is groter dat we de inhoud scannen dan dat we de tijd nemen om het goed te lezen.

Google geeft je ook minpunten als de zinnen op je pagina te lang zijn en pluspunten als ze verbonden zijn door zogenaamde"overgangswoorden".

Interessante bijdragen over het onderwerp SEO zijn ook:

Accessibility

De toegankelijkheid van het internet is helaas nog steeds een marginaal onderwerp - en wordt te vaak genegeerd. Er zijn ook eenvoudige benaderingen waarmee we vanaf het eerste design rekening kunnen houden. Gebruik je bijvoorbeeld vooral kleuren om informatie te accentueren? 

Je kunt dit eenvoudig testen door je website in zwart-wit te bekijken:

Best-Practices-in-Web-Design

Hiervoor heb ik dezelfde website nog een keer geanalyseerd. Zelfs zonder kleuren is de boodschap duidelijk. De CTA rechtsboven kan problematisch worden met betrekking tot het contrast.

Om dit met zekerheid te controleren, is er de "Contrast Checker". De standaard contrastverhouding is ten minste 4,5:1 voor normale tekst en 3:1 voor grote tekst zoals koppen:

Best-Practices-in-Web-Design
Best-Practices-in-Web-Design

Als ik de grijstinten aangeef, is de CTA niet rijk genoeg aan contrast, maar de kleurvariant is voldoende.

http://colorsafe.co/ is een ander instrument om kleuren en hun contraststerkte te bepalen. Hier kunt u direct verschillende kleurencombinaties uitproberen. U krijgt direct de verhouding en u hebt de mogelijkheid om lettertypes te selecteren met en ook volgens welke WCAG-norm u uw selectie wilt uitlijnen.

Er kunnen problemen ontstaan met het gebruik van kleuren voor de visuele weergave van error-handlings. Laten we bijvoorbeeld vormelementen nemen. Fouten worden hier vaak weergegeven door het invoerveld in kleur te markeren. Dit kan ertoe leiden dat iemand met kleurenblindheid de fouten niet kan herkennen en dus ook niet kan oplossen. 

Bij de planning moet u hiermee rekening houden en er dus altijd voor zorgen dat een andere weergave van de fout beschikbaar is. Hier vindt u meer interessante feiten en bronnen over toegankelijkheid, evenals waardevolle tips voor het maken van een toegankelijke WP-site.

Andere middelen

Resolutie en cross-device design

Er is waarschijnlijk geen regel in webdesign die vaker aan de orde komt - en vaker wordt genegeerd - dan "mobile first”.

Bij deze aanpak wordt de inhoud voor mobiele apparaten gecreëerd en vervolgens aangepast aan de grotere apparaten. Het tegenovergestelde is om het ontwerp op desktops en dergelijke af te stemmen en deze vervolgens aan te passen op kleinere apparaten. 

Twee andere benaderingen komen in me op:

  • Een aparte website voor elk mobiel en desktopapparaat maken en deze vervolgens bezoeken.
  • De website als een desktopversie op je mobiele telefoon weergeven

De eerste benadering kan - afhankelijk van het project - de juiste zijn, maar is niet erg wijdverbreid omdat zij zeer kosten- en tijdintensief is. Dit laatste komt helaas nog te vaak voor op het web en moet daarom dringend worden toegevoegd aan de lijst van "beste praktijken". Meer tips voor mobiele optimalisatie vindt u hier.

Mobile first hoeft niet altijd de juiste manier te zijn: onderzoek naar de doelgroep en hun internetgedrag kunnen al snel laten zien welke apparaten vooral gebruikt worden om toegang te krijgen tot je site. 

Het idee hierachter is niet alleen dat de inhoud visueel wordt voorbereid, maar ook dat rekening wordt gehouden met de gewijzigde externe omstandigheden. U kunt meer lezen in het artikel Mobile-First UX Design Is No Longer a Trend.

De volgende tabel laat duidelijk zien welke schermen worden gebruikt om vaker toegang te krijgen tot het internet. Dit kan je helpen bij het beslissen voor welke screensizes je je websites wilt optimaliseren. Maar hou er rekening mee dat een dergelijke veralgemening slechts een richtlijn is. Een analyse van jouw doelgroepen kan deze statistieken niet vervangen.

Best-Practices-in-Web-Design
Bron : https://www.hobo-web.co.uk/best-screen-size/

Best practices voor WordPress

WordPress Codex

WordPress biedt ongekend veel mogelijkheden om jouw designs op het internet te presenteren. Maar ook hier zijn er standaards en best practices waar je je naar moet richten.

De WordPress Codex

WordPress stelt hiervoor een algemene codex ter beschikking, die je kan helpen om het onderwerp nader te bekijken.

WordPress Plugins en Themes

Bij de keuze van de juiste plugins en themes is niet alleen de huidige functionaliteit van belang. Het is ook een goed idee om recensies te lezen en vertrouwd te raken met hoe vaak er updates aangeboden werden en om te weten te komen of de plugin of het theme ook in de toekomst verder zal worden ontwikkeld. WordPress tools die regelmatig verder worden ontwikkeld hebben meestal een actievere support. De kans dat ze met toekomstige versies van je site compatibel blijven is bovendien ook groter.

WordPress Updates en Security

Het regelmatig updaten van je themes en plugins vermindert de kwetsbaarheid voor ongewenste toegang. Bugs worden opgelost en je websites worden aan de steeds veranderende technische omgeving aangepast. Security plugins en WordFence helpen ook om een overzicht over je site en de beveiliging ervan te houden en tijdig op problemen te reageren. Een SSL-certificaat zou op elke website geïntegreerd moeten worden. 

Best practices in webdesign: jouw vragen

Welke vragen heb je voor Sonja? Welke beste praktijken kunt u zelf aanbevelen? Voel je vrij om de commentaarfunctie te gebruiken. Wilt u meer tips over webontwerp en -ontwikkeling? Volg ons dan op Twitter, Facebook of via onze nieuwsbrief.

Na haar studie Game Design en Creative Writing in het groene Auckland heeft Sonja Hoffmann zich gespecialiseerd in web- en app-desgign en de ontwikkeling daarvan. Haar focus ligt op gamification en het verkennen van gebruikersmotivatie en ervaring, gekoppeld aan haar passie en nieuwsgierigheid voor technologische trends.

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.