Probeer je de homepage van je website te herontwerpen en loop je steeds vast met het kijken naar algemene "inspiratie-galerijen" die allemaal door elkaar heen lopen? Je bent niet alleen. Na het controleren van meer dan 200 kleine bedrijfs- en SaaS-homepages de afgelopen twee jaar, kan ik je zeggen dat de grootste reden dat een homepage onderpresteert niet slechte smaak is - het is dat de eigenaar geen specifiek spelplan kon aanwijzen dat hij probeerde te volgen.
Een goede homepage doet één taak zeer goed: het overtuigt een vreemde, in onder vijf seconden, dat hij op de juiste plek is en dat de volgende klik het waard is. Al het andere is decoratie.
In deze gids lopen we 9 van de beste website homepage-voorbeelden op het internet op dit moment - over SaaS, DTC en dienstverlening. Voor elk van hen krijg je:
- Wie het is voor (zodat je weet wanneer je het moet kopiëren)
- Wat het goed doet (de specifieke mechaniek, niet vage "schoon ontwerp")
- Wat je kunt stelen (het exacte patroon dat je deze week kunt toepassen)
Aan het eind laat ik je zien hoe Wegic's conversatieve AI je helpt om een homepage te bouwen met dezezelfde patronen in onder een minuut - geen sjablonen, geen grid-worstelen.
Waarom je homepage nog steeds je #1 conversie-asset is in 2026
Voordat we de voorbeelden bekijken, een korte uitleg over de cijfers die elke homepage-keuze moeten bepalen:
- 50 milliseconden. Dat is hoe lang het duurt voor een bezoeker om een esthetische eerste indruk te vormen, volgens een peer-reviewed studie van Lindgaard et al. in Behaviour & Information Technology - het meest geciteerde bewijs in moderne UX-onderzoek.
- 75% van de gebruikers oordeelt over de geloofwaardigheid van een bedrijf op basis van de website-ontwerp, volgens de Stanford Web Credibility Project.
- 53% van mobiele bezoekers verlaten een pagina die langer dan 3 seconden duurt om te laden, volgens Google's mobiele pagina-snelheidstests.
- Google's huidige Core Web Vitals grenzen voor een "goede" pagina-ervaring: Largest Contentful Paint onder 2,5s, Interaction to Next Paint onder 200ms, Cumulative Layout Shift onder 0,1.
De les is niet "maak je site mooi." Het is dat snelheid, duidelijkheid en directe waardecommunicatie meetbaar zijn - en elk voorbeeld hieronder optimaliseert voor deze drie knoppen.
Korte opmerking: Homepage versus Landing Page
Deze twee termen worden constant verward, en de onderscheid is belangrijk. Een homepage is je voordeur: het dient meerdere doelgroepen, presenteert je merk en leidt mensen naar de juiste volgende stap. Een landing page is gebouwd voor een enkele campagne of advertentie, meestal verwijdert navigatie en bestaat om één specifieke doelgroep op één specifieke actie te converteren. De voorbeelden hieronder zijn homepages, geen landing pages. Kopieer geen landing page patroon op je homepage - je verwart terugkerende klanten, pers en partners.
De 7-laag anatomie van een hoog-converterende homepage
Elke goede homepage op het web heeft een herkenbare skelet. Hier is de 7-laag anatomie die ik gebruik bij het controleren van homepages - je zult elk van deze lagen herkennen in de voorbeelden hieronder:
- Hero - Logo, primaire navigatie, hoofdtekst, subtekst, primaire CTA, hero-afbeelding of video. Je "elevator pitch in de deuropening."
- Value Proposition Band - Een korte rij (3-4 items, icoontjes of cijfers) die *waarom jij, niet zij* beantwoordt.
- Social Proof Strip - Klantlogos, persvermeldingen, recensiesterren of gebruikersaantallen. Geplaatst direct onder de hero of na de eerste scroll.
- Product / Dienst Grid - Wat je daadwerkelijk doet, opgedeeld in 3-6 modulaire blokken. Elke blok leidt naar een dieper gelegen pagina.
- Narratieve Sectie - Het emotionele verhaal: case study, founder-bericht, missieverklaring of demo-video.
- Vertrouwen & Bewijs - Testimonials met gezichten, genoemde case studies, certificaten, veiligheidsbadges.
- Footer CTA - Het laatste "als je nog niets hebt geklikt, klik hier" blok.
Als een laag ontbreekt of zwak is op je homepage, heb je een conversielek. Gebruik de voorbeelden hieronder om te zien hoe de beste merken elke laag vullen.
3 SaaS & Tech Homepage Voorbeelden (Duidelijkheid Wint)
1. Linear - De Meesterklas in 7-woordige Duidelijkheid
Wie het is voor: B2B SaaS, ontwikkelaars tools, elk product met een scherp ICP.
Linear verkoopt projectmanagementsoftware aan ingenieurs, en de homepage is een sjabloon dat elke SaaS-ondernemer moet bestuderen. De hero-headline - "Linear is een doelgerichte tool voor plannen en bouwen van producten" - doet de hele klus van de fold in één, ongehedgde zin.
Wat werkt: Geen jargon. Geen "empowering" of "unlock." De sub-headline voegt één concreet voordeel toe, en er is een enkele CTA: "Begin nu." Geen drijvende chatwidget, geen carousel, geen dubbele CTAs die concurrentie aangaan om aandacht.
Wat je moet stelen: Laat je huidige hero-headline door een eenvoudig testje gaan - kun je in 5 seconden een eerste bezoeker duidelijk uitleggen wat je product doet aan een vriend? Als niet, herschrijf het tot ze dat kunnen. Linear investeert zijn duidelijkheidsbudget in begrip, niet in cleverheid.
Afbeelding van Linear
2. Stripe - Een Developer-First Hero, een Marketer-Ready Body
Wie is het voor: Producten die twee verschillende kopers dienen (een technische gebruiker en een economische koper).
De homepage van Stripe is al tien jaar een referentiepunt vanwege de manier waarop het twee doelgroepen in één scroll bedient: de technische koper (die API-bewijs wil) en de zakelijke koper (die case studies en logo's wil).
Wat werkt: De hero-headline is begrijpelijk voor een CEO (*"Financiële infrastructuur voor het internet"*), maar de volgende band toont een live code-fragment met geanimeerde randen. Deze dubbele signaal-hero zegt "we nemen zowel de technische als de zakelijke kant van je bedrijf serieus." Daaronder, grote klantlogo's (Amazon, Google, Shopify) sluiten het vertrouwenskloof in één regel.
Wat je moet stelen: Als je verkoopt aan meer dan één koperpersoon, verlaag je hero niet om beiden te bevallen - laag ze op. Headline voor de economische koper, visuele voor de praktijk, logo's om de vertrouwenskloof te sluiten.
Afbeelding van Stripe
3. Notion - De Homepage met Audience-Switching
Wie is het voor: Producten met 2+ werkelijk verschillende ICP's (ideal customer profiles).
De homepage van Notion gebruikt expliciete audience-tabs ("Voor teams," "Voor bedrijven," "Voor studenten") die de visuele en waardepropositie wisselen zonder een volledige pagina te herladen.
Wat werkt: In plaats van één vage headline voor iedereen, schrijft Notion één scherpe headline per doelgroep en laat bezoekers zichzelf kiezen. Dit is een conversie-ontgrendeling voor producten met meerdere doelgroepen.
Wat je moet stelen: Als je product echt meerdere verschillende doelgroepen bedient, bouw dan een interactieve audience-switcher in je hero of direct daaronder. Als het alleen soort van meerdere doelgroepen bedient, kies je je sterkste ICP en richt je je alleen op hen. Een gesplitste homepage die iedereen wil bevallen is het #1 foutje dat ik zie in B2B herontwerpen.
Afbeelding van Notion
3 E-commerce & DTC Homepage Voorbeelden (Persoonlijkheid wint)
4. Oatly - Wanneer Merkstem Is de Ontwerp
Wie is het voor: Merken in de categorie van grondstoffen die op persoonlijkheid concurreren (koffie, sokken, huidverzorging, snacks).
De homepage van Oatly leest als een zine die een bedrijf heeft geschreven. Handgeschreven stijl tekst, bewust ongewone lay-outs en slogan zoals "Het is als melk, maar gemaakt voor mensen" veranderen de homepage in een persoon, niet in een catalogus.
Wat werkt: Oatly concurrert niet op prijs of productspecificaties - ze concurreren op *het oat-milk merk dat je zou uitnodigen voor een dinerfeest*. De homepage versterkt die persoonlijkheid met elke regel tekst.
Wat je moet stelen: Als je in een grondstofcategorie zit, is je snelste moat stem. Beoordeel elke zin op je homepage: zou iemand het hardop lezen en weten dat het *jij* bent? Als niet, voeg persoonlijkheid toe. Zelfs een 20% persoonlijkheid injectie onderscheidt je van 95% van je categorie. (Zie meer creative website design voorbeelden voor hoe merken dit doen.)
Afbeelding van Oatly
5. Allbirds - Mission-geleid Hero zonder de preken
Wie is het voor: DTC merken met een echte waardenverhaal - duurzaamheid, ethiek, oorsprong.
Allbirds begint met het productfoto en een rustige zin over koolstofvoetafdruk in plaats van een grote "DUURZAAMHEID" banner. Het koolstofvoetafdruk badge op elke productkaart doet de morele taak zonder bezoekers te slaan.
Wat werkt: De homepage vertrouwt op de bezoeker om te willen. Het toont de waarden in plaats van ze te verkondigen, wat de moeilijkere - en geloofwaardigere - weg is.
Wat je moet stelen: Als je merk een waardenverhaal heeft, verwerkt het in productkaarten, icoontjes of footer callouts in plaats van een pagina-dominerende banner. Merken die hun waarden tonen converteren; merken die hun waarden roepen worden genegeerd.
Afbeelding van Allbirds
6. Glossier - Community als sociale bewijskracht
Wie is het voor: DTC merken met betrokken klanten; cosmetica, mode, fitness, levensstijl.
De homepage van Glossier zegt niet "vertrouwd door miljoenen." Het toont gebruikersgegenereerd content - echte klantfoto's met tags in een roterende grid direct onder de hero. Elke foto linkt naar het product dat de persoon draagt.
Wat werkt: De UGC-grid is sociale bewijsvoering en productontdekkingsunit. Het doet ook wat de meeste testimonial-strepen missen - het toont echte mensen die op de doelklant lijken, niet stockfoto's.
Wat je kunt overnemen: Vervang een testimonialblok op je homepage door een UGC- of klantfoto-grid. Als je nog geen UGC hebt, zelfs een rij echte klantgeleverde foto's (met toestemming) presteert beter dan een rij glimlachende stockfoto's. Voor meer context, zie onze gids over call-to-action voorbeelden in schrijven.
Afbeelding van Glossier
3 Service & Marketplace Homepage Voorbeelden (Vertrouwen wint)
7. Airbnb - De zoekbalk is de hero
Wie het is voor: Marktplaatsen, boekingsplatforms, configurators - elke site met een enkele hoog-intentie actie.
Airbnb's homepage is beroemd om zijn minimalisme: een grote hero-afbeelding, een kop, en een zoekbalk die de meeste van de fold in beslag neemt. Er staat geen "Lees meer." Er is geen functietour. De kernactie is de homepage.
Wat werkt: Airbnb weet precies wat zijn bezoekers willen doen. In plaats van te leren ze, geeft het ze gewoon het gereedschap. Dit is een "primair-actie-als-hero" patroon dat werkt wanneer je bezoekers al weten wat ze willen.
Wat je kunt overnemen: Als je site een enkele hoog-intentie actie heeft (zoeken, boeken, configureren, een offerte krijgen), promoot deze interactieve element naar de hero positie. Leg het niet onder een carousel.
Afbeelding van Airbnb
8. Patagonia - Missieverklaring als waardepropositie
Wie het is voor: Retail en content-geïnspireerde merken met echte redactionele expertise of visie.
De homepage van Patagonia begint met redactionele journalistiek, producteducatie en milieuactivisme - echte content, geen hero-afbeelding. Tegenintuïtief voor een retailmerk, maar de data zegt dat het werkt: Patagonia heeft enkele van de hoogste herhaalinkopen in buitenkleding.
Wat werkt: De homepage behandelt winkelaars als lezers en leden, niet als portemonnees. Dat oogst een vertrouwensdividend dat geen CTA-knop kan kopen.
Wat je kunt overnemen: Als je merk echte expertise of een visie heeft, bestem een deel van je homepage voor content, niet voor verkoop. Een opgevouwen essay, veldrapport of klantverhaal in de hero positie geeft zelfvertrouwen en bouwt langdurige geloofwaardigheid.
Afbeelding van Patagonia
9. Basecamp - De langere, op mening gebaseerde homepage
Wie het is voor: Producten met een filosofie, een sterke wereldvisie of een smalle maar trouwe ICP.
Basecamp (van 37signals) gooit het "korte homepage" regelboek uit het raam. De pagina is lang, zwaar typografisch en op mening gebaseerd - met hele paragrafen die waarom hun product zo is gebouwd, argumenteren.
Wat werkt: De lange homepage is een filter. Mensen die het lezen en het eens zijn worden levenslange klanten; mensen die het niet zijn, stappen vroeg af. Basecamp is blij om de slechte klant direct te verliezen.
Wat je kunt overnemen: Veronderstel niet dat kort = goed. Als je product een wereldvisie is, niet een set functies - een manier van werken, een filosofie - laat de homepage ademhalen genoeg om het te verklaren. Vaak is de beste conversiefilter een langere homepage, niet een kortere.
Basecamp homepage langvormig op mening gebaseerd ontwerpAfbeelding van Basecamp
5 Homepage fouten die je conversies in 2026 vermoorden
Het bestuderen van goede homepages is maar de helft van het oefenen. Hier zijn de vijf patronen die ik zie conversies vermoorden op bijna elke audit die ik uitvoer:
- Hero carousels. Ondanks dat ze op 43% van de sites voorkomen, toont Nielsen Norman Group testen dat automatisch doorsturen sliders de gebruiksvriendelijkheid en conversie verlagen. Kies één hero-bericht en commit.
- Vage koppen. "Je reis naar succes versterken." Niemand weet wat je doet. Wees concreet.
- Autoafspelende video met geluid. De snelste manier om iemand te laten het tabblad sluiten.
- Drie even zwaar gewicht CTAs boven de fold. Als alles een primaire CTA is, is niets dat. Kies er één.
- Cookie banner + chatbot + popup binnen vijf seconden. Elke daarvan is zelfs afzonderlijk tolerabel. Samen zijn ze een muur.
Hoe bouw je een homepage zoals deze in minuten met Wegic
Je hebt de patronen gezien. Nu het moeilijke deel - het implementeren zonder een ontwerper, een ontwikkelaar of drie weken van themenstrijd. Dit is precies wat Wegic is gebouwd voor.
Wegic is geen sjabloonbouwer. Het is een conversatieve AI website groeisysteem dat een aangepaste, volledig gecodeerde homepage genereert op basis van een beschrijving van je bedrijf. Je beschrijft; het bouwt.
Fase 1: Je AI informeren
Open Wegic en praat met Kimmy, je AI projectmanager. In plaats van een sjabloon te kiezen, beschrijf wat je wilt met behulp van de patronen uit dit artikel:
"Ik heb een homepage nodig voor een B2B analytics SaaS. Hero zoals Linear - een zin waarin je de waarde aanbrengt, een enkele CTA, geen carousel. Voeg een Stripe-stijl logo-afdeling onder de hero toe, gevolgd door een drie-kolom functie grid. Eindig met een langformaat missie-afdeling zoals Basecamp."
Fase 2: AI Samenstellen
Het GPT-geïnspireerde engine van Wegic leest je oproep en schrijft de code vanaf nul. Binnen 60 seconden, krijg je een volledig responsieve multi-afdeling homepage - geen vooraf gemaakte sjabloon met je tekst erin. De AI zorgt voor de visuele hiërarchie, mobiele breakpoints, optimalisatie van Core Web Vitals en standaard op-page SEO.
👇 Klik op het beeld hieronder om te beginnen met Wegic!
Fase 3: Slimme aanpassingen - Gewoon met het erover praten
Traditionele bouwers dwingen je naar CSS panelen. Wegic laat je bewerken via chat:
"Maak de hero-tekst korter en krachtiger - onder de 10 woorden. Vervang het derde functieblok door een testimonial carousel. Verander de primaire CTA van 'Start Free Trial' naar 'Zie een 2-minuten demo'."
Wegic stelt 2-3 ontwerpoplossingen voor met ontwerprationale voordat wij de veranderingen toepassen, zodat je nooit je eigen mobiele weergave verstoort - een bekend risico bij traditionele bouwers. Lees meer over responsieve website ontwerp.
Fase 4: Een-klik lancering - Hosting inbegrepen
Druk op "Publiceren." Wegic biedt hosting, een optie voor een aangepaste domeinnaam, een automatisch gegenereerde
sitemap.xml, en SEO metadata op de start. Je homepage is binnen enkele minuten live en indexeerbaar.
Conclusie: Je homepage is een beslissing, geen document
De negen website homepage voorbeelden hierboven zijn niet "beste" omdat ze mooi zijn. Ze zijn het beste omdat elk van hen zich op een enkele, leesbare taak richt en die taak met specifiteit uitvoert - één doelgroep, één actie, één stem, één belofte.
De meeste homepages onderpresteren omdat ze proberen alles te doen. De oplossing is niet meer ontwerptravail. Het is meer *besluitvorming*: wie is dit voor, wat willen we dat ze doen, en wat is de meest betrouwbare manier om dat te vragen?
Zodra je die beslissingen hebt genomen, is de rest uitvoering - en met Wegic, is uitvoering een vijfminuten gesprek, geen vijfweken sprint.
Veelgestelde vragen
Wat is het verschil tussen een website homepage en een landing page?
Een homepage is de voordeur van je merk - het dient meerdere doelgroepen, presenteert je merk en leidt bezoekers naar de juiste sectie van je site (producten, prijzen, over ons, blog). Een landing page is gemaakt voor een enkele campagne of advertentie, meestal verwijdert navigatie en bestaat om één specifieke doelgroep op één specifieke actie te converteren. Een homepage optimaliseert voor *ontdekking*; een landing page optimaliseert voor *conversie*.
Hoeveel CTAs moet een homepage hebben?
Precies één primaire CTA (herhaald 2-4 keer op de pagina) en maximaal twee secundaire CTAs voor bezoekers met lagere intentie. Boven de vouw, toon nooit meer dan één visueel dominante knop. Wanneer je drie gelijkwaardige CTAs toont, neemt de klik-door typisch af omdat bezoekers op het keuzeveld vastlopen.
Hoe lang moet een website homepage in 2026 zijn?
Er is geen universeel antwoord. Korte homepages (Airbnb, Linear) werken wanneer bezoekers al weten wat ze willen. Lange, overtuigende homepages (Basecamp, Patagonia) werken wanneer je product een filosofie is die moet worden uitgelegd. De regel: maak de homepage zo lang als nodig is om elk bezwaar dat een warme lead zou opwerpen te beantwoorden, en niet langer.
Hoe snel moet mijn homepage laden?
Streef naar de "goede" grenzen van Google's Core Web Vitals: Largest Contentful Paint onder de 2,5 seconden, Interaction to Next Paint onder de 200 ms, en Cumulative Layout Shift onder de 0,1. Boven de 3 seconden laadtijd verlies je ongeveer de helft van je mobiele verkeer voordat ze je kopregel zien.
Heb ik een hero video nodig op mijn homepage?
Nee — en de meeste kleine bedrijven zouden er niet mee moeten werken. Hero-videos zijn duur om goed te produceren, voegen ladenstijden toe en kunnen belangrijke inhoud onder de vouw duwen. Een enkele hoogwaardige afbeelding met een krachtige kopworp presteert elke keer beter dan een matige video. Gebruik video alleen als (a) uw product het beste in beweging wordt getoond en (b) u het kunt produceren met professionele kwaliteit.
Kan AI eigenlijk een homepage bouwen die net zo goed is als deze voorbeelden?
In 2026, ja — voor de meeste gebruikscases. Tools zoals Wegic genereren speciaal aangepaste code (niet sjablonen) uit een conversatie-afspraken en passen automatisch lay-out, typografie en mobiel-geoptimaliseerde beste praktijken toe. Voor een homepage waar uw merkpositie al duidelijk is, brengt AI u in 1% van de tijd ongeveer 90% van de kwaliteit van een aangepaste bouw. U hebt nog steeds een mens nodig om de positiekeuzes te maken die de AI vervolgens uitvoert.
