We weten allemaal hoe belangrijk een goede website is. Het is vaak één van de belangrijkste contactmomenten die de klant met jouw merk heeft. Vaak kan je op een website een product bestellen, een afspraak maken of gewoon meer informatie over jouw bedrijf vinden. Een goed en klantvriendelijk webdesign is daarom van uiterst belang.
Toch gaat het nog vaak fout en blijkt webdesign nog ingewikkelder dan gedacht. Daarom behandelen we voor jou vandaag de 4 grootste webdesign fouten. Want als je de basis goed begrijpt ben je al een heel eind.
Voor deze post hebben we een website gedesigned met al deze fouten en zullen we die op volgorde oplossen. Het design zal dan steeds veranderen, zodat je goed het verschil kunt zien.
Dit is het design wat wij zullen gebruiken:
Geen kleurenpalet
Zoals je ziet bevat dit design veel fouten. Het kijkt niet heel lekker en om eerlijk te zijn doet het pijn aan mijn ogen. Dit komt voornamelijk door het kleur gebruikt. Het felle rood valt heel erg op en neemt alle aandacht op zich.
Een kleurenpalet is eigenlijk een samenstelling van verschillende kleuren die goed bij elkaar passen. Dit kan op basis van contrast en op basis van kleurtint. De kleuren die je kiest vertellen ook gelijk meer over jouw bedrijf. Zo straal je met blauw veel professionaliteit uit en groen een hele vriendelijke uitstraling.
Het kleurenpalet dat wij gekozen hebben voor dit design ziet er als volgt uit:
Dit kleurenpalet is een combinatie tussen complementaire kleuren en kleuren met dezelfde tint. Moet jij je nou helemaal gaan verdiepen in kleurentheorie? Als je dat wilt kan het altijd. Maar Adobe heeft een hele handige tool ontwikkelt die jouw helpt met kleuren uitzoeken. Het heet Adobe Color en is helemaal gratis. Hier kan je gewoon een kleur invoeren en dan zal het programma met een mooi palet komen.
Als we dit kleurenpalet op ons design zetten, zie gelijk hoeveel rust het geeft. Ook is er meer duidelijkheid over de elementen en komen de illustratie en het logo beter tot hun rechten. Het design ziet er al beter uit, maar er is nog veel werk aan de winkel.
Geen visuele hiërarchie
Er staat nu wat tekst op ons design, maar waar hoort die tekst eigenlijk bij en wat zijn de belangrijkste stukken? Dat zijn vragen die een bezoeker van deze website zou kunnen hebben. Om dit op te lossen gebruiken we visuele hiërarchie.
Visuele hiërarchie is de verdeling van alle elementen op je website. Hiermee laat je zien welke stukken belangrijk zijn en welke minder belangrijk. Dit is een cruciale stap in het designproces, omdat je hier een duidelijk onderscheid moet maken tussen blokken op je pagina. Visuele hiërarchie kan bijvoorbeeld een kop tekst boven een paragraaf zijn. Of een grote knop die veel autoriteit heeft.
Ook kleuren hebben invloed op de visuele hiërarchie. Zo hebben we net met ons kleurenpalet al een verdeling aangemaakt. Er is een duidelijk verschil ontstaan tussen het navigatiemenu en de rest van de pagina. Als we ook kopteksten tussen de tekst toevoegen, wordt de pagina als een stuk duidelijker.
Te weinig witruimte
De pagina ziet er al een stuk beter uit, maar het voelt nog een beetje druk en ik word er een beetje benauwd van. Met een paar kleine aanpassingen is dat zo verholpen. Er moet voor meer ruimte gezorgd worden zodat de site een beetje kan ademen.
Genoeg witruimte wordt vaak erg onderschat, je wilt immers genoeg informatie op je website plaatsen. Dit gaat dan weer ten koste van de overzichtelijkheid en rust op je pagina. Wees niet bang om sommige stukken tekst naar beneden te verplaatsen, of zelfs naar een andere pagina. Je wilt echt dat de belangrijkste tekst op je pagina blijft staan.
Met goede witruimte zorg je ook weer voor een betere visuele hiërarchie, omdat je hiermee één bepaald element in het zonnetje kan zetten. Dit zorgt uiteindelijk weer voor meer overzichtelijkheid en dat is wat we de gebruiker graag bieden.
Probeer wel op te passen om niet te veel witruimte te creëren. Er is een kleine lijn tussen genoeg en te veel witruimte. Te veel witruimte kan weer voor leegte op de website zorgen. Nadat we witruimte hebben toegevoegd, ziet de website er als volgt uit:
Geen CTA (Call To Action)
Met de witruimte erbij ziet de pagina er veel rustiger en overzichtelijker uit. Alleen door de witruimte is er een leegte ontstaan, omdat de tekst verplaatst is. Deze ruimte zal met iets gevuld moeten worden, wat niet afleid en goed past bij de website.
Een knop die goed past binnen het kleurenpalet en een goede visuele hiërarchie met zich meebrengt zou een goede keuze zijn. Zo’n knop zorgt dat de gebruiker een doel heeft op de website. Deze knop wordt ook wel de Call To Action(CTA) genoemd .
De CTA is een must voor iedere bedrijfswebsite. Dit komt, zoals al in de naam staat, omdat de CTA roept om een actie van de gebruiker. En dat is natuurlijk het uiteindelijke doel van de website. Zo’n CTA moet altijd duidelijk zichtbaar zijn en zal dus ook moeten opvallen. Daarom is het handig om een complementaire kleur te gebruiken van je hoofdkleur.
Als we de CTA toevoegen ziet ons design er zo uit:
Conclusie
De pagina heeft een hele make-over gehad en ziet er nu een stuk beter uit. Alles staat duidelijk op zijn plek, er is rust en er is een doel. Zo zie je dat je met een paar basis aanpassingen al een heel eind komt. Met deze design tips in je achterhoofd zullen al je designs een stuk beter worden en zal jouw website betere conversies genereren. Gelukkig heb je nu een paar punten waar jij je aan vast kan houden, zodat je geen grote fouten (meer) hoeft te maken.
