Een website lay-out maken: 5 handige tips
De lay-out van je website is een belangrijk onderdeel van webdesign. Een lay-out draagt namelijk bij aan de gebruiksvriendelijkheid van je site. Maar wat is een website lay-out precies en hoe maak je een goed ontwerp? In dit artikel vind je 5 handige tips om een optimale website lay-out te maken.
Wat is een website lay-out?
Een website lay-out verwijst naar de manier waarop een pagina is opgebouwd en hoe een gebruiker de pagina bekijkt. Hierbij moet je denken aan waar teksten, afbeeldingen, knoppen en overige visuele elementen staan.
Waarom is een website lay-out belangrijk?
Een website lay-out is belangrijk, omdat het bijdraagt aan een gebruiksvriendelijke website. Bezoekers kunnen de pagina eenvoudig begrijpen om zo het doel te bereiken. Een goede lay-out maakt de kans groter dat bezoekers tot een conversie overgaan.
Welke soorten website lay-outs zijn er?
Gelukkig hoef je niet zelf een website lay-out uit je mouw te schudden. Er bestaan namelijk standaard lay-outs die wereldwijd herkenbaar zijn. Hieronder vind je er 10.
1. F-vorm
De F-vorm is een van de meest gebruikte lay-outs en volgt het kijkpatroon van een bezoeker. Diegene begint dus linksboven, kijkt vervolgens naar rechts, gaat eronder weer naar links en kijkt naar rechts. Hoe verder de bezoeker naar beneden gaat, hoe minder hij bekijkt.
Je kunt een F-vorm gebruiken als je veel informatie op een pagina wilt tonen en de aandacht van de bezoeker vast wilt houden. Gebruik ook informerende koppen, zodat de bezoeker eenvoudig kan scannen.
2. Z-vorm
Een Z-vorm volgt de leesrichting van de bezoeker. Net zoals bij de F-vorm leest iemand van links naar rechts, gaat naar onderen en leest weer van links naar rechts.
Gebruik een Z-vorm als je wilt dat bezoekers op een knop drukken om een conversie te doen. Bijvoorbeeld op een landingspagina.
3. Raster
Bij een raster staat informatie naast en onder elkaar op dezelfde manier. Hierdoor ontstaat er een geheel van informatie, zonder dat het onoverzichtelijk wordt. Een goed voorbeeld hiervan is YouTube. Meerdere video-stills en teksten staan als een raster op een pagina.
Je kunt een raster lay-out gebruiken als je een blog, portfolio of een website met video’s hebt.
4. Box
Een box lay-out heeft een grote box met daaronder 2 of meerdere kleinere boxen. In elke box vindt de bezoeker informatie in de vorm van een afbeelding, tekst of een combinatie van beide. Vaak heeft hij de mogelijkheid om door te klikken naar een andere pagina om meer informatie te vinden.
Gebruik een box lay-out als je een portfolio of gerelateerde producten wilt tonen.
5. Gesplitst
Bij een gesplitste lay-out deel je de pagina verticaal op in 2 delen. Zo kun je 2 categorieën uitlichten, of aan de ene kant een afbeelding en aan de andere kant een tekst plaatsen.
Een gesplitste lay-out is ideaal als je 2 onderwerpen wilt promoten of een minimalistische stijl wilt uitdragen.
6. Vaste zijbalk
Een vaste zijbalk zorgt ervoor dat een gebruiker snel informatie kan vinden of kan navigeren naar een andere pagina. De zijbalk staat aan de linker- of rechterkant van de pagina.
Een lay-out met een vaste zijbalk zie je vaak terug bij blogs waarin de belangrijkste informatie terugkomt op elke pagina. Of bij online tools waarbij de gebruiker naar diverse onderdelen kan navigeren, zoals in de Admin-omgeving van WordPress.
7. Magazine
Bij een magazine lay-out staat informatie, vaak een afbeelding en tekst, in een raster. Hierbij is het mogelijk dat uitgelichte informatie een grotere box heeft, zodat deze beter opvalt. Je ziet deze lay-out vaak terug bij online tijdschriften, nieuwssites of blogs.
8. Asymmetrisch
Een asymmetrische lay-out heeft ongelijke delen. Het ene deel van de pagina is groter dan de andere kant. Door een asymmetrisch ontwerp te gebruiken, kun je bezoekers naar een bepaald element sturen. Ook zorgt de lay-out voor speelsheid en creativiteit.
9. Uitgelichte afbeelding
Bij een lay-out met een uitgelichte afbeelding staat er grote visuele content bovenaan de pagina. Hierdoor kun je gelijk de aandacht trekken van de bezoeker. Een uitgelichte afbeelding zie je vaak bij een landingspagina van 1 specifiek product of specifieke dienst.
Door een lay-out met een uitgelichte afbeelding te gebruiken, trek je direct de aandacht van de bezoeker. Je kunt hiervoor een afbeelding, illustratie of video gebruiken.
10. Samengestelde afbeeldingen
Met een lay-out bestaande uit samengestelde afbeeldingen is het mogelijk om een bepaalde emotie bij de bezoeker op te roepen. Je kunt deze lay-out gebruiken om een complex product beter uit te leggen, zoals technische producten.
5 tips om een goede lay-out voor je website te maken
Door voor elke pagina een van de bovenstaande lay-outs te kiezen, zorg je voor een herkenbaar en gebruiksvriendelijk design. Maar hoe maak je dan een goede lay-out voor je website? Hieronder deel ik 5 tips met je.
1. Bepaal je doelgroep
Bepaal allereerst de doelgroep. Wie zijn je potentiële klanten? Welke pijnpunten ervaren ze? En welke oplossingen bied je? Door je doelgroep in kaart te brengen, achterhaal je welke elementen het belangrijkst zijn die je minimaal wilt opnemen in de lay-out. Een persona kan je hierbij helpen.
2. Kies de lay-out
Kies vervolgens de lay-out die het best past bij wat je op een pagina wilt vertellen. Verkoop je een complex product? Dan wil je de bezoeker voorzien van duidelijke informatie en afbeeldingen. Een lay-out met samengestelde afbeeldingen is dan de juiste keuze. Ben je een conversiepagina aan het maken? Gebruik dan een Z-vorm.
3. Maak een wireframe en test dit
Heb je een website lay-out gekozen? Dan kun je een wireframe maken op papier of via een tool als Sketch. Een wireframe is niets meer dan de eerste schets van de pagina waarbij je elementen een plek geeft, zodat er een verhaal ontstaat. Je hoeft nog niet na te denken over het uiterlijk, zoals kleuren.
Een wireframe bevat:
- de structuur
- de lay-out
- de navigatie
- de functionaliteit
Staat je wireframe? Test je ontwerp bij vrienden en familie om te achterhalen tegen welke problemen ze aanlopen. Je kunt hiervoor een gebruikerstest maken.
4. Bouw de website lay-out
Als je tevreden bent met je wireframe, is het tijd om het uiterlijk van je website lay-out te maken. Kies onder andere de websitekleuren, lettertypen, afbeeldingen en knoppen. Vervolgens bouw je de website lay-out. Dit kan op 3 manieren:
- Codeer de lay-out zelf met onder andere html, css, JavaScript en php.
- Huur een webdeveloper in die de lay-out voor je codeert.
- Gebruik een cms als WordPress en installeer een paginabouwer.
5. Publiceer de lay-out
Hoera, je bent klaar met je website lay-out maken. Nu is het tijd om ‘m te publiceren. Na publicatie ben je echter niet klaar. Evalueer of je lay-out het gewenste resultaat oplevert. Achterhaal hoe bezoekers de lay-out gebruiken via een tool als Hotjar. Je kunt onder andere achterhalen waar men op klikt, hoe ver er wordt gescrold en welke delen van de lay-out het meest worden bekeken. Zorg er ook voor dat je op de hoogte blijft van de laatste designtrends, zodat je hierop kunt inspelen en je site modern en actueel blijft.
Een lay-out voor je website maken, de conclusie
Een website lay-out is belangrijk om een gebruiksvriendelijke website te maken. Door een van de wereldwijd bekende lay-outs te gebruiken en de 5 tips in dit artikel te gebruiken zorg je ervoor dat je bezoekers een positieve ervaring krijgen bij je website.
Heb je geen designskills of technische kennis om zelf een website lay-out te maken? Gebruik dan de professionele, kant-en-klare templates van Website Builder. Er is een ruim aanbod en je kunt direct starten met je eigen website maken.
Welke website lay-out gebruik jij voor je webpagina’s? Laat het weten in een reactie!
Website Builder
Je eigen professionele website in slechts 3 stappen. Vandaag nog online.
- 7 dagen p/w support
- Gebruiksvriendelijke drag-and-drop-sitebuilder
- Geschikt voor elk apparaat
- Coderen is niet nodig
- Aanpasbaar naar smaak en wens
- Ruime keuze aan kant-en-klare templates
