Wat zijn de beste praktijken in webontwerp? Hoe implementeer je ze met succes in je volgende webdesignproject? En wat definiëren we als ontwerpnormen en beste praktijken in webdesign?
Wat bedoelen we 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 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 visuele elementen herkenbaar voor de websitebeheerder?
- 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 over het onderwerp bruikbaarheid
Waarom zou je als webdesigner geïnteresseerd moeten zijn in bruikbaarheid en gebruikerservaring? Uitgebreidere benaderingen van het onderwerp bruikbaarheid vind je in in dit artikel.
Wat definieert 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:
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.
Eenvoudig gezegd mag een visueel element niet meer dan drie vakken in beslag nemen en op een derde van de lay-out staan. De knooppunten zijn ook bijzonder geschikt voor het plaatsen van belangrijke boodschappen en Call To Action.
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:
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:
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 je 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?
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:
Ik heb de mobiele versie nog verder afgezwakt om te testen wat er overblijft. Hier valt eerst het product op, gevolgd door de CTA en het logo. Je kunt deze test doen met de hele pagina - bij voorkeur nog in de ontwerpfase. Hier kun je snel en gemakkelijk analyseren welke elementen van je ontwerp prominent aanwezig zijn en beslissen of dit is wat je wilt.
Inhoud en SEO optimaliseren
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:
Toegankelijkheid van het web en drempelvrije websites
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:
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 minstens 4,5:1 voor normale tekst en 3:1 voor grote tekst zoals koppen:
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.
Het gebruik van kleuren om de foutafhandeling visueel weer te geven kan problemen opleveren. Neem bijvoorbeeld vormelementen. Fouten worden vaak weergegeven door de invoer Box in kleur te markeren. Voor iemand met een kleurtekort kan dit ertoe leiden dat fouten niet worden herkend en dus niet worden opgelost.
Bij de planning moet je daar rekening mee houden en er daarom altijd voor zorgen dat er een andere weergave van de fout is. Hier vind je meer interessante feiten en bronnen over het onderwerp toegankelijkheid, evenals waardevolle tips voor het maken van een toegankelijke WordPress website.
Andere middelen
"*" geeft verplichte velden aan
Resolutie en Responsive Web 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 gedachten:
- 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 "best practices". Meer tips voor mobiele optimalisatie vind je 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 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 Plugins en Themes
Bij het kiezen van de juiste plug-in en het juiste thema is niet alleen de huidige functionaliteit belangrijk. Het is ook een goed idee om recensies te lezen en je vertrouwd te maken met hoe vaak er updates zijn aangeboden en te onderzoeken of de plugin of het thema in de toekomst verder ontwikkeld zal worden. WordPress tools die regelmatig ontwikkeld worden hebben meestal een actievere ondersteuning. Het is ook waarschijnlijker dat ze compatibel blijven met toekomstige versies van je site.
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 best practices kun je zelf aanbevelen? Gebruik gerust de commentaarfunctie. Wil je meer tips over webontwerp en -ontwikkeling? Volg ons dan op Twitter, Facebook of via onze nieuwsbrief.
