Herinner je je nog hoe succesvolle websites er een aantal jaren geleden uitzagen? Een groot verschil met hoe een website er tegenwoordig uitziet, of niet? Websites zijn nu veel meer gestroomlijnd en gebruiksvriendelijk. Gedurende de laatste 15 jaar zijn websites meer dan alleen een digitaal visitekaartje geworden; de mogelijkheden die je website nu heeft om je verkopen te verhogen, zijn gewoon fantastisch. Ik kan me voorstellen dat je soms door het bomen het bos niet meer ziet. Daarom geef ik je in dit artikel dan ook graag mijn tips voor een succesvolle website!
94% van de negatieve feedback op je website is gerelateerd aan design
Ik geef je in dit artikel 20 tips voor een succesvolle website. Het is misschien te veel om al deze tips in één keer mee te nemen in je (nieuwe) website. Wellicht vind je sommige tips ook niet interessant of passen deze niet bij jou en je product of dienst. Dat kan! Neem toch een paar minuten om het gewoon eens door te lezen en doe inspiratie voor je website op. Heb je vragen of heb je ergens hulp bij nodig? Let me know!
1. Minimalistisch design
Minimalistisch webdesign klinkt erg simpel, maar is eigenlijk het moeilijkste om te bereiken. Het is in feite een simpele lay-out, maar dan zonder alle tierelantijnen. Het idee achter minimalisme is je bezoeker zich te laten focussen op datgene waarvan jij wilt dat ze het zich herinneren nadat ze je website verlaten. Maak datgene dan ook de eye catcher van je landingspagina.
De meeste websitebezoekers vinden het niet fijn om veel te moeten lezen. Tegenwoordig zijn we meer visueel ingesteld. Ook onthouden we minder van wat we online lezen met de simpele reden dat we al zóveel moeten doen en onthouden.
Voordelen van minimalistisch webdesign
Wanneer je design in het teken staat van informatieve afbeeldingen en video’s, simpele typografie en een uitmuntend gebruik van witruime, dan houd je de aandacht van de bezoeker uiteindelijk langer vast. Hiernaast zullen bezoekers je website ook beter onthouden.
Minimalisme verschuift de focus naar een visuele representatie van je diensten- en/of productaanbod, wat de crux is van webdesign.
Een goed voorbeeld hiervan is Studiorotate.com.
2. Uniek en groot lettertype
Hoe ga je om met lettertypes op je website? Een specifiek lettertype kan je uniek maken en zorgt ervoor dat mensen zich jou en je merk kunnen herinneren. Neem bijvoorbeeld het Coco-Cola lettertype; deze herken je direct. Lettertype speelt een grote rol op je website.
Om bezoekers het lettertype van jouw merk te laten herkennen, maak je deze direct zichtbaar op je homepage en landingspagina.
Voordelen van een uniek lettertype op je website
Als je een groot en uniek lettertype op je website gebruikt, dan zal dit de dynamiek van je website ten goede komen. Uit onderzoek is gebleken dat 38% van je bezoekers niet meer terugkomt als de lay-out niet aantrekkelijk is. Zorg er daarom voor dat het lettertype dat je op je website gebruikt goed matched met de rest van het design van je website.
3. Storytelling – Character Design
Custom grafische elementen zijn een nieuwe trend. Als je kiest voor dergelijke grafische elementen voor je website, maak deze dan echt uniek en persoonlijk.
Neem bijvoorbeeld eens een kijkje op ToskaChocolates.com. Dit is een chocoladebedrijf uit India. Als je op de website naar beneden scrolt, dan zie je de chocolade uit de verpakking komen; dit is echt geweldig gedaan! Neem eens een kijkje en dan zal je snel merken dat je zin krijgt in chocolade. De website maakt het hiermee ontzettend aantrekkelijk om hun chocolade te kopen. Ook nodigt het erg uit om de rest van de website te bekijken.
Voordelen van storytelling door grafisch design
Uit onderzoeken is gebleken dat 75% van de consumenten de geloofwaardigheid van een bedrijf beoordeeld op het design van de website. Herinner je je nog de jaren ’90 waarin 7Up een mascotte had met krullend haar? Fido Dido was zijn naam. Met het introduceren van dit mannetje ging de marketing van het merk echt door het plafond. Dit is precies de kracht van goed grafisch werk en het creëren van een character.
4. Mobile-Friendly Design
Het zal geen verrassing voor je zijn dat je website er goed moet uitzien op smartphones en andere apparaten. Je website moet responsive zijn. Het aantal bezoekers dat je website via een smartphone bezoekt, ligt vele malen hoger dan elk ander apparaat. Hiermee is de engagement dus ook een stuk hoger.
Het is cruciaal om je website responsive te maken voor verschillende apparaten. Het hamburger menu is hiervan een goed voorbeeld; dit menu maakt het navigeren op bijvoorbeeld een smartphone veel eenvoudiger.
Voordelen van een (mobile) responsive website
Als je website snel laadt op mobiele apparaten dan zal je merken dat bezoekers meer tijd op je website spenderen. Dit leidt logischerwijs tot een hogere conversie. Zorg er hierom voor dat je bezoeker zo lang mogelijk op je website blijft.
5. Grote en Responsive Hero images
Hero images zijn de grote banners die je meestal op de homepage direct onder de menubalk ziet staan. Ze zijn bedoeld om je aandacht te trekken. Het is de bedoeling dat hero images in het oog springend zijn en duidelijk aanwezig. Ondanks dat ze op veel websites gebruikt worden en vaak worden aangeraden om je product of dienst direct onder de aandacht te brengen, moet je toch wel oppassen dat je de hero image goed gebruikt. Verberg hem bijvoorbeeld niet onder grote menuknoppen. Hierdoor verliest de hero image zijn charme.
Voordelen van hero images op websites
Grote afbeeldingen voldoen aan de verwachtingen van je klanten. Ze verwachten dat je je product of dienst aanprijst. Met creatieve afbeeldingen trigger je je bezoekers en maak je terugkerende bezoekers van ze.
6. Compositie/Rule of Thirds
Compositie is erg belangrijk in webdesign. Het helpt je je website te structureren. Zelfs de mooiste lettertypen, hero images en het beste UX design worden teniet gedaan als je compositie een zooitje is.
Het basisregel van de Rule of Thirds is dat je een foto of afbeelding in negen gelijke vlakken verdeeld met twee horizontale en twee verticale lijnen. De vier kruispunten die je hiermee door de lijnen creëert, zijn de meest interessante posities van een foto. Deze punten worden ook wel een ‘sterke plaats’ genoemd en maken een foto sterker en dynamischer.
Voordeel van de Rule of Thirds op websites
Wanneer je deze regel toepast op je webpagina’s, dan zien je webpagina’s er georganiseerder en aantrekkelijker uit. Je lettertype en je foto’s en afbeeldingen zien er dan ook veel harmonieuzer uit.
7. Witruimte
Mocht je niet weten wat witruimte inhoudt; dit is feitelijk de lege ruimte in elke compositie. In dit geval dus de lege ruimte op je website. Het is een niet gemarkeerde ruimte tussen twee objecten, zoals foto’s en teksten, in die stopt bij een visuele break. Omdat er weinig afleiding is, maakt het de bezoeker makkelijker om te focussen op hetgeen jij wilt.
Voordelen van witruimte op je website
Als je kijkt naar de website Everlane.com, dan zal je merken dat ze veel gebruikmaken van witruimte. Hierdoor trekken de producten goed de aandacht van de bezoeker.
The call-to-action staat helemaal onderaan de pagina. De rustige achtergrondafbeelding heeft ook nog een schaduwfilter waardoor de call-to-action des te meer opvalt.
Witruimte bevorderd de user experience. Uit onderzoek is gebleken dat dit door bezoekers het meest gewaardeerd wordt na de karakteristiek van de website zelf. Wees dus niet bang voor lege ruimtes in je website, maar geef ze de juiste touch.
8. Korte video’s
Een korte video van je product- of dienstenaanbod brengt je pagina tot leven. Neem eens een kijkje op de website van Watson Design Group. Deze partij combineert alle bovengenoemde elementen op een fantastische manier. Ze gebruiken witruimte, korte video’s, hero images en mooie contrasterende kleuren op zo’n doordachte manier, dat je gewoonweg op de website blijft kijken, omdat je benieuwd bent naar de rest van het design.
Voordelen van video op websites
Video verhoogt de user experience op je website. We weten inmiddels dat videocontent één van de meest gezochte contentvormen is. Hierop inspelen is een erg goed idee.
Video trekt veel aandacht en aangezien je bezoeker in amper 2 seconden je website beoordeelt, maak je met video een goede eerste indruk.
9. Achtergrond video’s
Achtergrondvideo’s zijn een alternatief voor hero images of banners. Als je bedrijf en merk veel doet met video, dan is dit de beste manier om je websitebezoekers te benaderen. Een achtergrondvideo is in feite een videostream die op de achtergrond van je websiteheader wordt afgespeeld en brengt je pagina tot leven.
Techyscouts.com is een goed voorbeeld waarbij achtergrondvideo constant in beweging is. Dit breekt een statische webpagina en maakt dat je bezoekers zich je website zullen herinneren.
Voordelen van achtergrondvideo’s op websites
Een achtergrondvideo maakt je website aantrekkelijker ten opzichte van een website waarop niets beweegt. Bezoekers vormen soms in een vijfde van een seconde een mening over een website. Om deze supersnelle mening in de juiste richting te sturen, is een achtergrondvideo absoluut het overwegen waard.
10. Grote productfoto’s
Erg helder zijn over je product- of dienstenaanbod is key voor een effectieve website. Skullcandy.com snapt precies hoe dit werkt. Hun landingspagina bestaat geheel uit grote productfoto’s. Ook maken ze goed gebruik van de Rule of Thirds.
Voordelen van grote productfoto’s op websites
Wanneer een product middels een grote foto wordt weergegeven, dan wordt het product enorm goed gehighlight. Dit verhoogt het belang of voordeel dat het product de bezoeker geeft. De potentiële klant begrijpt precies wat hem wordt aangeboden. Ook krijgt het product de onverdeelde aandacht van de bezoeker, wat overigens ook het ultieme doel van goed webdesign is.
11. Duidelijke call-to-action
De call-to-action is cruciaal om je engagement te verhogen. Om de maximale interactie met je bezoeker te krijgen, moet je je focussen op de button. Probeer hierom de button dan ook niet te bedelven met te veel design. De hele reden achter minimalisme en adequaat gebruik van witruimte, is om de zichtbaarheid van de call-to-action button te verhogen.
Je hele webdesign moet toewerken naar je call-to-action button. Als het design van je website voldoende indruk maakt op je bezoeker, dan zullen ze op je button klikken en dieper in je site terechtkomen. Dit is je kans om leads te genereren en zorg dus ook dat je hier optimaal gebruik van maakt.
Voordelen van een call-to-action op websites
Een goed voorbeeld van een goede call-to-action is die van Netflix. Een grote angst van iedereen is ergens langdurig aan vastzitten en hiervoor te moeten betalen. Ook zijn ze bang dat cancellen de nodige ellende met zich meebrengt. Netflix speelt goed op beide angsten in met de ‘Join free for a month’ en ‘Cancel anytime’ call-to-action. Waarschijnlijk heeft alleen al deze geruststelling voor een boost in hun aanmeldingen gezorgd.
12. SEO-optimalisatie
Alle tijd die je in je website steekt, werpt alleen zijn vruchten af als je vindbaar bent in zoekmachines. Als zoekmachines je website niet kunnen vinden, dan zijn al je doordachte ideeën over de vormgeving niets waard. Waar het eigenlijk op neer komt, is dat je tijdens de vormgeving van je website de SEO-regels al in je achterhoofd moet houden.
Eén van de belangrijkste regels van SEO is dat de website een fijne en goede ervaring moet zijn voor de bezoeker. SEO is feitelijk gebaseerd op en draait om gebruiksvriendelijkheid. Andere belangrijke aspecten van effectieve SEO zijn het toevoegen van meta tags, title tags, heading tags, etc.
Krijg je nou al klamme handen door alleen al dit te lezen? Overweeg dan om iemand in te huren voor je SEO-optimalisatie. Een goede tekstschrijver kan je dit werk uit handen nemen en alhoewel je hiervoor een financiële investering moet doen, zal het zeker de moeite waard zijn.
Voordelen van SEO-optimalisatie
SEO maakt je website zichtbaar onder het grote publiek. Als je SEO tot aan de basis van je website doorvoert, dan zal je zien dat wanneer een gebruiker de keywords intypt die jij gebruikt, jouw website tevoorschijn komt in Google. En hoe hoger je website in de zoekresultaten verschijnt, hoe beter!
Met een goed vormgegeven website waarbij alles op de juiste plek staat, van de juiste lettertypes tot aan aantrekkelijke visualisaties en on-point content, kan je erop rekenen dat bezoekers terug blijven komen naar jouw website.
13. Doeltreffend kleurgebruik
Kleurgebruik is enorm belangrijk voor de vormgeving van je website. Juist kleurgebruik lift de algehele visuele indruk van je website naar een hoger niveau.
Waarschijnlijk weet je zelf ook wel dat bepaalde kleuren bepaalde emoties en gedachten kunnen prikkelen. Jouw favoriete kleuren zeggen veel over jou en je levensstijl. Denk hierbij aan de manier waarop je je huis inricht, de kleding die je draagt, de auto die je rijdt en zelfs het eten waarnaar je je het meest aangetrokken voelt.
Kleur kan een merk bouwen of breken, toegevoegde waarde geven of customer loyalty ruïneren. Het vormt 90% van de mening van een klant over een merk. En… dit alles binnen 90 seconden.
Voordelen van doeltreffend kleurgebruik op websites
Kleurgebruik is van onschatbare waarde in branding, marketing en webdesign. Het is zelfs zo belangrijk, dat kleur 85% van de reden vormt om iets af te nemen bij een bedrijf.
Veel verschillende kleuren kunnen je website rommelig maken en dit schrikt bezoekers af. Het resultaat; deze bezoekers komen niet meer terug. Gebruik hierom slechts een paar goed uitgedachte kleuren om de user experience te verhogen en om van bezoekers terugkerende bezoekers te maken.
Wanneer je verschillende kleuren binnen dezelfde kleurtint gebruikt, dan zal je website subtiel en plezierig voor de ogen zijn. Persoonlijk raad ik klanten altijd aan om maximaal 2 hoofdkleuren te kiezen en deze te combineren met basiskleuren, zoals zwart, (donker) grijs en wit. Zoals je kan zien, maak ik zelf ook gebruik van twee hoofdkleuren op mijn website. Adobe heeft een handige tool waarbij je kan spelen met kleuren en goed kan kijken welke kleuren bij elkaar passen; het Adobe Colorwheel.
Op Trajectorywebdesign.com wordt de psychologie achter kleurgebruik helder uitgelegd.
14. SVG animatie
JPG en PNG-bestanden ken je vast al, maar SVG is wellicht een nieuw begrip voor je. SVG staat voor ‘scalable vector graphics’. Een SVG is een afbeelding of animatie die je kunt aanpassen aan elke beeldschermgrootte zonder dat de grafische kwaliteit ervan verloren gaat. Grafisch vormgevers maken veel gebruik van SVG’s en maken deze bijvoorbeeld in Adobe Illustrator.
Een SVG-animatie kan een website een echte boost geven. Deze graphics brengen een website meer tot leven. Een goed voorbeeld hiervan is Waaark.com. De hele website schreeuwt gewoon SVG en deze website is zo goed geanimeerd dat je gewoon wilt blijven doorklikken om te kijken hoe de andere pagina’s eruitzien.
Voordelen van SVG-animaties op je website
SVG-animaties laten je bezoekers langer op je website blijven. Deze langere bezoekerstijd kan, mits er genoeg stimulatie plaatsvindt, leiden tot extra leads en verkopen. SVG’s nemen vaak ook vrij weinig ruimte in beslag, wat voorkomt dat je website traag wordt. Hiernaast zijn ze ook aan te passen met programmeertalen, zoals JavaScript en CSS.
15. Eenvoudige websitenavigatie
Een eenvoudige navigatie is een echte must voor de niet zo technische bezoekers van je website. Het is misschien moeilijk te geloven dat deze groep bezoekers tegenwoordig nog bestaat, maar het is toch echt zo. En als je een website vormgeeft, dan moet je rekening houden met deze niche groep. Hiernaast wordt eenvoud vaak ook gewoonweg gewaardeerd. Elke bezoeker wil nu eenmaal snel en makkelijk zijn weg vinden op een website. Lukt dit niet? Dan ben je deze bezoeker kwijt. Eenvoud is soms lastig te bewerkstelligen, maar de resultaten van je website zullen de moeite waard zijn.
Eenvoudige navigatie zal je bezoekers aansporen je website vaker te bezoeken, aangezien ze weten waar ze moeten zijn en ze niet verdwalen in allerlei menu-items en buttons.
Voordelen van een eenvoudig navigatiemenu op websites
Handige navigatie is één van de eerste indrukken die je bezoekers bijblijven nadat ze je website hebben bezocht. Onderschat absoluut niet het effect van je navigatiemenu op je bezoekersstroom.
Tegenwoordig maken veel websites gebruik van het hamburgermenu, vooral op smartphones kom je deze erg vaak tegen. Hiermee navigeer je snel en eenvoudig door de website. Verderop in dit artikel zal ik nog dieper ingaan op het hamburgermenu.
Op desktops zie je vaak dat de menubalk in beeld blijft nadat je gaat scrollen. Hij wordt dan vaak iets smaller. Hierdoor zie je waar je bent in de website en navigeer je ook snel naar andere pagina’s zonder dat je eerst weer omhoog moet scrollen.
16. Gebruik van organische vormen
Imperfecties in design geeft het design tegenwoordig de status van kunst. De dagen van recht toe recht aan figuren laten we langzaam achter ons. Tegenwoordig wordt imperfectie gewaardeerd. Dit geldt ook voor je website; imperfectie en organische vormen en figuren bieden een meerwaarde voor je website. Hierbij maak ik wel de kanttekening dat dit natuurlijk wel binnen je branding moet passen. Desalniettemin is dit zeker het overwegen waard.
Voordelen van organische vormen op je website
Organische vormen zijn eigenaardig, zeldzaam. Het voordeel van eigenaardigheden is dat ze opvallen. Iets dat opvalt, onderscheid je van je concurrentie en maakt dat mensen het zich (blijven) herinneren. Je bezoekers zullen zich direct elk aspect van je website herinneren als ze oneffenheden of imperfecties tegenkomen.
17. Social media integratie
Uiteraard kan social media integratie niet vergeten worden in deze lijst. Integratie van social media is essentieel voor je website. De manier waarop je dit precies doet hangt natuurlijk van je merk en product of dienst af. De ene branche leent zich meer voor visuele social media, zoals bijvoorbeeld Instagram en Pinterest voor de design of fashion branche. Andere branches varen beter op Facebook of Twitter. Ik zoek zelf altijd naar een goede combinatie van social media en bepaal pér kanaal wat ik daar plaats. Soms overlapt de content elkaar, soms niet.
Ter inspiratie kan je eens een kijkje nemen bij grote multinationals, zoals Nike, Dolce & Gabbana, Adidas, etc die social media diep integreren in hun website.
Voordelen van social media integratie op websites
Een duizelingwekkend aantal mensen brengt dagelijks uren door op hun smartphone of tablet. Tot niemands verbazing surfen deze mensen ook massaal door social media. Verschillende uitgebreide onderzoeken verwachten ook niet dat dit gedrag zal stagneren; mensen zullen alleen nog maar méér met hun telefoon bezig zijn. Dit gezegd hebbende… als je social media integratie on point is, dan wordt je website meer waard als het gaat om engagement. Meer engagement betekent een hogere kans op verkopen, klanten en leads.
18. Hamburger menu
Nee, niet het hamburgermenu van de McDonalds 😉
Mensen die je website bezoeken voor informatie waarderen het als je hen deze informatie makkelijk en laagdrempelig laat vinden. Informatie verspreid over je website is erg vervelend voor de snelle informatieverzamelaar. Om je bezoekers daarom tegemoet te komen, kan je het hamburgermenu gebruiken. Dit menu is gewoonlijk te zien als drie op elkaar gestapelde lijntjes boven in de linker- of rechterhoek van de website.
Voordelen van het hamburger menu op je website
De drie lijntjes vormen tezamen het hamburgermenu en nemen weinig ruimte in beslag. Hierdoor blijft er op je webpagina meer ruimte over voor foto’s, afbeeldingen en video’s. Dit komt je overall design ten goede. Vrijwel elke bekende website gebruikt dezer dagen een hamburgermenu, zodat de gebruiker makkelijker kan navigeren.
19. Custom digitale illustraties
Om je dit punt goed toe te lichten, start ik direct met een voorbeeld van Nike. Nike heeft namelijk een knap staaltje werk geleverd als het aankomt op custom digitale illustraties. Ze hebben een paar bijzondere animaties gemaakt waarbij ze trouw blijven aan hun waarden en normen en het comfort dat hun producten bieden. De animaties geven blijk van totale creatieve vrijheid. Bekijk de geweldige animaties op nike-react.com. Ook maakt deze website erg mooi gebruik van het hamburgermenu.
Voordeel van custom digitale illustraties op je website
Wanneer je custom illustraties juist gebruikt, dan is er een betere kans dat gebruikers zichzelf kunnen identificeren met hetgeen je aanbiedt. Een illustratie kan je merk en je waarden meer tot leven brengen en ervoor zorgen dat bezoekers zich je website beter blijven herinneren. Bedenk maar eens hoelang de illustraties van Nike je nu gaan bijblijven.
20. Snelheid optimalisatie
Houd in gedachten dat de aandacht spanne van een bezoeker minder is dan een paar seconden. Diverse onderzoeken hebben zelfs aangetoond dat het minder is dan 50 milliseconden. Dit is dus de tijd die je hebt om indruk te maken op je websitebezoeker. Dit gaat niet lukken als je website alleen al deze tijd nodig heeft om te laden. Probeer er dus voor te zorgen dat je website in een oogwenk geladen is.
Een makkelijke manier om dit te bewerkstelligen is om afbeeldingen niet te zwaar te maken. De laadtijd verminderd hierdoor en je website zal dan sneller laden. Ook is een goede webhost belangrijk. Welke host dit voor jou is, dan hangt af van persoonlijke voorkeuren, zoals je budget en de service die je verwacht, maar ook hoeveel webruimte je nodig hebt.
Voordelen van een snelle website
Snelheid en de optimalisatie hiervan heeft een grote impact op je websitedesign. Je design zal je bezoekers alleen aanspreken als deze snel genoeg laadt. Als dit niet het geval is, dan zullen bezoekers je website snel weer verlaten. Indien bezoekers je website snel verlaten, dan leidt dit tot een hogere bounce rate wat op zijn beurt weer zorgt voor een lagere SEO-waardering. Zoals je zal begrijpen, leidt dit tot een neerwaartse spiraal van prestaties.
Ben je benieuwd hoe snel jouw website laadt? Vul de URL dan eens in op Pingdom Tools.
Ten slotte…
Deze 20 tips voor een succesvolle website maken je website effectiever en efficiënter. Hiermee komen ze het algehele design van je website ten goede. Een holistische website met een goed design en goede functionaliteiten wordt door gebruikers gewaardeerd. Een dergelijke website wordt aan anderen aanbevolen en hierdoor dus nog meer bezocht.
Als je een goede basis legt voor je website met de hierboven genoemde criteria in je achterhoofd, dan is er geen twijfel mogelijk dat je website in slechts enkele dagen zal groeien. Het volgen van deze tips kan feitelijk je business in de lift zetten en laten stijgen tot successen die je nooit voor mogelijk hebt gehouden.
Wil je graag meer tips? Bekijk dan ook mijn andere blogs of volg mij via Instagram.