Webdesign is een behoorlijk breed onderwerp. Het bestaat uit vele, kleinere onderdelen zoals de lay-out, de kleuren, de typografie, de afbeeldingen, grafische elementen, maar ook zeker de interactieve en usability aspecten van een website. Om het nóg ingewikkelder te maken; bij een goed webdesign komen diverse skills kijken. Denk aan grafisch ontwerp, typografie, kleurtheorie, UX-design (gebruikerservaring), UI-design (gebruikersinterface). En als je dit alles gedaan hebt mag je het ook nog is gaan programmeren in PHP, HTML, (S)CSS en JavaScript!

Om toch een beetje houvast te geven in dit behoorlijke brede onderwerp hebben we een aantal zaken opgesomd waar je zeker wél rekening mee moet houden. Maar ook een aantal bekende valkuilen.

Do’s in webdesign

1. Onderzoek naar de doelgroep: Naast het begrijpen van de doelgroep van de website, is het belangrijk om onderzoek te doen naar de behoeften, voorkeuren, gedrag en bovenal de verwachtingen. Door inzicht te krijgen in de specifieke behoeften en verwachtingen van je doelgroep, kun je een website ontwerpen die aansluit bij hun wensen en een betere gebruikerservaring biedt.Je kan jezelf (en je klant) vragen stellen als; ‘’wat zijn, op de huidige site, de belangrijkste pagina’s?’’ ‘’Vanuit welke pagina’s komen de meeste, en nog belangrijker de beste, conversies?’’ Met dit in het achterhoofd kan je al direct sturing geven aan de website, nog voor er een regel code op digitaal papier staat.
2. Responsief ontwerp: Zorg ervoor dat je website goed werkt op verschillende apparaten en schermformaten, zoals mobiele telefoons en tablets. Responsief ontwerp is essentieel om een goede gebruikerservaring te bieden, aangezien mobiel internetgebruik blijft groeien. Al zal dit overigens niet voor elke branche gelijk zijn. Kijk daarom ook zeker in Google Analytics hoe de verdeling is op je website.
3. Micro-interacties: Implementeer kleine, subtiele animaties en micro-interacties om de gebruikersbetrokkenheid te vergroten. Deze kleine details, zoals het veranderen van de kleur van een knop bij het zweven erover, voegen een gevoel van interactiviteit toe aan je website.
4. Minimalistisch ontwerp: Houd het ontwerp van je website functioneel en minimalistisch. Minimalisme blijft door de jaren heen een sterke trend, waarbij witruimte en eenvoudige navigatie centraal staan. Een minimalistisch ontwerp zorgt voor een betere focus op de belangrijkste inhoud en verbetert de algehele gebruikerservaring.
5. Toegankelijkheidsnormen volgen: Zorg ervoor dat je website voldoet aan de toegankelijkheidsrichtlijnen, zoals de Web Content Accessibility Guidelines (WCAG). Hiermee maak je je website bruikbaar voor mensen met verschillende beperkingen, zoals visuele of auditieve handicaps. Er is over dit onderwerp super veel te vinden. Als je alle andere tips die hier beschreven staan opvolgt zal je al voor een groot deel ‘compliant’ zijn. Echter zul je zien dat er toch nog altijd zaken zijn die beter kunnen. Helemaal WCAG-compliant worden is vaak van belang bij overheidswebsites, gezien dit een eis is vanuit de overheid.
6. Testen op verschillende apparaten en browsers: Naast het testen van de website op verschillende apparaten, zoals mobiele telefoons en tablets, is het ook belangrijk om te testen op verschillende browsers en besturingssystemen. Verschillende browsers kunnen bepaalde elementen nét wat anders vertonen in de manier waarop ze webpagina’s weergeven, en het testen op verschillende platformen helpt ervoor te zorgen dat je website consistent en goed functioneert voor alle gebruikers. Gelukkig worden deze verschillen wel steeds kleiner. Mede doordat browsers vaker gebruik maken van dezelfde ‘engines’ die de elementen weergeven. Voor de zekerheid kan je als browsers het beste Chrome, FireFox en Safari aanhouden.
7. Aandacht voor microtypografie: Hoewel typografie een bekend aspect is van webdesign, wordt microtypografie soms over het hoofd gezien. Het gaat om het zorgvuldig afstemmen van de lettergrootte, de regelafstand en de letterafstand om de leesbaarheid en visuele hiërarchie van de tekst te verbeteren. Het juiste gebruik van microtypografie kan de algehele kwaliteit en professionaliteit van het ontwerp verbeteren.

