8 Richtlijnen voor een goede vormgeving van je website

Vormgeving maakt een website meer dan ‘mooi’ of ‘lelijk’. Het bepaalt voor een groot deel of een bezoeker blijft hangen of direct weer vertrekt.

Nog belangrijker: de vormgeving leidt bezoekers door de elementen van de pagina.

Direct naar de belangrijkste onderdelen van de website: de conversiepunten.

Deze post is een gastblog van Hannie Mommers, grafisch vormgever, beeldend kunstenaar en blogger voor Momblog.

Vormgeving is kiezen en rangschikken van de elementen: lay-out, kleur, typografie en illustratie. Om deze effectief in te zetten voor je website geef ik hier acht belangrijke richtlijnen.

1. Help de bezoekers van je website

De allerbelangrijkste regel: maak het je bezoeker gemakkelijk. Internetgebruikers zijn ongeduldig en snel afgeleid. Is je website een zoekplaatje, onleesbaar of onduidelijk, dan zijn je bezoekers snel weer weg. Gebruiksvriendelijkheid, leesbaarheid en toegankelijkheid zijn de eerste en minimale vereisten van een goede vormgeving.

2. Denk ontvangergericht, niet zendergericht

Natuurlijk blijf je in eerste instantie bij jezelf: “Wat wil ik laten lezen/zien/horen op deze website”. Maar probeer je steeds af te vragen hoe de ontvanger daar tegenaan kijkt. Wat jij uit wilt stralen en wat de bezoeker verwacht, dient in hoge mate overeen te komen. Dat hoeft niet te betekenen dat je precies doet wat die bezoeker zou doen. Maar als de bezoeker een zakelijke website verwacht, dan kijkt hij raar op als de pagina’s een bonte kermis van kleurtjes en filmpjes zijn.

3. Het eerste begin

Maak een schema van de opbouw en de menustructuur van je website. Dat is altijd handig. Neem je de uitvoering niet zelf ter hand, dan is zo’n schema prettig als praatpapier. En als je alles zelf doet, is het een goed overzicht voor het eerste begin.

4. Vorm

Tegenwoordig zegt men KISS (Keep It Simple, Stupid). Ik ben nog van “Less is more” (Ludwig Mies van der Rohe). Beide uitspraken propageren natuurlijk hetzelfde: overdrijf niet. Dat geldt voor het aantal gadgets dat je toevoegt aan je website of blog, maar ook voor de keuzes die je maakt in de vormgeving.
Een amateur herken je aan de overdaad die hij op de website heeft. Onnoemelijk veel kleuren, diverse verschillende lettertypes – bij voorkeur ook nog schuin, vet, versmald, verbreed, hoofdletters.

Laat je niet gek maken door al die keuzes die je hebt. Om het op nog een andere manier te zeggen “In der Beschränkung zeigt sich der Meister”. Daarbij kun je het beste uitgaan van de mores op het web. Een ‘terugknop’ rechtsonderin je pagina, waarvoor de bezoeker ook nog eens moet scrollen? Niet slim. Je menu in ‘leuke’ plaatjes die voor een buitenstaander nietszeggend zijn? Niet doen.
Ken je echter de regels, dan mag je er van afwijken en kun je een gefundeerde keuze maken om het anders te doen.

5. Lay-out

Je website bestaat uit de verschillende onderdelen die je in je schema hebt uitgezet. Maar elke pagina op zich bestaat ook uit verschillende onderdelen. De belangrijkste zijn afzender (minimaal je logo of beeldmerk), navigatie (menu) en inhoud, maar je zult ook secundaire informatie hebben. Hoe ga je die rangschikken?

Ik adviseer je in ieder geval elke pagina volgens hetzelfde stramien op te maken, met hooguit de eerste pagina als afwijkende ‘binnenkomer’. Probeer daarin een logische flow te maken naar je conversiepunten, zoals bestelformulieren of je contactpagina.

6. Kleur

Kleur is niet alleen een kwestie van smaak. Kleur is een prima manier om je eigen karakter – en dus het karakter van je website – te tonen. Gedekte kleuren, als je zakelijk en serieus wilt overkomen. Felle kleuren voor een vrolijke website. 

Sommige kleuren kun je beter niet naast elkaar zetten. Kleuren die te dicht naast elkaar liggen (een goed hulpmiddel is de kleurencirkel van Itten) versmelten op een beeldscherm. Hebben de kleuren eenzelfde intensiteit, bijvoorbeeld rood en groen, dan gaan ze ‘schetteren’. Meer hierover in mijn blogpost over simultaan kleurcontrast.

Bij te weinig contrast of zelfs verkeerd contrast (ca 9% van de mannen heeft een vorm van kleurenblindheid) zal een deel van je website zo goed als onzichtbaar zijn. Hierbij geldt dat jij als maker geen invloed hebt op hoe de beschouwer zijn scherm heeft ingesteld. Ook is er een behoorlijk groot verschil tussen de schermen van pc en Mac. Dus het stijlvolle grijs-op-zwart dat op jouw scherm nog leesbaar is, zie ik op mijn scherm wellicht net niet.

Kleur is een heel goed middel om hiërarchie in je website aan te brengen. Bijvoorbeeld door de belangrijke delen op een lichtere achtergrond te zetten. Of door een actie een afwijkende kleur te geven. Belangrijk is hierbij een eenheid in stijl aan te houden. Als een afwijkend onderdeel eruit gaat zien als een banner, zal er juist geen extra aandacht naar uitgaan, maar wordt het genegeerd door de meesten.

7. Typografie

Gebruik niet te veel lettertypes door elkaar. Als je graag verschillende types wilt gebruiken voor kopjes en tekst, dan kun je het beste een schreefletter met een schreefloze letter combineren.

Maak voldoende onderscheid tussen de diverse onderdelen van je website. Een kop in een groter corps dan de tekst en wellicht zelfs in een andere kleur. Een tussenkopje dat duidelijk herkenbaar is. ZET GEEN TEKST IN HOOFDLETTERS, WANT JE BENT DAN AAN HET SCHREEUWEN! En het leest moeizaam. Wel kun je koppen – als ze kort zijn – in hoofdletters zetten.

Meer over richtlijnen voor typografie vind je in mijn eigen blog.

8. Tot slot

Realiseer je altijd dat niet iedereen eenzelfde computer heeft. Zelf werk ik met een Mac, maar de meesten hebben een pc. Ook zijn er steeds meer mensen die je website via een smartphone bekijken. Dat betekent dus ook dat verschillende mensen een website met verschillende browsers en schermresoluties bekijken. Een aantal van deze verschillen kun je met testtools vooraf controleren. Je kunt niet met alles rekening houden, maar als je je bewust bent van al die verschillen dan heeft dat ongetwijfeld een positieve invloed op je vormgeving.

Hannie Mommers ontwerpt voor Mommersontwerp.nl