One-page website design: alles behalve éénzijdig

  • Single-page design als alternatief voor standaardwebsites
Sitebuilder aanbiedingen
  1. Home
  2. Sitebuilder
  3. One-page website

Innovatief design met one pagers

Design en lay-out zijn altijd al belangrijke factoren voor succes geweest in de online business. Het design draagt niet alleen sterk bij aan de corporate identity, maar dient ook als centraal herkenningspunt voor klanten. Vanuit marketing oogpunt is dit herkenningspunt dan weer een belangrijke factor in de communicatie met klanten – hetzij in e-commerce of als dienstverlener.

Daarvoor moet de website er allereerst professioneel en aantrekkelijk uitzien. Als online reclamebord van een bedrijf is een website de eerste plaats waar een potentiële klant zoekt naar informatie en aanbod. Afhankelijk van de branche zijn er meer of minder innovatieve designoplossingen noodzakelijk. Voor wie een conventionele website niet toereikend is, zou een responsive single-page website design een alternatief kunnen zijn dat veel voordelen biedt ten opzichte van standaardwebsites.

Wat is one-page design?

Gewone websites lijken op traditioneel geprinte media. Bij het zoeken naar informatie en inhoud gaat de gebruiker van pagina naar pagina – je klikt online door de navigatie, alsof je door een papieren magazine zou bladeren.

Bij one-page website design, ook wel single-page website design of pageless design genoemd, wordt de gewoonte van het "van pagina naar pagina klikken" doorbroken en wordt een andere structuur gekozen: de website heeft maar één pagina. Alle relevante informatie die je normaal gesproken op verschillende subpagina’s zou vinden, staat nu op een enkele pagina. Zonder door te klikken zien gebruikers alle belangrijke content en de navigatie door de one-page website is heel gemakkelijk.

Navigatieconcepten in one-page design

Een one-page website bestaat uit een enkel HTML-document. De content wordt dynamisch geladen. Een klassieke website heeft doorgaans een aantal HTML-documenten die aan elkaar gelinkt zijn. Omdat de navigatie tussen de subpagina’s bij one pagers niet bestaat, wordt gebruik gemaakt van een speciaal navigatieconcept dat de gebruiker bij de hand neemt en het bezoek op de single-page website eenvoudig maakt.

  • De meeste one-page sites hebben een vaste navigatiebalk (sticky NavBar). Hierbij blijft de navigatie steeds in beeld, zodat de gebruiker altijd naar een ander element op de pagina kan springen. Dit gebeurt door middel van juist geplaatste anchorlinks.
  • Met markers waarmee je kan springen of andere call-to-actions (CTAs) springt de gebruiker eenvoudig naar verschillende plaatsen binnen het HTML-document.
  • Met behulp van een zogenaamde scroll spy weet de gebruiker altijd waar hij zich op de website bevindt.
  • Door het zogenaamde smooth scroll-effect springt de gebruiker vloeiend tussen de verschillende elementen of terug naar de bovenkant van de pagina. Een demo van dit effect kan je hier zien.
  • Vaak staan interactieve infographics en animaties in het middelpunt van een one pager. Een goed voorbeeld van interactieve graphics kan je zien op deze website over de geschiedenis van de Olympische Spelen.
  • Parallax scrolling wordt ook vaak gebruikt bij one-page website design. In tegenstelling tot het traditionele scrollen, bewegen de afzonderlijke elementen en de levels van de website niet even snel. De diepte van de website neemt toe door het gebruik van deze techniek. Een klassiek voorbeeld van parallax scrolling is mooi te zien in een header image van de game Firewatch.
  • Ook flat design wordt vaak gebruikt in combinatie met one-page design. Dit houdt in dat webdesigners bewust afzien van schaduwen, verloop, driedimensionale elementen en andere realistische textures. Flat design moet het simplistische, minimalistische karakter van one-page website lay-outs versterken en doet dit door te focussen op de eenvoud en structuur van de beperkte content. Bovendien zorgt het gereduceerde design voor een kortere laadtijd en een betere websiteprestatie. Eén van de beste voorbeelden van een goed flat design in combinatie met one-page design is de homepage van Microsoft.

Is one-page design iets voor mij?

De eenvoudige structuur van een one-page website biedt veel voordelen, maar is niet geschikt voor elke soort website. Voor wie is deze webdesign trend een goede keus?

De eerste beslissende factor is de content. Wanneer je veel informatie, misschien zelfs in verschillende categorieën, wilt publiceren, is een one pager niet geschikt. Het is dan beter om een duidelijke structuur en navigatie met subcategorieën of subpagina’s te maken, om gebruikers zo overzichtelijke informatie te verschaffen. Een berichtenportal zou bijvoorbeeld heel moeilijk te realiseren zijn met een one-page design. Met een veelheid aan informatie en categorieën is een gewone website met meerdere pagina’s een betere optie.

Afgezien van de hoeveelheid informatie is ook de intentie een cruciale factor. One-page websites zijn in het bijzonder geschikt voor het verkopen van producten of diensten. Een single-page website voor een bedrijf is ideaal om bezoekers duidelijk en overzichtelijk op de hoogte te brengen van de belangrijkste mededelingen en competenties. Wanneer de informatie op een zinvolle wijze is geordend, hoeven potentiële klanten belangrijke informatie niet bij elkaar te zoeken op verschillende subpagina’s, maar zien ze alle relevante informatie in één oogopslag. Marketing technisch gezien is een one-page design wellicht een wat minder geliefde keuze. Vanwege de (doorgaans) geringe hoeveelheid content is 't vanuit het zicht van zoekmachineoptimalisatie (SEO) een uitdaging de one-pager hoog te laten ranken.

