Succesvoller met een goede website lay-out

Denk bij card design aan een blad waarop je Polaroid foto’s wilt ordenen. Elke card heeft zijn onderwerp, wellicht zelfs met illustratie of foto. Visueel is de card duidelijk afgezet tegen de achtergrond. De verschillende cards kunnen verschillend van grootte zijn, dat is geen probleem. Bekendste websites die dit ontwerp gebruiken zijn YouTube en Pinterest. Aangezien de cards zelf als zogeheten content containers functioneren, en ze dus ook zo kunnen worden versleept, is een card lay-out uiterst responsive. Een nadeel van card design is dat het lastiger is een duidelijke hiërarchie van informatie te tonen.

Heb je een product of een dienst te presenteren en wil je dat zo kort en bondig mogelijk kunnen laten zien? Dan is de one page lay-out wellicht wat voor jouw project. In plaats van te moeten navigeren tussen verschillende pagina's op de website, scrollt je bezoeker eenvoudigweg naar beneden om de verschillende delen van je product of dienst te bekijken. Let er op dat de content van je one page website niet te zwaar is, zodat de laadtijd van de pagina niet te snel omhoog gaat.

Deel je scherm op in verschillende boxen, en geef ze allen een eigen functie. Anders dan bij de card lay-out gebruik je hier geen algemene achtergrond en zou de box based lay-out ook een semi flat design kunnen hebben. Boxed based lay-out bestaat al een tijdje, en wordt door vele browsers goed ondersteund. Het leent zich uiterst goed voor responsive design.

Een magazine lay-out kan je zien als een krantenpagina. Bovenaan staat een grote, brede header, waarin vaak een illustratie en merknaam te vinden zijn. Onder de header staan soms artikelen in tekstvorm, illustraties in card design, of een combinatie van beide. Een kenmerk van de magazine lay-out is dat onder de header meerdere kolommen zijn geplaatst. Een ideale website lay-out voor pagina's die zich bijvoorbeeld met de actualiteiten bezig houden.

Vooral bij een zakelijke website is het van belang dat het gebruikte kleurenpalet aansluit bij dat van het betreffende bedrijf. Zo zorg je ervoor dat de website er als geheel uniformer uitziet en vertel je beter het verhaal van het bedrijf. Zorg voor kleuren die passen bij je product of verhaal. Wil je opvallen? Gebruik dan felle kleuren met een hoog contrast. Wil je een kalme en vertrouwenwekkende website maken? Kies dan voor milde (pastel) kleuren met een minder sterk contrast.

Wanneer een bezoeker op je website belandt, kijkt deze vaak vluchtig over de pagina om te kijken wat er te vinden is. Uit onderzoek is gebleken dat dit ‘scannen’ op verschillende manieren plaatsvindt, al naar wat voor soort pagina wordt bezocht. Pagina’s met veel tekst worden voornamelijk met een zogeheten F-patroon gescand. Dat betekent dat de header en het begin van de regels in de alinea’s de meeste aandacht krijgen. Is er echter veel vrije ruimte op de landingpage te vinden, met verschillende type content (header, illustraties, menupunten, etc.), dan scannen bezoekers de pagina vaker met een Z-patroon. Aanbieders van Software-as-a-Service producten maken hier vaak handig gebruik van, door langs die lijnen de belangrijkste informatie en CTA-knoppen te plaatsen.