25 Websitelay-outvoorbeelden (met uitleg bij wireframes)
25 websitelay-outvoorbeelden uit de We.Inc sjabloonbibliotheek, elk met een wireframe van de paginastructuur, een voorvertoning van het ontwerp, uitleg waarom de indeling werkt en voor welke bedrijven het geschikt is. Met een gids voor het kiezen van een indeling.
Een websitelay-out is de volgorde en indeling van secties op een pagina: wat als eerste komt, wat naast elkaar staat en waar de hoofdknop staat. Hieronder staan 25 indelingen, elk getoond als een eenvoudig blokdiagram en een voorvertoning van het volledige ontwerp. Alle 25 zijn We.Inc sjabloonontwerpen, geen klantwebsites, gegroepeerd per type bedrijf dat er het best bij past. Het blauwe blok in elk wireframe is de belangrijkste call-to-action.
Hoe je de wireframes leest
Elke rij vakken is één band van de pagina, van boven naar beneden zoals je scrolt. Vakken naast elkaar staan naast elkaar op een desktopscherm; op een telefoon stapelen ze in dezelfde volgorde, zodat het linker vak als eerste verschijnt. Deze pagina gaat over de indeling van de gehele pagina. Voor de bovenkant van de pagina specifiek, zie hero-sectie voorbeelden; voor menu's, zie navigatievoorbeelden.
Vijf indelingspatronen in één tabel
| Patroon | Volgorde secties | Het best wanneer | Voorbeelden hieronder |
|---|---|---|---|
| Diensten trechter | Hero, diensten, bewijs, formulier | Bezoekers hebben een offerte of boeking nodig | 1-8 |
| Bezoek | Hero, menu, story, hours and map | People come to you in person | 9-14 |
| Boek of word lid | Hero, prijzen of rooster, boeking | Afspraken, lessen, lidmaatschappen | 15-19 |
| Grid | Hero, raster van items, detail, aanvraag | Aanbiedingen, producten, portfolio | 20-24 |
| Lezer | Hero, werk, over, inschrijving | Het doel is een terugkerend publiek | 25 |
Dienstverleningsindelingen
1. Spoedklus: urgente band onder de hero
Sjabloon: Ironpeak Roofing (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Een brede gekleurde band direct onder de hero trekt de aandacht van mensen met een urgente kwestie (stormschade) voordat ze verder scrollen. Gebruik het voor: Dakdekkers, herstelwerkzaamheden, slotenmakers, sleepdiensten.
2. Multi-vak met een werkgebiedblok
Sjabloon: Summit Trades (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Drie gelijke dienstenkaarten, dan een lijst met bediende gebieden beantwoordt "doe jij dit, hier?" in twee scrolls. Gebruik het voor: Elk bedrijf met een afgebakend werkgebied.
3. Dienstenlijst met uitgelichte specialiteit
Sjabloon: Voltline Electric (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Eén hoogwaardige dienst krijgt zijn eigen sectie, zodat de pagina de klus verkoopt die je het liefst hebt zonder de rest te verbergen. Gebruik het voor: Vakken met één winstgevende specialiteit.
4. Checklist en directe offerte
Sjabloon: Brightwell Cleaning (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Een zichtbare checklist van wat elke beurt inhoudt beantwoordt de grote vraag (wat krijg ik precies?) vóór het prijsformulier. Gebruik het voor: Schoonmaak, gazononderhoud, zwembadservice.
5. Lokaal vakmansverhaal
Sjabloon: Halden Woodworks (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: De plaatsnaam in de koptekst vermelden en "hoe een klus verloopt" laten zien bouwt vertrouwen op voor grote, eenmalige klussen. Gebruik het voor: Timmerlieden, aannemers, verbouwers.
6. Professioneel kantoor: praktijkgebieden en mensen
Sjabloon: Sterling & Vance LLP (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Mensen kiezen een kantoor op rechtsgebied en daarna op persoon; de indeling volgt die volgorde. Gebruik het voor: Advocatuur, accountancy, financieel advies.
7. Consultancy: bewijs eerst
Sjabloon: Linden Consult (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Bewijs staat direct na de hero, dan presenteert de pagina diensten als problemen die de koper herkent. Gebruik het voor: Consultants, coaches, B2B-diensten.
8. Korte accountantspagina
Sjabloon: Ledgerline CPA (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Vier secties. Voor iemand die al weet dat hij een accountant nodig heeft, is minder meer. Gebruik het voor: Elke dienst waarbij de koper al een beslissing heeft genomen.
Horeca- en voedingsindelingen
9. Café: menu, verhaal, bezoek
Sjabloon: Ember & Roast (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Menu eerst, bezoek als laatste: mensen kijken wat je serveert, daarna waar en wanneer. Gebruik het voor: Cafés, bakkerijen, bars.
10. Bakkerij met vooraf bestellen
Sjabloon: Flour & Fern (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Een aparte bestelrubriek zet browsen om in voorbestellingen. Gebruik het voor: Bakkerijen, slagers, maaltijdvoorbereiding.
11. Restaurant lang scrollen
Sjabloon: Azafran (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Voor een bestemmingsrestaurant verkoopt sfeer de reservering, dus vertelt de pagina een verhaal voordat er gevraagd wordt. Gebruik het voor: Fine dining, degustatiemenu's, evenementenlocaties.
12. Restaurant met drie secties
Sjabloon: Crust (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Hero, menu, bezoek. Het minimale aantal secties dat een restaurant kan hebben en toch alle vragen beantwoorden. Gebruik het voor: Casual restaurants, afhaalrestaurants.
13. Rooster eerst
Sjabloon: ROAM (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Als de locatie dagelijks wisselt, is "waar ben je vandaag" de hoofdvraag, dus staat dat direct onder de hero. Gebruik het voor: Foodtrucks, markten, pop-ups.
14. Evenementendienst met aanvraagformulier
Sjabloon: Harvest & Vine (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Soorten evenementen vooraan laten bezoekers zichzelf indelen; een voorbeeldmenu maakt de prijs concreter. Gebruik het voor: Cateraars, eventplanners, evenementenlocaties.
Boekings- en lidmaatschapsindelingen
15. Boeking-gedreven salon
Sjabloon: Lumé Salon & Beauty Spa (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Een prijslijst en een boekingsblok zijn alles wat de meeste salonbezoekers nodig hebben. Gebruik het voor: Salons, barbiers, nagel- en wimpersstudio's.
16. Lesrooster en prijzen
Sjabloon: Tidewater Yoga (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Rooster, dan prijzen, dan een aanbod voor het eerste bezoek volgt de beslissing die een nieuwe student maakt. Gebruik het voor: Yoga, pilates, dans, vechtsporten.
17. Sportschool met programma's en niveaus
Sjabloon: Iron (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Lidmaatschapsniveaus naast elkaar maken vergelijken eenvoudig; een gratis eerste sessie verlaagt de drempel. Gebruik het voor: Sportscholen, clubs, lidmaatschappen.
18. Kliniek: zorg, team, locatie
Sjabloon: Verdant Family Health (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Patiënten willen weten wat je behandelt, wie ze zien en hoe ze er komen. Gebruik het voor: Klinieken, tandartsen, fysiotherapeuten.
19. Dierenarts met spoedmelding
Sjabloon: Meadowpaw Veterinary (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: De bezoeksectie vertelt spoedeisende gevallen te bellen, zodat het boekingsformulier niet voor noodgevallen wordt gebruikt. Gebruik het voor: Dierenartsen, spoedzorg, elke dienst met noodgevallen.
Gridindelingen: aanbiedingen, winkels en portfolio's
20. Aanbiedingengrid
Sjabloon: Keystone Realty (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Kopers krijgen het raster; verkopers krijgen hun eigen sectie en een aparte call-to-action. Gebruik het voor: Vastgoed, verhuur, autodealers.
21. Enkelvoudige productpagina
Sjabloon: Verre Halo (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: De prijs staat in de menubalk en aan het einde; alles daartussen beantwoordt "is het het waard?" Gebruik het voor: Merken met één product, lanceringsproducten, gecrowdfunde producten.
22. Kleine-batchwinkel
Sjabloon: Cellar & Rowan (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Producten eerst, dan het verhaal dat de prijs rechtvaardigt, dan inschrijving voor de volgende batch. Gebruik het voor: Makers, kaarsen, keramiek, voeding.
23. Productdrop
Sjabloon: Loop (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: De volgende release staat voorop; het winkelpanel bedient mensen die nu iets willen. Gebruik het voor: Gelimiteerde series, kleding, verzamelobjecten.
24. Portfolio grid eerst
Sjabloon: Drafthouse (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Zes projecten direct na de koptekst; het werk verkoopt zichzelf. Gebruik het voor: Architecten, ontwerpers, fotografen.
Persoonlijke en creator-indelingen
25. Schrijver met nieuwsbrief
Sjabloon: Plume (een We.Inc sjabloonontwerp, geen klantwebsite).
Waarom het werkt: Werk, dan inschrijving voor de nieuwsbrief: het doel is lezers die terugkomen, niet één aanvraag. Gebruik het voor: Schrijvers, creators, sprekers.
Hoe kies je een indeling
- Benoem de ene actie die je wilt dat de meeste bezoekers ondernemen (bellen, boeken, kopen, informeren, inschrijven). Dat wordt het blauwe blok.
- Zet de drie vragen op een rij die een bezoeker stelt voordat hij actie onderneemt (bijvoorbeeld: bedien je mijn regio, wat kost het, kan ik je vertrouwen). Elk krijgt een sectie, in die volgorde.
- Kies het patroon uit de bovenstaande tabel dat het beste past.
- Schrap secties die je niet met echte inhoud kunt vullen. Een lege "Resultaten"-sectie of tijdelijke recensies doen meer kwaad dan een kortere pagina.
- Controleer op een telefoon. Vakken naast elkaar stapelen; zorg dat de hoofdknop nog steeds vroeg verschijnt (zie mobile-first design).
Als één pagina te lang wordt, splits je hem op in meerdere pagina's. Websitestructuur laat zien hoe de bovenstaande secties een sitekaart worden.
Veelgemaakte indelingsfouten
- Het contactformulier alleen onderaan een lange pagina plaatsen, zonder knop in de koptekst.
- Drie kolommen tekst voor een publiek dat voornamelijk een telefoon gebruikt; gebruik kaarten die netjes opstapelen.
- Sjabloonnummers, recensies of badges behouden die je niet kunt onderbouwen.
- Een galerij voordat de bezoeker weet wat je doet.
Gebruik een van deze indelingen
Elke indeling hier is een sjabloon in de We.Inc sjabloonbibliotheek. Op het gratis plan kun je tot 3 sjabloonsites op een we.inc-adres gebruiken (geen AI-tegoed, geen eigen domein). Starter voor $20/month voegt AI-bouw toe, zodat je om wijzigingen kunt vragen zoals "verplaats recensies boven diensten", en eigen domeinen; zie prijzen. Maak eerst een mockup met de website-mockupgenerator en controleer het resultaat daarna met de websitebeoordeling.
Veelgestelde vragen
Wat is een websitelay-out?
De volgorde en indeling van secties op een pagina: wat als eerste verschijnt, wat naast elkaar staat en waar de belangrijkste call-to-action staat.
Wat is de beste indeling voor een website voor een klein bedrijf?
Voor de meeste dienstverlenende bedrijven: een hero met één duidelijke knop, diensten, bewijs zoals recensies en een contact- of offerteformulier, met de knop herhaald in de koptekst.
Hoeveel secties moet een homepage hebben?
Zo veel als nodig om de belangrijkste vragen van de bezoeker te beantwoorden, en niet meer. De voorbeelden hier variëren van vier tot acht secties.
Zijn dit echte bedrijfswebsites?
Nee. Alle 25 zijn We.Inc sjabloonontwerpen, gebruikt om indelingspatronen te laten zien.
Hoe veranderen indelingen op mobiel?
Vakken naast elkaar stapelen verticaal in dezelfde volgorde, dus zet het belangrijkste item links en houd de hoofdknop dicht bij de bovenkant.
Wat is het verschil tussen indeling en structuur?
Indeling is de rangschikking van één pagina. Structuur is hoe pagina's op de hele site met elkaar verbonden zijn: de hiërarchie, URL's en interne links.
Gratis beginnen · Geen creditcard nodig
Product
- AI Website Builder: Describe a site in plain English; it's live in minutes
- White Label Platform: Your brand, your domain, your margin
- Enterprise: SSO, custom SLAs, and dedicated support
- Developer API: Embed site generation into your SaaS
Who It's For
- For Agencies: Resell under your brand
- For Freelancers: Your own branded builder
- For Hosting Providers: Add a builder to your stack
- For SaaS Platforms: Embed site creation via API
- For Startups
- For Financial Services
- For Healthcare
Features
- Drag & Drop Editor
- Built-in SEO Tools
- Custom Branding
- Client Dashboard
- Reseller Billing (Stripe Connect)
Resources
- Blog
- Help Center
- Free Business Tools
- Website Templates
- Glossary & Guides
- Integrations
- Developers
- Benchmark
- Windows App