Help Registreren

Basisprincipes van webdesign

Je ziet ze elke dag. En je hebt vast favorieten die je steeds weer bezoekt. Maar hoe kun je nou zelf een goede website ontwerpen? 

 

Als je aan je website begint, heb je miljoenen keuzes. Alles kan. En toch gebruiken succesvolle webdesigners vaak dezelfde principes als ze een website ontwerpen. Zo maken ze websites die er mooi uitzien en makkelijk te gebruiken zijn. En dat doen ze niet zomaar: uit onderzoek van Google blijkt dat bezoekers houden van simpele en bekende designs. 

 

In dit artikel kijken we naar een aantal basisprincipes van webdesign. Natuurlijk is daar nog veel meer over te zeggen, maar hiermee heb je alvast een goed begin en misschien wat meer houvast voor je eigen website.


Te veel keuze

Geef je iemand meer opties om uit te kiezen, dan wordt de kans steeds kleiner dat iemand ook echt kiest. En als ze dan toch kiezen, zijn mensen minder tevreden met die keuze. Dat voelt onlogisch, maar het is wel erg goed om te weten: te veel keuze werkt tegen

 

Het lijkt een goed idee om je bezoekers meteen alle keuze te geven. In de praktijk is dat vaak te veel informatie in één keer en kunnen mensen dan juist niet kiezen. Met het gevaar dat ze je website weer verlaten zonder ergens op geklikt te hebben.

 

Zo kan een pagina eruit zien, met goede keuzemogelijkheden. Het design laat de bezoeker zien wat hij eerst moet lezen en waar hij naartoe kan.

webdesign

Hoe gebruik je die kennis in je webdesign?

  • Kies eerst wat je van je bezoekers wilt. Wil je dat ze je een mail sturen, zich inschrijven voor je nieuwsbrief, iets kopen, naar je muziek luisteren, etc. Wat je ook doet op je website, moet naar dat doel leiden. 

  • Hou je navigatie simpel en kort. Een goede vuistregel is om niet meer dan 6 kopjes te gebruiken. Met meer koppen in je navigatie wordt het al een taak voor bezoekers om te kiezen.
overvolle navigatie
overzichtelijke navigatie
  • Bied alle keuzes op één plek aan. Het is verwarrend om één knop in de zijbalk te hebben en drie andere bij de tekst op je homepagina. In het ideale geval geef je mensen één keuze per pagina. 

  • Verdeel je producten in zinvolle groepen. Als je 25 stropdassen aanbiedt, zet ze dan niet allemaal op één pagina. Bedenk liever een handige onderverdeling. Je kunt dan op losse pagina’s productoverzichten maken, met alleen producten uit de passende groep.

Visuele hiërarchie

Als je het aantal keuzes hebt verminderd, is de volgende stap om te kijken wat het belangrijkst op een pagina is. Daar krijgen we met visuele hiërarchie te maken. Met formaat, kleur en positie kun je bezoekers laten zien wat het belangrijkst is en waar ze als eerste naar zouden moeten kijken. 

 

Bij het vormgeven van een pagina, wil je de belangrijkste onderdelen het meest laten opvallen in de layout. Minder belangrijke dingen hoeven minder zichtbaar te zijn. Als je voor het eerst een pagina maakt, wil je soms alle onderdelen op de pagina even groot maken. En toch doe je jezelf daar geen plezier mee; het geeft je bezoeker geen richting. 

 

Neem het voorbeeld hieronder. Die pagina geeft je een boel keuzes. Is het de bedoeling dat je contact opneemt? Dat je een shirt koopt? Dat je informatie over de diensten leest? Het is niet duidelijk. En met zes knoppen op de pagina, is het goed mogelijk dat je niet weet waar je moet beginnen. 

webdesign

Hoe zorg je voor visuele hiërarchie?

Wat je toevoegt met visuele hiërarchie is verschil tussen de onderdelen op een pagina. Zo kun je de aandacht trekken naar onderdelen die voor die pagina belangrijk zijn. Als je alles een grote letter geeft, omdat alles belangrijk is, is dat hetzelfde als niks belangrijk maken. 

 

Het punt is juist dat je sommige onderdelen de hoofdrol geeft. We weten al dat bezoekers te veel keuze ingewikkeld vinden. We kunnen dus al keuzes voor ze maken. Visuele hiërarchie heeft dus niet alleen met design te maken, maar ook met de doelen die je voor je website hebt.

 

