One-page design: alles behalve éénzijdig

Sitebuilder aanbiedingen bekijken

Innovatief design met one pagers

Design en lay-out zijn altijd al belangrijke succesfactoren geweest in de online business. Het design bepaalt niet alleen de corporate identity, maar dient ook als centraal herkenningspunt voor klanten. Dit herkenningspunt is dan weer een belangrijke factor in de communicatie met klanten – hetzij in de 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 potentiele 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. Hierbij blijft de navigatie steeds in beeld, zodat de gebruiker altijd naar een ander element op de pagina kan springen.
  • Met markers waarmee je kan springen of andere call-to-actions 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 gereduceerde, minimalistische karakter van one-page website lay-outs versterken 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.


Storytelling in one-page design

In het ideale geval wordt de bezoeker op een one-page website meteen naar de conversie 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 o.i.d. Om de gebruiker in de gewenste richting naar de onderkant van de pagina 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 Mercedes campagne-homepage is een goed voorbeeld van storytelling in combinatie met interactiviteit. Door gebruik te maken van verschillende klikbare, interactieve elementen en video’s neemt de autofabrikant gebruikers mee op reis samen met de hoofdpersoon.


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

  • Websites van bedrijven waarvan het aanbod en de services duidelijk zijn afgebakend
  • Webshops met één product of productlijn, zoals dit food-lifestyleproduct. Website van Pumperlgsund (bron: https://www.pumperlgsund-bio.de/de/)

  • 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
  • Presentatie van projecten of campagnes, zoals deze van Denkwerk. Presentatie van het product Teye (bron: http://teye.denkwerk)

  • 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).


Voor- en nadelen van one-page design

In de goede context en met de juiste content en strategieën levert een single-page website veel voordelen op. De aandacht voor de essentie geeft de website met een one-page design over het algemeen een eenvoudig en duidelijk uiterlijk, waardoor het gebruik voor bezoekers makkelijk 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 de conversie wordt geleid. Het single-page website design is bij uitstek geschikt voor eenvoudige project- of evenementenwebsites, omdat alle relevante informatie goed zichtbaar op slechts een pagina kan worden geplaatst.

Single-page websites brengen echter ook nadelen met zich mee. Zoals hierboven al uitgelegd, is one-page website design relatief nieuw en betekent het een verandering van de typische navigatieroute. Niet alle gebruikers zijn er onmiddellijk weg van, wat tot een negatieve gebruikerservaring kan leiden.

“Content is king” is de rode draad in zoekmachine-optimalisatie. In single-page design wordt de content bewust gereduceerd tot de essentie – een uitgebreide content en keywordstrategie is echter lastig als 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 de omvang en grootte daarvan resp. 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.


Tip

Heeft je site al een favicon? Hier leer je hoe je een favicon creëert!

  • Gecertificeerde veiligheid

    Gecertificeerde veiligheid
  • Beste hostingbedrijf

    Beste hostingbedrijf
  • MKB Best Choice

    MKB Best Choice
  • Professionele support

    Professionele support
  • Hosted in Germany

    Hosted in Germany