Don’ts in webdesign

1. Overmatig gebruik van animaties: Hoewel animaties en micro-interacties belangrijk zijn, moet je voorkomen dat je te veel animaties gebruikt die de laadtijd van je website vertragen. Te veel beweging kan ook afleidend zijn en afbreuk doen aan de bruikbaarheid. Ze kunnen simpelweg afleiden van je doel; het scoren een conversie en dan ben je helaas een bezoeker (en potentiële klant) kwijt.
2. Complex navigatieontwerp: Vermijd ingewikkelde navigatiepatronen die de gebruikers in verwarring kunnen brengen. Zorg ervoor dat de navigatie intuïtief en gemakkelijk te begrijpen is, zodat bezoekers snel vinden wat ze zoeken. Denk hierbij aan eindeloze submenu’s, te veel doorklikken en (te) diepe pagina’s die niet eenvoudig te bereiken zijn.
3. Te veel tekst op één pagina: Overlaad je webpagina’s niet met lange lappen tekst. Gebruikers scannen meestal de inhoud, dus maak gebruik van korte alinea’s, opsommingstekens, subkoppen en visuele elementen om de inhoud gemakkelijk leesbaar en behapbaar te maken.Probeer hierin ook is het vlak van de content smaller te maken. De ideale kolombreedte ligt ergens tussen de 50 á 75 regels. Met een smaller vlak worden zinnen automatisch ‘korter’. Denk hierbij ook aan de onderlinge regelafstand, deze wat groter instellen zorgt ervoor dat je tekst ineens stukken duidelijker is.
4. Onvoldoende contrast: Zorg ervoor dat er voldoende contrast is tussen de tekst en de achtergrondkleuren om de leesbaarheid te verbeteren. Een slecht contrast kan het moeilijk maken voor mensen om de inhoud van je website te lezen, vooral voor mensen met een verminderd gezichtsvermogen.
5. Ongeteste ontwerpen lanceren: Voordat je je website lanceert, zorg ervoor dat je uitgebreide tests uitvoert op verschillende apparaten en browsers om ervoor te zorgen dat alles goed functioneert. Het is belangrijk om eventuele bugs, fouten of compatibiliteitsproblemen op te lossen voordat bezoekers ermee in aanraking komen.
6. Lange laadtijden: Trage laadtijden kunnen leiden tot frustratie bij gebruikers en een slechte gebruikerservaring veroorzaken. Dit kan te wijten zijn aan grote bestandsgroottes, ongeoptimaliseerde afbeeldingen, overmatig gebruik van scripts of onvoldoende serverprestaties. Het is belangrijk om de laadtijden van je website te optimaliseren door bestanden te comprimeren, caching te gebruiken en afbeeldingen te optimaliseren.
7. Ontbrekende gebruikersfeedback: Het ontbreken van duidelijke feedback voor gebruikers kan leiden tot onzekerheid en verwarring. Gebruikers willen weten of een actie succesvol is voltooid, of er fouten zijn opgetreden en wat de volgende stappen zijn. Het is belangrijk om feedbackmechanismen in te bouwen, zoals meldingen, foutmeldingen en bevestigingen, om gebruikers op de hoogte te stellen van de status en voortgang van hun interacties met de website.Een perfect voorbeeld hiervan is een contactformulier; je hebt ‘iets’ fout ingevuld, maar je krijgt géén feedback. Geen hint wélk veld verkeerd is ingevuld óf wat de website van je verwacht zodat je de fout kan herstellen…. heel frustrerend natuurlijk!

Zoals je hebt gelezen zijn er veel zaken om rekening mee te houden. Daarbij komt nog dat een design altijd subjectief is. Buiten de bovenstaande best practices heb je ook nog altijd met smaak te maken. Iets afwijken van wat design-technisch zou ‘moeten’ kan en mag natuurlijk ook altijd een bewuste keuze zijn. Daarbij is het natuurlijk wel belangrijk om rekening te houden met de usability van de website. Het mag niet zo zijn dat een keuze ervoor zorgt dat een onderdeel van de website onbruikbaar wordt.