Best practices, tips & richtlijnen in webdesign die u moet weten

8 Min.
Best practices voor webdesign

Wat zijn de best practices in webdesign? Hoe implementeert u ze met succes in uw volgende webdesign project? En wat definiëren we eigenlijk als designstandaard en best practices in webdesign?

Wat verstaan we eigenlijk onder "best practices"?

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

Best practices: Webdesign is meer dan alleen esthetiek

Best practices in webdesign zijn een mix van visueel design, user experience design, toegankelijkheid en het schrijven van content - 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. Het zijn ook richtlijnen voor meer duidelijkheid en een betere gebruikerservaring.

In dit artikel presenteer ik u de best practices voor goed webdesign. Voor elk gebied geef ik u tips over hoe u meer kennis kunt vergaren en hoe u hulpmiddelen en voorbeelden kunt presenteren om u te helpen bij uw volgende project.

Ik zal ook kort ingaan op het onderwerp van de beste praktijken op het gebied van WordPress Ontwikkeling. Zoals u ongetwijfeld weet, vormen projectplanning en projectmanagement een belangrijk onderdeel van het webdesign. In dit artikel laat ik beide onderwerpen voorlopig buiten beschouwing, omdat dit buiten het bestek van dit artikel zou vallen.

Best practices: Visueel ontwerp

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

Herkenningskenmerk en branding

De website moet passen bij de rest van de uitstraling van het bedrijf en moet de stijlgids volgen. Kijk op de website voor de volgende vragen:

  • Kunt u op het eerste gezicht zien voor welk bedrijf de website is gemaakt?
  • Is de stijlgids geïntegreerd?
  • Zijn de websitebeheerders herkenbaar aan de visuele elementen?
  • Worden de visuele elementen consequent gebruikt?
  • Is de taal die op de website wordt gebruikt een weerspiegeling van de branding?

Google staat in de voorhoede van een consistente branding. Ik kan geen enkel ander merk bedenken dat zoveel verschillende producten heeft en er toch in slaagt om elk product het bedrijfsgevoel te geven. Zelfs als ik naar een Google-product kijk dat ik nog nooit eerder heb gezien, kan ik het direct in verband brengen met het merk.

Hoe doet Google dit?

Onder andere door consistent gebruik van Google kleuren, typografie, onderscheidende witruimte, consistente Call To Actions en navigatie. De logo's laten ook een zekere consistentie zien die over bedrijven en categorieën heen werkt - hoewel dit laatste niet noodzakelijkerwijs betekent dat het ontwerp ook gunsten zal genereren.

Met consistentie in de branding analyseert u eerst alleen of de website het bedrijf en de branding op de best mogelijke manier weerspiegelt.

Webdesign standaard en gebruiksvriendelijkheid

Een andere "best practice" wordt gedefinieerd door de integratie van normen. Dit omvat bijvoorbeeld de plaatsing van het logo in de linkerbovenhoek, het verschijnen van knoppen, links enzovoort. Deze helpen de bezoekers van uw site snel en gemakkelijk hun weg te vinden. Daarom zijn deze normen onmisbaar voor de implementatie van een succesvolle bruikbaarheid.

Verdere middelen op het gebied van gebruiksvriendelijkheid:

Waarom zou u als webdesigner vooral geïnteresseerd zijn in gebruiksvriendelijkheid en gebruikerservaring? U vindt meer uitgebreide benaderingen van het onderwerp gebruiksvriendelijkheid in dit artikel en verder https://www.usability.gov/.

Wat definieert een webdesign standaard?

We definiëren wijdverspreide ontwerpstandaarden in webdesign door middel van UI-ontwerppatronen. Andy Crestodina legt heel duidelijk uit hoe de normen worden gedefinieerd in zijn artikel over Webdesignstandaarden.

Volgens deze aanpak moet op ten minste 80 procent van de websites een ontwerpbenadering worden toegepast om als standaard te gelden. Al het andere is ofwel een gewoonte (50-79 procent) of brengt zelfs inconsistentie en verwarring (0-49 procent) naar uw site.

Harmonieuze vormgeving: de regel van derden

Over het onderwerp harmonieus webdesign Ik heb al eerder gerapporteerd. Deze keer wil ik meer in detail ingaan op de regel van derden.

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

Interactieontwerp
Bron: interactie-ontwerp

Bij het maken van websites helpt de regel van derden u vooral om de belangrijkste informatie zo te plaatsen dat de bezoeker deze direct kan waarnemen. 

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

In Photoshop kunt u snel en eenvoudig uw lay-outs bekijken en aanpassen met behulp van de instelling Crop Tool en Rule of Thirds. Ter illustratie van de Regel van Derden heb ik de website van Marqeta een beetje dichterbij:

Beste praktijken

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. De harmonie van het ontwerp zou echter enigszins lijden:

Beste praktijken

De mobiele versie laat duidelijk zien dat het bericht 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 "heat maps" helpen u ook om erachter te komen waar de bezoekers van uw site vooral kijken en klikken. Het gereedschap Crazy Egg biedt hier bijvoorbeeld een (oplaadbare) dienst aan.

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

