Leer hoe je de look & feel van een website die je mooi vindt nabouwt — zonder tekst, afbeeldingen of lay-outs te kopiëren. Een praktische, ethische stap-voor-stap gids.
Als een klant zegt “maak mijn website zoals deze”, bedoelen ze zelden “kopieer elke pixel.” Meestal wijzen ze op een gevoel: schoon en modern, gedurfd en editorial, vriendelijk en speels, premium en minimalistisch.
Jouw taak is dat gevoel te vertalen naar beslissingen waar je voor kunt uitkomen—en die beslissingen daarna opnieuw op te bouwen met het merk, de content, beperkingen en doelen van de klant.
De meeste klanten proberen één (of meerdere) van deze dingen duidelijk te maken:
Een referentiesite gebruiken om richting te bepalen is normaal. De sleutel is om principes te lenen, niet assets.
Het lenen van stijl-cues is meestal veilig en verwacht. Het kopiëren van content is een harde nee. Het kopiëren van lay-out kan acceptabel zijn in grote lijnen (gebruikelijke patronen bestaan), maar het klonen van een kenmerkende structuur te nauw kan nog steeds juridische en reputatieschade opleveren.
Zelfs als je alles hertekent, kan een bijna-identieke pagina eruitzien als een knockoff—dat schaadt vertrouwen en nodigt klachten uit. Het risico is niet alleen juridisch; ook je reputatie kan eronder lijden. Mensen merken het wanneer twee sites als tweelingen aanvoelen.
Een sterke afspraak klinkt zo:
“We matchen de vibe—scherpe typografie, royale spacing, zelfverzekerde koppen—maar we ontwerpen originele pagina’s, schrijven originele copy en gebruiken jouw visuals zodat het duidelijk bij jouw merk hoort.”
Die ene zin voorkomt weken van verkeerde feedback later.
Behandel andere sites als referenties voor ontwerprichting:
Dit zijn “ontwerpingrediënten” die helpen een vergelijkbare vibe te bereiken terwijl je toch een origineel resultaat levert.
Waar mensen per ongeluk de grens overschrijden:
Algemene structuren (hero → voordelen → testimonials → CTA) zijn gebruikelijk. Het begint op kopiëren te lijken wanneer je exact dezelfde sectievolgorde, hetzelfde grid, dezelfde spacing en dezelfde visuele hiërarchie aanhoudt en het direct herkenbaar is naast elkaar.
Een goede regel: houd het idee (bijv. “drie benefit-cards”), verander de expressie (content, verhoudingen, typografie, beeld en component-styling) zodat het duidelijk van jou is.
Een enkele referentie kan je in een val trekken richting specifieke details. Vragen om 3–5 voorbeelden creëert bereik, waardoor het makkelijker wordt om herhaalbare signalen te halen.
Met meerdere referenties kun je patronen herkennen zoals:
Zodra je het patroon ziet, kun je de stijl-logica namaken zonder één enkele pagina te reproduceren.
Accepteer niet alleen “ik vind het mooi” als bruikbare feedback. Vraag om korte annotaties:
Even belangrijk: verzamel de negatieve punten.
Voorbeelden van bruikbare “nee”-uitspraken:
Een lichte checklist vermindert meetings en houdt feedback vergelijkbaar:
Kies uit je 3–5 referenties 5–8 bijvoeglijke naamwoorden: kalm, premium, speels, editorial, gedurfd, minimalistisch, knus, technisch, vriendelijk.
Definieer ze daarna als beslissingen:
Dit wordt je vertaallaag van “vibe” naar opbouwbare keuzes.
Schrijf één zin wie het is, en één zin voor het primaire resultaat.
Voorbeelden:
Een “premium”-vibe voor luxe retail en een “premium”-vibe voor B2B-consultancy kunnen heel verschillend blijken zodra het publiek duidelijk is.
Kies 2–4 metrics gekoppeld aan het doel:
Metrics houden smaakdiscussies uit projecten.
Combineer het bovenstaande in een korte brief die iedereen kan raadplegen:
“We willen een kalme, premium, editorial uitstraling voor operations-leiders. De site moet snel vertrouwen opbouwen en gericht zijn op geboekte gesprekken. Gebruik eenvoudige lay-outs, sterke typografie, ingetogen kleur en duidelijke hiërarchie. Succes is meer gekwalificeerde boekingen en hogere betrokkenheid op diensten en case studies.”
Een referentiesite is nog steeds een volledige website. Om het gevoel te vangen zonder de uitvoering te kopiëren, breek je het gevoel op in onderdelen die je kunt beschrijven en reproduceren.
Je moodboard moet beantwoorden: Hoe moet deze website aanvoelen als iemand erop landt? Houd het compact.
Neem 3–8 items op verdeeld over deze buckets:
Voeg screenshots toe met korte notities zoals: “Grote, zelfverzekerde koppen,” “Zachte schaduwen, afgeronde hoeken,” “Één accentkleur alleen voor CTA’s.”
Converteer het moodboard naar consistente regels:
Als je design tokens onderhoudt, begint dit hier (fontgroottes, spacing-stappen, kleurrollen).
Maak een simpele “Do / Don’t”-lijst met voorbeelden:
Die beperkingen voorkomen per ongeluk klonen en houden nieuwe pagina’s later consistent.
Als je een vergelijkbare gevoel wilt zonder het ‘knockoff’-gevoel, bouw dan vanaf de basis: lettertype, kleur en spacing.
Identificeer wat de referentie-typografie doet: editorial en kalm? technisch en precies? speels en afgerond?
Kies lettertypes die bij de mood passen zonder exact hetzelfde font te gebruiken. Als de referentie een hoog-contrast serif heeft voor koppen, kies dan een andere hoog-contrast serif (of een scherp, elegant sans) in plaats van dezelfde familie.
Definieer vervolgens een typeschaal zodat pagina’s consistent blijven:
Een leesbare baseline voor veel sites: comfortabele body line-height (vaak ~1.5–1.7), iets strakkere koppen en royale alinea-afstand.
Veel “gekopieerde” ontwerpen verraden zichzelf met dezelfde hero-achtergrond en accentkleur. Bouw een palet dat van jou is:
Definieer ook states: link, hover, focus en error/success kleuren.
Spacing is een van de snelste manieren om samenhang te creëren zonder lay-outs te kopiëren. Gebruik een spacing-systeem (bv. 4/8/16/24 of 6/12/24/36) en houd je eraan voor:
Wanneer alles op een consistent ritme uitlijnt, voelt het ontwerp doelbewust—zelfs als de paginastructuur verschilt van je referenties.
Het namaken van een inspiratiepagina-voor-pagina is een veelvoorkomende val: je eindigt óf te gelijk, óf je loopt vast wanneer jouw content niet in dezelfde vormen past. Kopieer het systeem, niet de pagina.
De meeste marketingsites zijn opgebouwd uit herbruikbare “Lego-blokjes.” Maak een lijst van wat terugkeert in je referenties:
Het benoemen van componenten verschuift werk van “kopieer hun homepage” naar “bouw onze hero, onze pricing, onze FAQ.”
Maak een kleine componentbibliotheek die je op meerdere pagina’s gebruikt:
Als je snel wilt bewegen, kan een vibe-coding platform zoals Koder.ai hier nuttig zijn: je kunt de gewenste vibe en componentenset in chat beschrijven, een werkende React-UI genereren en itereren zonder aan een gekopieerde lay-out vast te zitten. Functies zoals planning mode en snapshots/rollback helpen je ook variaties veilig te verkennen terwijl de implementatie origineel blijft.
Gepolijste sites gebruiken gecontroleerde variatie. Stel regels zoals:
Een A4-componentgids is genoeg: wat elk component is, waar het gebruikt wordt en toegestane variaties.
Het kopiëren van de referentie-site's paginavolgorde is de snelste manier om aannames te erven die niet bij je bedrijf passen.
Voordat je schetst, noteer wat bezoekers moeten weten vóór ze kopen:
Die vragen vormen de ruggengraat van je structuur.
Breng de pagina’s in kaart die je echt nodig hebt en geef elke pagina één taak:
Voeg ondersteunende pagina’s (Over, Case Studies, FAQ) alleen toe als ze een duidelijk doel dienen.
Outline headings en secties op basis van jouw aanbod, niet op basis van het referentieblok-sequentie. Bepaal welk bewijs je toont, welke bezwaren je aanpakt en wat je wilt dat bezoekers daarna doen.
Wireframes zijn layout-schetsen, geen decoratie:
Als de structuur werkt, pas dan de inspiratiesite-stijl toe—zonder het blauwdruk te erven.
Voor een duidelijk andere uitvoering moeten je woorden en visuals eigen zijn.
Begin met wat waar is over je bedrijf. Een eenvoudige structuur:
Je kunt het ritme van de referentie matchen (korte krachtige regels vs. langere uitleg) terwijl je de onderliggende ideeën en woordkeuze verandert. Vermijd kenmerkende zinnen en herkenbare metaforen.
Gebruik geen screenshots, iconen, illustraties of foto’s van anderen—ook al lijken ze generiek.
Wil je een vergelijkbare hero-vibe, dan kun je het concept nabouwen: hetzelfde niveau van afwerking, andere onderwerpen en composities.
Zelfs met nieuwe teksten kan dezelfde sectiestroom als imitatie overkomen. Herschik het verhaal zodat het past bij jouw sterke punten: leid met bewijs, combineer dunne secties of voeg iets toe wat de referentie niet heeft.
Toon is toegestaan; formuleringen niet. Bepaal je voice (vriendelijk, premium, direct, speels) en pas die consequent toe in koppen, knoppen en microcopy.
Je streeft naar “zelfde genre, ander lied.” Controleer vóór livegang of je de vibe hebt gevangen zonder details te matchen.
Open de referentie en je concept naast elkaar gedurende 60 seconden. Sluit de referentie en vraag: wat herinner je je?
Een site kan vergelijkbaar aanvoelen en toch beter zijn voor echte gebruikers. Controleer:
Mobiel moet doelbewust zijn ontworpen, niet “geklemd desktop”. Controleer op:
Voor lancering:
Als twee of meer antwoorden twijfelachtig zijn, herontwerp dan één laag—spacing, typografie of componentvormen—om het kloongevoel snel te doorbreken.
Je kunt leren van een site die je bewondert—type-hiërarchie, spacing-ritme, componentpatronen. Wat je niet moet doen is beschermd werk overnemen of je site zo veel laten lijken dat gebruikers denken dat het hetzelfde merk is.
Auteursrecht beschermt doorgaans specifieke creatieve uiting, niet algemene ideeën.
Zonder exacte assets te kopiëren kun je problemen krijgen als het ontwerp verwarring veroorzaakt.
Let op:
Een eenvoudige test: als een snelle blik iemand doet vragen “is dit hetzelfde bedrijf?”, dan ben je te dicht bij.
Denk aan een korte review als je:
Houd een lichte papieren spoor bij dat onafhankelijk werk aantoont:
Dit is geen bureaucratie—het is duidelijkheid, en het helpt om “inspired by” werk ethisch te verantwoorden.
Het betekent meestal dat ze de zelfde vibe willen (schoon, premium, speels, editorial), niet een pixel-voor-pixel kopie.
Jouw taak is om die reactie te vertalen naar concrete beslissingen—typografie, ruimte, kleurrollen, componenten, toon—en die keuzes uit te voeren met hun merk, content en randvoorwaarden.
Een eenvoudige, veilige indeling is:
Als je twijfelt, behandel het als content en maak het origineel.
Leen principes, geen assets:
Bouw het daarna opnieuw met andere lettertypes, een onderscheidend palet, je eigen copy en originele visuals zodat het onmiskenbaar van jou is.
Vermijd alles dat waarschijnlijk beschermd of herkenbaar is:
Zelfs licht bewerkte versies kunnen te veel lijken—begin vanuit je eigen boodschap en middelen.
“Close enough” kan twee problemen veroorzaken:
Als een vergelijking naast elkaar iemand doet zeggen “dit zijn tweelingen”, wijzig snel één laag—typografie, spacingritme, componentvormen, beeldstijl of paginastroom breekt meestal het kloongevoel.
Eén referentie duwt je naar het kopiëren van specifics. Met 3–5 kun je gedeelde signalen extraheren:
Ontwerp vanuit die patronen zodat je geïnspireerd wordt door een richting, niet door één enkele pagina.
Vraag ze om per voorbeeld snelle aantekeningen toe te voegen:
Dat maakt “ik vind het mooi” bruikbaarder en verkort revisielussen.
Gebruik het moodboard om het gevoel vast te leggen en zet het om in uitvoerbare regels.
Beperk je tot een kleine set voorbeelden voor:
Definieer daarna een mini-gids: typeschaal, knopstijlen/states, card-padding/shadows, formulierfocus/error-states en een korte “Do/Don’t”-lijst om per ongeluk klonen te voorkomen.
Bouw een componentensysteem in plaats van pagina's te kopiëren:
Dit houdt de vibe consistent en zorgt ervoor dat de uitvoering duidelijk origineel is—vooral wanneer jouw content niet past in de vormen van de referentie.
Doe een snelle “te dichtbij?”-controle:
Als het te veel lijkt, verander één fundamentele laag (type, spacingritme, componentvormen) in plaats van overal kleine aanpassingen te doen.