Een paar hulpmiddelen: 

  • Formaat. Groter = belangrijker. Kleiner = minder belangrijk.
  • Kleur. Meestal hebben we het over kleur als een manier om je site persoonlijkheid te geven. Maar, je kunt er ook aandacht mee trekken. Geef knoppen bijvoorbeeld een opvallende andere kleur dan de rest van de vormgeving. Gebruik dat strategisch; je wilt ook niet te veel onderdelen die de aandacht trekken.
  • Positie. Informatie bovenaan de pagina is belangrijker. En informatie die links staat is meestal ook belangrijker. We bekijken pagina’s meestal in een F of Z patroon

 

Die principes kunnen we toepassen op de voorbeeldpagina die we eerder hadden. Met 6 knoppen op de pagina is het nog steeds wat te veel keuze, maar we kunnen op z’n minst duidelijk maken waar bezoekers eerst naar moeten kijken en wat we van ze verwachten (namelijk een mail sturen).

webdesign

Je kunt dit natuurlijk ook op je eigen website gebruiken. Kijk dan ook naar:

 

  • Koppen. De simpelste manier om hiërarchie in je pagina te krijgen is met verschillende koppen. Gebruik één grote kop (en ook echt maar één) bovenaan de pagina. Als je daaronder veel tekst hebt, kun je die weer opdelen in middelgrote en kleine koppen.
webdesign koppen
Als je de koppen op die manier gebruikt, help je niet alleen je bezoekers. De zoekmachine begrijp ook beter wat er belangrijk is op de pagina. En dat helpt je SEO weer.
  • Begin met een standaard pagina-opbouw. Als je een nieuwe pagina toevoegt, kun je kiezen voor een standaard pagina-opbouw. Daar hebben onze designers al gekeken naar het webdesign, layout, hiërarchie en witruimte staan al klaar. Ze zijn zo opgebouwd dat ze bezoekers goed door de pagina leiden. Je hoeft ze alleen nog te vullen met je eigen teksten en foto’s.

Witruimte

“Witruimte” is de lege ruimte rondom de verschillende onderdelen op een pagina. Die hoeft natuurlijk niet wit te zijn, maar wel leeg.

 

Die lege ruimte is geen verspilling, maar helpt bezoekers om de verschillende onderdelen te herkennen. Het geeft ademruimte aan een pagina en maakt het makkelijker om een website te lezen en te gebruiken. Het is het verschil tussen zoeken in een overvolle, ongeorganiseerde kast en zoeken in een opgeruimde, goed ingedeelde kast. 

 

Witruimte helpt ook om duidelijk te maken welke onderdelen bij elkaar horen. Wat dichtbij elkaar staat, hoort samen. Wat ver uit elkaar staat, zijn verschillende onderdelen. 

 

Hier is de voorbeeldpagina nog een keer, maar nu zonder witruimte.

webdesign witruimte

Zo maak je meer witruimte op je website

  • Met het element Afstand kun je lege ruimte boven of onder een element zetten. 

  • Met het element Kolommen kun je lege ruimte naast een element maken. Je kunt bijvoorbeeld een lege kolom gebruiken tussen twee gevulde kolommen. 
jimdo kolommen
  • Horizontale lijnen kunnen je ook helpen om een pagina op te delen in verschillende stukken.
     
  • Tekst heeft ook ademruimte nodig. Als je je teksten opdeelt in korte alinea’s en er tussenkoppen tussen zet, worden je teksten makkelijker leesbaar. 

 

Het voorbeeld hieronder, van webdesigner Mateusz Widuch, laat zien hoe visuele hiërarchie en witruimte in de praktijk kunnen werken. Door de ruimte tussen de onderdelen ontstaat een rustige pagina. Het is duidelijk hoe de informatie verdeeld is over de pagina en wat de designer wil dat je doet.

webdesign

Bij twijfel, kies voor een simpele website

Bij het ontwerpen van je website maak je steeds keuzes over wat je in je pagina opneemt. Dat wordt een stuk makkelijker als je vooraf je doelen en prioriteiten hebt uitgezocht. Dan weet je goed waar je je bezoekers naartoe wilt leiden. 

 

Goed om te onthouden: voor bezoekers is een simpele website eigenlijk altijd beter. Bied niet te veel keuzes tegelijk aan, zet ze in een logische volgorde en zorg voor voldoende lege ruimte op de pagina, zodat de belangrijke onderdelen opvallen.

Frank van Oosterhout  - Jimdo

FRANK VAN OOSTERHOUT

Jimdo allrounder


Commentaar schrijven

Commentaren: 1
  • #1

    Negin (woensdag, 26 oktober 2016 12:44)

    Hai, dank voor deze verhelderende info. Heel fijn omdat alles zo leesbaar en goed bij de hand te hebben. Succes!