Zo val je écht op met jouw website

We zijn steeds meer online te vinden. Meer dan ooit in deze gekke periode, maar ook daarbuiten; oma’s zitten op Facebook, kinderen gaan naar school met een tablet en een website is steeds vaker het eerste echte contactmoment tussen doelgroep en merk. Hoe hou je je bezoekers nog vast? En wat is mogelijk? We laten zien wat er speelt op het gebied van webdesign.

In veel gevallen komt de bezoeker van je website terecht op de homepage. Daarom is het van groot belang dat deze pagina begint met een opvallend headerbeeld dat gelijk de aandacht op zich vestigt. Dit kan bijvoorbeeld door middel van een foto (met subtiele animatie), een video of een mooie illustratie. Het is belangrijk om hierbij een korte introductietekst te plaatsen zodat de gebruiker in één oogopslag ziet op wiens website hij of zij is terechtgekomen. Een header bevat daarnaast vaak één of meerdere call-to-actions, zodat je bezoekers naar de belangrijkste content binnen een website stuurt. Welke content dit is, is afhankelijk van het doel van jouw website. Zo zal je bij een webshop waarschijnlijk zo snel mogelijk naar de (belangrijkste) productpagina’s geleid worden.

De identiteit van jouw organisatie bewaken zorgt ervoor dat je als merk serieus genomen wordt. Eén van de belangrijkste zaken hierbij is het gebruik van eigen beeldtaal. Met eigen fotografie geef je jouw bezoekers als het ware een kijkje binnen de organisatie en geef jij hen een stuk vertrouwen. Daarnaast zorg je er met een professionele fotoshoot voor dat alle beelden dezelfde stijl hebben, wat zorgt voor een samenhangend geheel. Om die reden is het dus goed om stockfoto’s zoveel mogelijk te vermijden; hoe meer stockbeelden, hoe groter de kans dat het gevoel van de website onpersoonlijk en onsamenhangend wordt.

Een ander belangrijk onderdeel van de beeldtaal binnen een website zijn iconen. Door deze iconen zie je sneller welke content bij wat hoort, zodat je die informatie makkelijker tot je neemt. Denk aan bijvoorbeeld een icoon van een envelop en een telefoon op een contactpagina om snel het e-mailadres en het telefoonnummer te vinden.

Elk merk en elke organisatie heeft een sterke uitstraling nodig. Daarom is het noodzakelijk dat er een stevige, goed doordachte branding staat, en dat deze wordt doorgevoerd op de website. Lettertypes en kleurgebruik zijn daarbij belangrijke onderdelen. Bij de keuze voor de juiste lettertypes is het goed om onderscheid te maken tussen titels en ‘gewone’ tekst. Dit zou voor beide hetzelfde lettertype kunnen zijn, maar je kunt hier ook in variëren. Denk er daarbij om dat er bij een titel meer mogelijk is. Hier zou je bijvoorbeeld kunnen kiezen voor een mooi, handgeschreven lettertype, terwijl dat bij langere, kleinere teksten een stuk minder goed leesbaar zal zijn.

Naast lettertypes kan een zorgvuldig gekozen kleurenpalet ook niet ontbreken. Maak voor een website onderscheid tussen primaire en secundaire kleuren. Zo behoud je de juiste hiërarchie en zal de gebruiker bij bijvoorbeeld buttons gevoelsmatig al begrijpen welke belangrijker is.

Een website kan er gelikt uitzien en gebruiksvriendelijk werken, maar dan ben je er nog niet. De informatie die je communiceert is minstens zo belangrijk. Wat wil je vertellen aan de bezoeker en welke actie hoop je dat hij of zij vervolgens neemt? Denk daarom goed na over welke content je op welke pagina’s plaatst, en de route van je bezoeker langs die pagina’s. Zo ontstaat er een samenhangend geheel en neem je de bezoeker aan de hand mee in het verhaal van jouw organisatie. 

Een zogenaamde sitemap helpt je om de structuur van jouw website te bepalen, waarbij ook het verband tussen alle pagina’s zichtbaar is. Vervolgens kun je gaan bepalen welke elementen op die pagina’s komen te staan, waarna je met wireframes de opbouw van alle pagina’s binnen de website kan bepalen. Denk er daarbij om dat je content niet overal op dezelfde manier toont. Wissel visueel af en zorg niet voor té lange teksten. Zo houd je de bezoeker vast!

Een belangrijk onderdeel van user interfaces, zoals website en apps, zijn animaties. Ze zorgen er niet alleen voor dat jouw digitale product er tof uitziet, het is ook nog eens heel erg functioneel. Animaties zorgen namelijk op verschillende manieren voor een betere user experience (UX), bijvoorbeeld als je op een button klikt. De kleur of de tekst in de button kan dan bijvoorbeeld veranderen, zodat je weet dat je de actie goed hebt uitgevoerd. Apps als Instagram en WhatsApp gebruiken zogenoemde Micro interactions zonder dat jij het misschien door hebt, maar als ze dit zouden verwijderen, merk je het meteen. Een micro interactie zoals in het zoekgedeelte van Instagram zorgt ervoor dat je jouw zoekterm na het activeren van de zoekbalk ook kunt annuleren.

Een ander voorbeeld is het animeren van tekst en afbeeldingen. Dit zorgt ervoor dat je de informatie veel beter verwerkt dan bij een statische webpagina. Maar overdrijf niet te veel; een overload aan animaties kan een website ook onrustig maken. Het is dus goed om hierin de juiste balans te vinden.

Een website echt die finishing touch geven? Voeg unieke elementen aan de website toe voor een extra opvallende beleving. Wat deze elementen zijn, is geheel afhankelijk van het merk of de organisatie. Het kan gaan om opvallende vormen waarin afbeeldingen getoond worden of een stoere divider die verschillende contentblokken van elkaar scheidt. Daarom is het goed om altijd een zogenaamde Styleguide te maken, waarin alle elementen opgenomen worden. Denk aan kleurgebruik, lettertypes, buttons, kaartjes, iconen, vormen en andere user interface elementen. Zorg ervoor dat jouw website niet alleen goed werkt, maar ook een samenhangend, uniek geheel is!