Best practices in webdesign

Hiervoor heb ik weer de website van Marqeta wordt gebruikt. Het rechter CTA en het product zijn bijzonder prominent aanwezig, gevolgd door de boodschap en ten slotte het logo en het tweede CTA:

Best practices in webdesign

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

Tekst en SEO

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

U moet vooral letten op de lengte en de leesbaarheid van de teksten - vaak zijn de teksten te uitgebreid en te genesteld. 

Zelfs als de doelgroep gewend is aan een bepaalde hoeveelheid jargon, moet u zich er altijd van bewust zijn dat onze aandachtsspanne op een website veel kleiner is dan bijvoorbeeld bij het lezen van professionele 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.

Ook van Google zijn er minpunten als de zinnen op uw pagina te lang zijn en pluspunten als ze worden vervangen door zogenaamde "overgangswoorden"zijn met elkaar verbonden.

Interessante bijdragen aan het onderwerp SEO zijn ook:

Toegankelijkheid

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

U kunt dit eenvoudig testen door naar uw website te kijken in zwart-wit:

Best practices in webdesign

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

Om dit met zekerheid te verifiëren is er de "Contrastchecker". De standaard contrastverhouding is minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst, zoals koppen:

Best practices in webdesign
Best practices in webdesign

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

http://colorsafe.co/ is een ander instrument voor het bepalen van kleuren en hun contrast. Hier kunt u direct verschillende kleurencombinaties uitproberen. De verhouding wordt direct aan u gegeven en u heeft de mogelijkheid om lettertypes te selecteren en ook volgens welke WCAG-norm u wilt uw keuze maken.

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

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

Andere middelen

Resolutie en cross-device ontwerp

Er is waarschijnlijk geen regel in webdesign die vaker wordt aangesproken - en vaker genegeerd - dan "mobile first”.

In deze aanpak wordt content voor mobiele apparaten gecreëerd en vervolgens aangepast voor de grotere apparaten. Het tegenovergestelde is om te ontwerpen voor desktops en dergelijke en deze vervolgens aan te passen voor kleinere apparaten. 

Er komentwee andere benaderingen bij me op:

  • Maak een aparte website voor elk mobiel en desktopapparaat en bel deze vervolgens op.
  • Geef de website weer als een desktopversie op uw mobiele telefoon

Het eerste kan de juiste aanpak zijn - afhankelijk van het project - maar is niet erg wijdverbreid omdat het zeer kostbaar en tijdrovend is. Helaas is dit laatste nog te vaak op het web te zien en moet het daarom dringend worden toegevoegd aan de lijst van "best practices". Meer tips voor mobiele optimalisatie zijn te vinden hier.

Mobile first hoeft niet altijd de juiste manier te zijn: Onderzoek naar de doelgroep en hun internetgedrag kan u snel laten zien welke apparaten vooral gebruikt worden om toegang te krijgen tot uw site. 

Het idee hierachter is niet alleen dat de inhoud op een visueel passende manier wordt voorbereid, maar ook dat er rekening wordt gehouden met de veranderde externe omstandigheden. Meer details vindt u in het artikel Mobile-First UX Design is niet langer een trend nalezen.

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

Best practices in webdesign
Bron: https://www.hobo-web.co.uk/best-screen-size/

beste praktijken voor WordPress

WordPress Codex

WordPress biedt u een ongelooflijk aantal mogelijkheden om uw ontwerpen op het web te presenteren. Maar zelfs hier zijn er normen en best practices die je moet volgen.

De WordPress Codex

WordPress stelt hiervoor een algemene codex ter beschikking, die u kan helpen om het onderwerp in detail te behandelen.

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 werden aangeboden en om te weten te komen of Plugin, of Theme, in de toekomst verder zal worden ontwikkeld. WordPress Tools die regelmatig verder worden ontwikkeld hebben meestal een actievere ondersteuning. Ze zijn ook meer kans om compatibel te blijven met toekomstige versies van uw site.

WordPress Updates en beveiliging

Het regelmatig updaten van uw Themes en Plugins zal uw kwetsbaarheid voor ongewenste toegang verminderen. Bugs zullen worden opgelost en uw websites zullen worden aangepast aan de steeds veranderende technische omgeving. Beveiliging Plugins en WordFence helpen ook om uw site en de beveiliging ervan in een oogopslag te houden en tijdig te reageren op problemen. Een SSL-certificaat moet op elke website worden geïntegreerd. 

Best practices in webdesign: Uw vragen

Welke vragen heb je voor Sonja? Welke Best Practices kun je jezelf aanbevelen? Gebruik de commentaarfunctie. Wilt u meer tips over webdesign en ontwikkeling? Volg ons dan op TwitterFacebook 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.

Commentaar op dit artikel

Schrijf een opmerking

Je e-mail adres wordt niet gepubliceerd. Verplichte velden zijn met * gemarkeerd.