Begin nu met je eigen one-page website

Storytelling in one-page design

In het ideale geval wordt de bezoeker op een one-page website meteen naar het conversie element geleid. Daarom hebben one pagers onderaan bijna altijd een CTA (call-to-action) die uitnodigt om te kopen, aan te melden, te bestellen, deel te nemen, etc. Om de gebruiker in de gewenste richting (i.e. richting de CTA knop) te leiden, moet de content goed georganiseerd en zinvol zijn. Het sleutelwoord is storytelling: wie de gebruiker wil overtuigen, moet een verhaal vertellen. One-page designs bieden een uitstekende mogelijkheid om het verhaal van een product, over de toepassing of over een campagne te vertellen. Het samenspel van tekst en multimedia content brengt een bijzondere gebruikersbeleving tot stand, omdat het lezen niet wordt onderbroken. De presentatie van het jaarrapport van ARUP vertelt een mooi verhaal over de uitdagingen waar ze in het jaar 2020 voor hebben gestaan hebben en hoe ze hiermee zijn omgegaan. Met een duidelijike CTA onderaan de pagina nodigen ze je uit meer te weten te komen over het bedrijf zelf en hun werk.

Voor- en nadelen van one-page design

Het one-page website design is niet voor alle project geschikt. Er zitten een aantal kenmerkende voor- en nadelen aan, die de keuze voor dit design zouden moeten beïnvloeden. Hieronder sommen we ze even voor je op.

    Voordelen

  • In de goede context en met de juiste content en strategieën levert een single-page website veel voordelen op. Met aandacht voor de essentie heeft de website een eenvoudig en duidelijk uiterlijk, waardoor het gebruik voor bezoekers eenvoudig en intuïtief is.
  • Door content consequent en vertellend te ordenen, kan een overtuigend verhaal worden verteld. Met een logische, opeenvolgende content kan je je aanbod en producten op een begrijpelijke manier presenteren. De voordelen en verkoopargumenten kan je duidelijker voor het voetlicht brengen, waardoor de gebruiker direct naar het conversie element wordt geleid. Het single-page website design is bij uitstek geschikt voor eenvoudige project-, product-, of evenementenwebsites, omdat alle relevante informatie goed zichtbaar op slechts een pagina kan worden geplaatst.


    • Nadelen

  • Single-page websites brengen echter ook nadelen met zich mee. Zoals hierboven al uitgelegd, is one-page website design relatief nieuw zijn niet alle gebruikers meteen weg van de a-typische navigatieroute.
  • “Content is king” is de rode draad in zoekmachineoptimalisatie (SEO). Aangezien in one-page website design de content bewust tot de essentie gereduceerd wordt, is een uitgebreide content- en keywordstrategie lastig wanneer je slechts één pagina tot je beschikking hebt. Dat betekent dat optimalisatie in one-page design meestal beperkt blijft tot een main keyword en topic-relevante secundaire keywords.
  • Afhankelijk van het aantal afbeeldingen en hun omvang en grootte, als ook de multimediale elementen kan het laden van een one-page website lang duren. Met het hierboven besproken flat design probeert men dit tegen te gaan. Bekijk ook onze favoriete website layouts voor meer inspiratie!

Samengevat: welke websites en projecten zijn geschikt voor een one-page design?

  • Websites van bedrijven waarvan het aanbod en de services duidelijk zijn afgebakend
  • De website van Glossarie draait er niet om heen. Zij bieden content creation diensten aan: ze schrijven teksten voor bedrijven. Een overzichtelijk website, rijk aan tekst en informatie, zonder schreeuwerig te zijn. (bron: https://glossarie.xyz)

    • one page website Plumperlgsund
  • Webvertegenwoordiging van agentschappen, zoals de site van agentschap Willow. Website van agentschap Willow (bron: http://solopine.com/willow/)

    • Website van agentschap Willow
  • Persoonlijke profielen of portfolio websites, bijvoorbeeld van beroemdheden, bloggers en freelancers, zoals de pagina van Melanie DaVeid. Website van de ontwerpster M. DaVeid (bron: http://melaniedaveid.com/)

    • one page design Melanie DeVeid
  • Wanneer we het over one-page product presentatie hebben, kunnen we er eigenlijk niet om heen. Ook de nieuwe iPhone 13 wordt weer in het bekende one-pager jasje gepresenteerd. Naar beneden scrollend lees je de nieuwe specificaties en onderaan  de pagina staat de optie om te bestellen. (bron: https://www.apple.com/nl/iphone-13/)

    • Website design Denkwerk
  • Event websites, zoals deze voor de de bruiloft van een Amerikaans stel. Website bruiloft jessandruss.us (bron: http://jessandruss.us/)

    • Single page website Jessandruss

In sommige gevallen zijn klassieke websites met meerdere pagina’s met een navigatiebalk en verschillende subpagina’s geschikter. Dit geldt in het bijzonder voor shops met een groot assortiment en voor websites met veel tekst en een sterke focus op content, of regelmatig wisselende content (zoals nieuwsportals).