Succesvoller met een goede website layout

Sitebuilder aanbiedingen
  1. Home
  2. Sitebuilder
  3. Website layout

Een goede website layout maakt het verschil

De layout van je website is één van de belangrijkste factoren voor je online succes. Aangezien je maar één keer de mogelijkheid hebt een eerste indruk te maken, is het éxtra belangrijk dat dit de juiste is. STRATO helpt je hierbij met een aantal tips. De eerste indruk is op de visuele eigenschappen van je website gebaseerd. Hierna pas is de content van belang. Het is aan te raden om te beginnen met een grove schets van je website, een zogeheten mock-up.

Denk hier goed over na, zodat je de verschillende elementen van je website optimaal gebruikt. Wat zien de bezoekers als eerste? Hoe gaat het menu eruit zien? Hoe geef ik het privacy statement vorm? Er schieten je vast tientallen vragen te binnen wanneer je hierover nadenkt. Om je een beetje op weg te helpen, bespreken we hieronder een aantal standaard website layouts en hun veelgebruikte functies. Dit hoeft je er overigens niet van te weerhouden zelf creatief bezig te gaan met een eigen ontwerp!

  • Stap 1: Kies je gewenste domeinnaam
  • Stap 2: Kies een passende website template
  • Stap 3: Selecteer de gewenste pagina’s en vul de teksten en afbeeldingen in
  • Stap 4: Opslaan en de website lanceren!
Naar sitebuilder aanbiedingen

Layout voorbeelden

We hebben een kleine greep gedaan uit een aantal gangbare website layouts. Hieronder vind je onze favorieten.

  1. (Semi) Flat design

    Hip, toegankelijk en intuïtief. Gebruik het minimalistisch 2D (semi) flat design wanneer je simpele, overzichtelijke websites wilt bouwen, waar de bezoeker eenvoudig de weg vindt. Met dit design is er weinig plaats voor details en spelen kleur en lettertype een grote rol. Ideaal voor bijvoorbeeld cartoons of simpele websites met infographics!

  2. Card design

    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 layout uiterst responsive. Een nadeel van card design is dat het lastiger is een duidelijke hiërarchie van informatie te tonen.

  3. One page design

    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 layout 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.

  4. Box based design

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

  5. Magazine layout

    Een magazine layout 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 layout is dat onder de header meerdere kolommen zijn geplaatst. Een ideale website layout voor pagina's die zich bijvoorbeeld met de actualiteiten bezig houden.

  6. Kleurenpalet

    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.

  7. Leespatronen

    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.

SmartWebsite biedt het allemaal

Al met al is het lastig om te zeggen wat een goede website layout is. Naast dat dit per branche verschilt, kan wat vandaag de dag gezien wordt als een moderne, vernieuwende layout, over een jaar door velen als achterhaald en oubollig worden ervaren. STRATO SmartWebsite biedt hier de mogelijkheid om je website layout eenvoudig en snel aan te passen, zonder dat je aan je content hoeft te komen. Mocht ook de content een update nodig hebben, zijn aanpassingen aan teksten en afbeeldingen eenvoudig door te voeren.

STRATO SmartWebsite biedt verschillende stijlen en website layouts. Uiteraard is het belangrijk dat deze passend zijn bij het thema van je website. De geïntegreerde AI-functie helpt je daarom een passend design en een geschikte websitestructuur te genereren. Deze layout kun je natuurlijk zelf nog aanpassen, door bijvoorbeeld kleuren en indeling te wijzigen.

Vergeet niet tijdens het ontwerpen van je website ook aan lettertype, typografie, en de responsiviteit van je design en je images te denken. Overweeg voor intuïtieve navigatie om middels een hamburger menu de navigatie centraal en overzichtelijk op je website zichtbaar te plaatsen. Daarnaast kan je met rankingCoach je website nog SEO optimeren en ook op het HTML deel van je website punten scoren voor je Google ranking.

Dus, wanneer je eenvoudig en goedkoop een website wilt maken, maar je toch wilt onderscheiden, dan ben je bij STRATO aan het juiste adres!

Ontdek SmartWebsite