Een website van één pagina biedt geen enkele mogelijkheid om je te verstoppen. Er is geen menu om een zwak punt te verbergen en geen tweede pagina om de dingen die niet op de website pasten, onder te brengen.
Alles wat de bezoeker nodig heeft, staat op één rol, in één volgorde. Die volgorde vormt het hele ontwerp.
Doe het goed en de website leest als een overtuigende verkooppresentatie. Doe het fout en het leest als een eindeloze scrollbalk.
De acht onderstaande voorbeelden van websites van één pagina doen het allemaal goed, elk op hun eigen manier. Sommige zijn persoonlijke merkpagina's, ontworpen om een baan te vinden. Eén website runt een compleet interieurontwerpbureau met slechts één scrollbeweging.
Wat ze gemeen hebben, is een duidelijke taakomschrijving voor elk scherm. Gebruik de onderdelen die bij jouw werk passen.
Wat is een website van één pagina?
Een website met één pagina plaatst alle inhoud op één doorlopende pagina. In plaats van te klikken tussen Home, Over ons, Werken en Contact, scrollt de bezoeker achtereenvolgens door deze secties.
Een vaste navigatiebalk springt meestal direct naar elk afzonderlijk item. Dit wordt ook wel een single-page- of single-scroll-site genoemd en is de eenvoudigste structuur op het web: één URL, één laadtijd, één pad.
Websites met één pagina lenen zich goed voor een gerichte boodschap. Denk bijvoorbeeld aan een freelancer die één dienst aanbiedt, een ontwerper die één portfolio presenteert, of een studio die de beelden voor zich wil laten spreken.
Als je vijf verschillende diensten aanbiedt en een blog hebt met 40 berichten, ben je dit format ontgroeid. Maar als je één ding te zeggen hebt en dat goed wilt overbrengen, is het moeilijk om een beter format te vinden.
De meest gerichte versie van het format is een landing page, opgebouwd rond één enkele actie in plaats van een volledig persoonlijk of studioverhaal.
Wat maakt een geweldige website van één pagina?
Bij elk sterk voorbeeld komen dezelfde paar beslissingen steeds weer terug:
- Eén bericht, zoals weergegeven op het eerste scherm. De bezoeker moet weten wie je bent en wat je doet voordat hij of zij verder scrollt. Geen inleiding.
- Een rolvolgorde die betekenis heeft. De beste websites met één pagina zijn opgebouwd als een betoog: pakkende openingszin, bewijs, persoonlijkheid, vraag.
- Eén primaire actie. Huur me in, bekijk mijn werk en neem contact op. Eén herhaalde call-to-action (CTA) is effectiever dan vijf concurrerende.
- Visuele onderbrekingen die het scrollen in stukken hakken. Kleurvlakken, afbeeldingen die de hele pagina vullen of ruime witruimte voorkomen dat een lange pagina eruitziet als één grijze strook.
- Snel laden. Eén pagina betekent één kans op een goede eerste indruk. Grote hero-video's en ongecomprimeerde afbeeldingen zijn de belangrijkste redenen waarom websites met één pagina bezoekers verliezen.
Houd de voorbeelden naast die lijst terwijl je leest.
Persoonlijke merk-one-pagers die typografie centraal stellen
Als het product een persoon is, speelt de typografie een cruciale rol. Op beide websites staat de rol, en niet de naam, centraal.
Jon Kirschner
Jon Kirschner Hij is een merk- en groeistrateeg, en dat staat op zijn website vermeld in letters die vier keer zo groot zijn als zijn eigen naam.
De naam staat klein in een pilvormige navigatiebalk en de woorden "Brand & Growth Strategist" vullen het hele scherm.
Onderaan de pagina zet een eenvoudige inleiding ("Ik bouw merken die converteren") de toon.
Onderdelen zoals "Waar ik echt goed in ben" en "Wat ik lees" geven het een menselijk tintje dat de meeste strategiesites overslaan. Het leest als de persoon zelf, niet als een standaardsjabloon.
Leen dit: Zorg dat de bezoeker meer meekrijgt dan alleen je naam. Ze komen immers om te weten wat je doet, dus benadruk dat duidelijk, in een lettertype dat ze niet kunnen missen.
Jordon Melo
Jordon Melo, een mediaplanning- en inkoopstrateeg in Toronto, lost het klassieke probleem van één pagina op: hoe navigeer je door een lange scrollbalk? Hij nummert de navigatie.
"01. Over ons, 02. Korte samenvatting, 03. Werkervaring, 04. Referenties, 05. Contact" komt exact overeen met de scrollvolgorde, waardoor het menu tevens dienstdoet als inhoudsopgave.
Een koptekst met schreefletters en een gebogen portret geven een pagina die geschikt is voor een cv een warme uitstraling. Het is een websiteontwerp van één pagina dat zich gedraagt als een website met meerdere pagina's, zonder de laadtijden.
Leen dit: Nummer je navigatiebalk zodat de scrollvolgorde overeenkomt. Een lange pagina voelt minder lang aan als de bezoeker kan zien waar hij zich op de pagina bevindt.
Eénpagina-documenten met gesplitst scherm en portretmodus.
Twee websites, één idee: plaats de persoon en de actie op het eerste scherm, zodat een drukke bezoeker nooit hoeft te scrollen om iets te doen.
Simrran Benvait
Simrran Benvait Ze is marketingspecialist in Brits-Columbia, en haar held doet al het werk in één scherm.
Een portret vult de linkerhelft en loopt met een zachte golfbeweging over in een crèmekleurig paneel aan de rechterkant. Op dat paneel staan de begroeting, de functie en drie contactgegevens: e-mail, LinkedIn en telefoonnummer.
Een recruiter kan zien wie ze is en haar een bericht sturen zonder te hoeven scrollen. De scheiding tussen de schermen zorgt ervoor dat het geheel niet aanvoelt als twee aan elkaar geplakte dozen.
Leen dit: Plaats je functie, locatie en contactgegevens op het eerste scherm. Op een one-pager is je visitekaartje het belangrijkste onderdeel, dus behandel het ook zo.
Noor Harajli
Noor Harajli, een social media- en marketingcoördinator uit Londen, maakt haar enkele scroll van extra grote rode kaarten op een zwarte achtergrond.
Elk onderdeel, profiel, vaardigheden, werk, staat in een eigen afgerond blok, waardoor de pagina leest als een reeks kamers in plaats van één lange strook.
Het gebruik van een monospace lettertype duidt op een creatief-technische identiteit, en de kaarten "Contentproductie" en "Kunst & Ontwerp" linken direct naar echte projecten. Het bewijst dat een website met één scrollbalk een volledig cv en een portfolio kan bevatten zonder overvol te raken.
Leen dit: Verdeel een lange tekst in afgeronde kleurvlakken. Duidelijke visuele scheiding zorgt ervoor dat één pagina veel informatie bevat zonder dat de lezer de draad kwijtraakt.
Beeldgestuurde portfolio's van één pagina
Wanneer het werk zelf de presentatie is, vullen de afbeeldingen de pagina en staat de tekst op de achtergrond. Beide presentaties beginnen met een afbeelding die de hele pagina vult.
Dillan Vanner
Dillan Vanner is een fotograaf, en de website opent zoals een goede afdruk dat doet: één afbeelding die de hele pagina vult, van rand tot rand, vóór één woord tekst.
Een documentairekader vult het eerste scherm, het woordmerk staat klein en gecentreerd, en de slogan "Capturing the World and Everything in It" onderstreept dit punt.
Een minimalistische navigatiebalk (Home, Portfolio, Over ons) en een rij contactpictogrammen vormen de enige vormgeving. De foto doet het werk.
Leen dit: Voor een fotopagina van één pagina is het belangrijk dat één krachtige afbeelding het eerste scherm vult. Je beste foto is een betere blikvanger dan welke kop dan ook.
cmc designworks
cmc designworks, een architectuur- en interieurstudio, laat de tekst achterwege en laat het werk zelf centraal staan.
De homepage opent met een asymmetrisch fotoraster dat de hele pagina beslaat: renderings van gebouwen, interieurfoto's, bewegwijzering, met een bijna onzichtbare navigatiebalk die erboven zweeft.
Voor een visuele discipline is dit de juiste keuze. De beelden verkopen, dus niets kan daarmee concurreren. Het is een van de meest overzichtelijke voorbeelden van een scrollende website die je zult vinden, juist omdat er zoveel vertrouwen is in de fotografie.
Leen dit: Als je werk visueel is, laat dan de woorden achterwege. Een raster van afbeeldingen over de volledige pagina als hero-afbeelding zegt meer dan een alinea ooit kan.
Service- en talentoverzichten van één pagina
Een website van één pagina is niet alleen bedoeld voor individuen die een portfolio presenteren. Deze twee elementen scrollen als een pitch door elkaar, waardoor de hele boodschap in één keer duidelijk wordt.
Arrowood Design
Arrowood DesignEen interieurontwerpbureau uit de Bay Area presenteert een compleet dienstenpakket op één pagina. De pagina's zijn als een verkooppresentatie opgebouwd.
Bovenaan staat de belofte "Tijdloze Luxe", boven een geschilderde muurschilding van een kerkuil. Daaronder volgen de aangeboden diensten, de positionering "Niet zomaar decoratie", het verhaal van de oprichtster ("Wie is Lisa?"), projecten en contactgegevens.
De redactionele labels in hoofdletters houden het geheel bij elkaar. Tegen de tijd dat je de onderkant bereikt, heb je een volledig verkoopgesprek in de juiste volgorde gelezen, zonder ook maar één keer te hoeven klikken.
Leen dit: Een document van één pagina kan een complete dienstverlening presenteren. Structureer de tekst als een verkooppresentatie: belofte, diensten, bewijs, de persoon, en dan het verzoek.
Kaitlyn Barry
Kaitlyn Barry is een acteur, regisseur en performer in Perth. De website opent met de naam over de volledige breedte boven een enkel portret, gemaakt tijdens het gouden uur, zoals een portretfoto een castingprofiel opent.
Daarna gaat het meteen ter zake: een kort profiel, gevolgd door een lijst met recente filmcredits, zoals The Twelve en CephalopodNeem dan contact op.
De rolomschrijving is op dezelfde manier geordend als een castingoproep: wie ze zijn, wat ze hebben gedaan, hoe je ze kunt bereiken. Niets staat dat in de weg.
Leen dit: Als mensen je aannemen op basis van je cv, zet dat cv dan op de pagina. Begin met je functie, vermeld je ervaring en zorg ervoor dat "direct beschikbaar" niet te missen is.
Wat de beste websites van één pagina gemeen hebben.
Bekijk de acht voorbeelden samen en het patroon is consistent. De beste websites van één pagina zijn niet de mooiste. Het zijn de websites waar elk scherm een functie heeft en de functies in de juiste volgorde worden uitgevoerd.
Ze houden vast aan één boodschap en herhalen één actie. Ze gebruiken een echt visueel systeem om de scrollstructuur vorm te geven: genummerde navigatie, kaarten met kleurblokken, een raster van afbeeldingen, een opgesplitste hero-sectie.
Ze stellen het belangrijkste voorop: rol en contact voor de werkzoekenden, werk voor de studio's.
En ze houden het simpel, want een website van één pagina betekent maar één download en één eerste indruk. Eenvoudige websitevoorbeelden winnen hier vaker dan uitgebreide. Beheersing is de kunst.
Wanneer een website van één pagina werkt (en wanneer je meer dan één pagina nodig hebt)
Het formaat heeft een maximum. Een website van één pagina is geschikt wanneer je boodschap gefocust is en de inhoud beperkt is.
Zodra je meerdere verschillende doelgroepen hebt, een groeiende blog of een catalogus met diensten die elk een eigen presentatie verdienen, begint één enkele scrollbeweging zich tegen je te keren.
Als je een traditionele kunstenaar bent in plaats van een ontwerper, werkt een lay-out met meerdere pagina's meestal beter voor je werk. websites met artiestenportfolio's Roundup behandelt die route. Hier is de eerlijke waarheid:
Als je in de rechterkolom zit, maak dan extra pagina's aan. Alles op één scrollbalk proppen om een minimalistische look te creëren, is een beslissing waar je bezoekers voor betalen.
Hoe bouw je je eigen website van één pagina?
Je hoeft er geen van beide te coderen. Begin met het schrijven van de scrollfunctie voordat je een sjabloon aanraakt.
Zet je secties in de volgorde waarin een vreemde ze zou aantreffen, en schrap er vervolgens één. De meeste websites van één pagina hebben één sectie te veel.
Voor het bouwen van een website biedt een websitebouwer die primair gericht is op portfolio's meer voordelen dan een algemene, omdat de lay-outs al zijn ontworpen voor een doordachte scrollbeweging.
Pixpa's sjablonen voor websites van één pagina Ze bieden je een vast verankerd navigatiepaneel, afbeeldingen over de volledige breedte van het scherm en een ingebouwd contactblok, direct uit de doos. Je kunt ze in actie zien in de portfolio's van één pagina galerij.
Met aangepaste CSS kun je de typografie of de spatiëring naar wens aanpassen. Jon Kirschner en Noor Harajli deed.
Als u liever eerst specifieke tools voor één pagina wilt vergelijken, bekijk dan ons overzicht van websitebouwers voor websites van één pagina is een nuttig startpunt.
Elke bovenstaande locatie is gebouwd op PixpaDat geeft een goede indicatie van hoe het formaat eruit kan zien zonder ontwikkelaar.
Wat je ook bouwt, houd de afbeeldingen compact en de secties beperkt. De beperking zit in het ontwerp.
The Bottom Line
Een website van één pagina werkt dwingend. Je wordt gedwongen te beslissen wat er echt toe doet en dat in de juiste volgorde te zetten, omdat er geen tweede pagina is om de rest te verbergen.
De voorbeelden variëren van een strateeg die op zoek is naar een baan, een creatieveling uit Londen, een documentairefotograaf, een architectenbureau, een luxe interieurontwerpbureau tot een professionele acteur.
Ze werken allemaal om dezelfde reden: een duidelijke boodschap, een weloverwogen scroll, één concrete vervolgactie.
Schrijf je tekst als een betoog, begin met de belangrijkste conclusie en schrap de tekst tot alleen de essentie overblijft.
Veelgestelde vragen over websites van één pagina
Wat is een one-page website?
Een website met één pagina plaatst alle inhoud – over ons, werk, diensten, contact – op één scrollbare pagina in plaats van deze over verschillende pagina's te verdelen.
Ook wel een single-page of single-scroll website genoemd, is dit type website geschikt voor een gerichte boodschap: één dienst, één portfolio of één persoonlijke presentatie. Een vaste navigatiebalk brengt de bezoeker meestal direct naar de betreffende sectie.
Zijn websites van één pagina goed voor SEO?
Ze kunnen goed scoren in de zoekresultaten voor je naam en een of twee gerichte zoektermen, wat vaak voldoende is voor een persoonlijk merk of een bedrijf dat slechts één dienst aanbiedt.
Waar ze moeite mee hebben, is de breedte. Omdat Google voornamelijk pagina's rangschikt, en niet websites, kan één pagina zich maar op een beperkt aantal zoekwoorden richten voordat de inhoud met zichzelf concurreert. Als je op veel onderwerpen wilt scoren, heb je meer pagina's nodig.
Hoeveel secties moet een website van één pagina hebben?
Voldoende informatie om de boodschap over te brengen, en niet meer. De meeste sterke websites met één pagina bevatten vijf tot zeven secties: een hero-sectie, een korte beschrijving, de werkzaamheden of diensten, bewijsmateriaal en contactgegevens.
Als je merkt dat je een achtste pagina toevoegt, controleer dan of de website daadwerkelijk bedoeld is om uit meerdere pagina's te bestaan.
Eén pagina versus meerdere pagina's: wat is beter?
In abstracte zin is geen van beide beter. Ze lossen verschillende problemen op.
Een website van één pagina is ideaal voor gerichte boodschappen, snelle besluitvorming en visuele portfolio's.
Een website met meerdere pagina's is een goede keuze als je verschillende doelgroepen hebt, een groeiende blog beheert of meerdere diensten aanbiedt die elk een eigen pagina verdienen. Kies op basis van de diepgang van de inhoud, niet op basis van de modernste uitstraling.
Waar kan ik meer voorbeelden vinden van websites met één pagina?
Naast de acht die hier staan, zijn er ook galeries zoals One Page Love en Awwwards'De collectie op één pagina is zeker de moeite waard om doorheen te scrollen voor designinspiratie.
Kijk tijdens het browsen verder dan de afbeeldingen: bestudeer de scrollvolgorde en de call-to-action, want dat is het gedeelte dat je daadwerkelijk moet kopiëren.
Wat kost een website van één pagina?
Als je het zelf bouwt met een websitebuilder, kost een site van één pagina hetzelfde als een kleine site: ongeveer de prijs van een abonnement plus een domein. Controleer de meest recente abonnementsprijzen voor actuele cijfers.
Het inhuren van een ontwerper voor een op maat gemaakte one-pager kost tussen de paar honderd en een paar duizend euro, afhankelijk van de hoeveelheid werk. Voor de meeste mensen op deze lijst voldeed een sjabloon prima.