Website-inspiratie met Claude Code: maak een eigen stijlbriefing

Je hebt misschien al een map met websites die je mooi vindt, maar hoe vertaal je die voorbeelden naar een eigen ontwerp voor jouw project? Een link of de woorden “maak het modern” laten veel ruimte voor interpretatie. Een korte stijlbriefing helpt om precies te benoemen wat je aanspreekt, wat bij jouw merk past en wat je niet wilt overnemen.

Gebruik referentiewebsites als materiaal om ontwerpkeuzes te onderzoeken, niet als een sjabloon om een andere website na te bouwen. Google raadt aan content te maken voor een echte doelgroep en niet alleen om zoekverkeer te trekken. Diezelfde praktische lijn geldt hier: kies voorbeelden omdat ze een bruikbare les bevatten voor jouw bezoekers en aanbod, niet omdat een stijl toevallig populair lijkt. (Google over people-first content)

Begin met de taak van je eigen website

Schrijf eerst op wie de website gebruikt en wat die persoon er moet kunnen begrijpen of doen. Een portfolio, een dienstverlenende homepage en een campagnepagina hebben niet automatisch dezelfde structuur nodig. De referentie kan een stijlvol kleurpalet tonen, maar de informatievolgorde moet nog steeds passen bij jouw inhoud en belangrijkste route.

Beantwoord vooraf deze vragen:

• Wie is de belangrijkste bezoeker van deze pagina?
• Welke vraag wil die persoon beantwoord zien?
• Welke inhoud of actie moet goed vindbaar zijn?
• Welke informatie, routes of functies staan al vast?

Als je dit overslaat, kan een ontwerpvoorbeeld de richting gaan bepalen in plaats van de behoefte van je eigen bezoeker.

Kies voorbeelden per ontwerpkenmerk

Verzamel een klein aantal referenties en noteer per voorbeeld waarom je het bewaart. Probeer niet één site als totaalmodel te gebruiken. De ene referentie kan een goede manier tonen om cases te presenteren; een andere kan inspireren met typografie, witruimte of de manier waarop een contactactie zichtbaar blijft.

Maak voor elk voorbeeld een korte notitie:

| Onderdeel | Wat je observeert | Wat je ermee wilt doen | |---|---|---| | Paginaopbouw | Bijvoorbeeld: de intro staat naast een beeld | Onderzoeken of dat bij jouw boodschap past | | Typografie | Grote koppen met rustige tekst eronder | Een vergelijkbaar contrast proberen met eigen fonts | | Kleur | Een neutrale basis met één accent | Een eigen palet kiezen dat bij je merk past | | Beeld | Projectbeelden krijgen veel ruimte | Alleen toepassen als je eigen beelden dat ondersteunen | | Acties | De primaire knop staat op herkenbare plekken | Bepalen welke actie op jouw pagina centraal staat |

Beschrijf zichtbaar gedrag en vorm, niet alleen een stijlwoord. “Rustig door veel lege ruimte rond blokken” geeft meer houvast dan “premium”.

Scheid inspiratie van onderdelen die je niet wilt overnemen

Voor je aan de briefing begint, deel je notities in drie groepen:

• Behouden als principe: bijvoorbeeld duidelijke contrasten tussen kop en lopende tekst.
• Aanpassen aan je eigen merk: bijvoorbeeld dezelfde rustige compositie met jouw kleuren en eigen beelden.
• Niet gebruiken: bijvoorbeeld een carrousel, een donkere achtergrond of een menu dat belangrijke informatie verbergt.

Zo beschrijf je de les die je uit een voorbeeld haalt in plaats van een pagina letterlijk na te bouwen. Maak eigen teksten, beelden, logo's, kleurencombinaties en inhoudelijke keuzes. Verwijs naar een referentie als context, maar benoem welke algemene eigenschap relevant is.

Vertaal indrukken naar concrete ontwerpkeuzes

Een bruikbare stijlbriefing noemt eigenschappen die je kunt aanwijzen of vergelijken:

• Kleur: lichte of donkere basis, accentkleur, contrast en waar het accent terugkomt.
• Typografie: karakter van koppen, leesbaarheid van lange tekst en onderscheid tussen niveaus.
• Ruimte: compacte of ruime secties, afstand tussen blokken en breedte van de tekstkolom.
• Vormen: scherpe of afgeronde hoeken, lijngebruik en hoeveelheid decoratie.
• Beeld: fotografie, illustratie of screenshots, plus de rol die die beelden spelen.
• Beweging: waar beweging informatie verduidelijkt en waar een stil ontwerp beter werkt.

Je hoeft nog geen exacte kleurcodes of pixelmaten te kiezen wanneer die informatie niet bestaat. Noteer liever het gewenste effect en vraag om een klein voorstel dat je kunt beoordelen. Als er al huisstijlbestanden, fonts of componenten bestaan, verwijs daar dan naar als bron van waarheid.

Schrijf de briefing in een vast format

Een stijlbriefing werkt het best wanneer ze jouw doel, referenties en grenzen bij elkaar brengt. Gebruik de velden hieronder als werkblad:

Project en route:
[Welke website of pagina ontwerp je?]

Bezoeker en taak:
[Voor wie is dit en wat moet die persoon kunnen begrijpen of doen?]

Gewenste indruk:
[Noem drie concrete eigenschappen en leg ze kort uit.]

Referenties:
[Link of omschrijving per voorbeeld, plus het specifieke kenmerk dat je onderzoekt.]

Wat mag worden aangepast:
[Kleur, typografie, ruimte, beeld, navigatie of andere ontwerpkeuzes.]

Wat behouden moet blijven:
[Bestaande routes, inhoud, componenten, toegankelijkheid en werkende functies.]

Wat je niet wilt:
[Elementen of gedrag dat niet bij het project past.]

Vraag eerst om analyse en een voorstel. Laat nog geen bestanden wijzigen.

Vervang algemene woorden door waarneembare details. “Vriendelijk” kan bijvoorbeeld betekenen: warme beeldkeuze en directe microcopy. Het kan ook ronde vormen betekenen. Schrijf erbij welke betekenis jij bedoelt.

Laat Claude Code eerst de briefing samenvatten

Vraag Claude Code om de kern en mogelijke tegenstrijdigheden uit je briefing terug te geven voordat er bestanden veranderen. Kijk of het onderscheid begrijpt tussen de visuele richting en de onderdelen die behouden moeten blijven. Als twee referenties botsen — bijvoorbeeld de ene gebruikt een dichte navigatie en de andere een minimalistisch menu — kies dan bewust welke eigenschap leidend is.

De eerste uitkomst kan een voorstel zijn met kleurverhoudingen, typografische hiërarchie, compositie en een voorbeeldsectie. Behandel het als een concept om te beoordelen. Laat niet meteen de hele site omzetten; test de richting op één relevante pagina of sectie en controleer die op desktop en mobiel.

Gebruik bijvoorbeeld deze opdracht:

Lees de ontwerpbriefing hieronder en bekijk eerst de bestaande projectstructuur en relevante pagina.

Wijzig nog geen bestanden. Vat de doelgroep, gewenste stijl, kenmerken uit de referenties, bestaande projectpatronen en expliciete grenzen samen. Benoem tegenstrijdigheden of ontbrekende informatie.

Stel daarna één samenhangende ontwerprichting voor voor [route of sectie]. Vertaal die naar concrete keuzes voor kleur, typografie, witruimte, beeldgebruik en componenten. Kopieer geen teksten, beelden, logo's of unieke pagina-indelingen uit de referenties.

Wacht op mijn reactie voordat je iets wijzigt. Behoud bestaande routes en werking.

Als je werkomgeving afbeeldingen kan doorgeven, kun je een eigen screenshot of referentiebeeld toevoegen en aangeven welk deel je wilt bespreken. Als dat niet kan, beschrijf de kenmerken in woorden; ga er niet van uit dat alleen een externe URL dezelfde visuele context oplevert.

Beoordeel een eerste voorstel op samenhang

Vergelijk het voorstel met je briefing en met de bestaande inhoud. Stel jezelf deze vragen:

• Past de stijl bij de doelgroep en taak die ik heb beschreven?
• Zijn de keuzes concreet genoeg om op meer dan één sectie toe te passen?
• Blijven navigatie, leesbaarheid en primaire actie duidelijk?
• Is herkenbaar wat uit de eigen huisstijl komt en wat alleen inspiratie was?
• Is er geen verzonnen portfolio-inhoud of niet-beschikbaar beeld toegevoegd?
• Kan de pagina op een smal scherm dezelfde taak blijven ondersteunen?

Geef feedback op één keuze tegelijk. “Maak het rustiger” is minder bruikbaar dan “verminder het aantal accentvlakken, maar behoud de contrastkleur op de primaire actie”. Zo wordt ook duidelijk of de wijziging het beoogde effect heeft.

Checklist vóór je een stijlbriefing laat uitvoeren

• ☐ De taak en bezoeker van de eigen pagina zijn duidelijk.
• ☐ Elke referentie is gekoppeld aan een specifiek ontwerpkenmerk.
• ☐ Algemene indrukken zijn vertaald naar zichtbare keuzes.
• ☐ Eigen merk, inhoud, beelden en bestaande componenten zijn als bron vastgelegd.
• ☐ Bestaande routes en functies staan expliciet bij de grenzen.
• ☐ Ongewenste elementen zijn concreet beschreven.
• ☐ Claude Code vat de briefing juist samen vóór het wijzigingen maakt.
• ☐ De eerste richting wordt op één echte route en op mobiel gecontroleerd.

Gebruik dit als onderdeel van je bredere werkwijze: leg terugkerende projectafspraken vast met de gids over CLAUDE.md voor een websiteproject, bepaal de inhoud van je pagina met de homepagechecklist en controleer een bestaande codebase met het stappenplan voor websiteaanpassingen. Voor één concrete ontwerpwijziging kun je ook starten met het gratis taakdossier.