Playbook 4: Design en bouw voor mensen en machines

Design begint met een systeem en één pagina

We vertalen het merk eerst naar een designsysteem in Figma: typografische schaal, kleurgebruik, en elke terugkerende component met zijn varianten en toestanden. Knoppen, kaarten, formulieren, navigatie en call-to-actionblokken worden één keer ontworpen en overal hergebruikt.

Daarna ontwerpen we de homepage, desktop en mobiel, in één richting, en werken die met de klant uit tot de visuele taal klopt. Pas dan rolt het systeem uit naar de overige templates en de CMS-templates. Eén richting tonen werkt omdat de strategie al heeft vastgelegd wat de site moet zeggen. Onze les uit een recent project: zeg vooraf dat de klant één richting te zien krijgt, en maak van elke revisie een zichtbare stap vooruit. Een klant die twee concepten verwachtte en één design in twee kleurvarianten kreeg, had het gevoel dat er niets te kiezen viel, en dat kostte ons een ronde.

De eigen foto's van de klant winnen het meestal van stockbeelden waar het om vertrouwen draait: het team, de locatie, echte projecten. Stock gebruiken we alleen voor sfeer.

Zo briefen we designers over feedback van de klant

Feedback van klanten komt zelden binnen in de volgorde waarin een designer werkt. Voordat ze bij de designer komt, sorteren we ze per sectie van de pagina en schrijven we voor elk punt drie dingen op: de exacte tekst van de klant, wat die betekent als ze in een andere taal is, en wat er moet gebeuren. Tekst die de klant aanleverde, gaat woord voor woord in het design, in de taal van de site. Waar een lay-out verandert en de tekst nog ontbreekt, staat in de brief dat de tekst volgt. De strategiedocumenten van het project in de gedeelde map blijven de enige bron van waarheid, dus de brief linkt ernaar. De brief eindigt met een uitnodiging om vragen te stellen, want tien vragen kosten minder dan één opnieuw ontworpen sectie.

Platform: Webflow, tenzij de site meer nodig heeft

Webflow is onze standaard. Het levert schone HTML en CSS, heeft ingebouwde lokalisatie met hreflang, en via het CMS voegen klanten een case, dienst of artikel toe door een formulier in te vullen. We bouwen op maat, in Next.js met Payload of Sanity, als een site iets nodig heeft wat Webflow slecht kan: een ledenlogin gekoppeld aan een bestaand ledensysteem, complexe integraties, of een team aan klantzijde dat de code in een eigen repository wil. In alle andere gevallen is maatwerk complexiteit die de klant twee keer betaalt: één keer bij de bouw en nog eens bij het onderhoud.

Bij maatwerk zetten we de merkrichtlijnen, de stijlgids en geschreven instructies voor AI-codeerassistenten in de repository. Het eigen team van de klant kan dan zijn AI-tools om wijzigingen vragen die binnen de huisstijl blijven.

Maak elk woord beschikbaar zonder JavaScript

De meeste AI-crawlers halen de HTML op en voeren geen JavaScript uit (de crawlerstudie van Vercel). Inhoud die pas verschijnt nadat scripts gelopen hebben, krijgen ze nooit te zien. Elke pagina die we opleveren, wordt op de server gerenderd of als statische HTML geëxporteerd, ook de tekst in tabs, accordeons en sliders.

Gestructureerde data per template

We koppelen schema aan templates, zodat elk nieuw CMS-item het automatisch overneemt.

Laat de juiste crawlers binnen

Het robots-bestand laat de crawlers toe die AI-zoekopdrachten en live antwoorden aandrijven. Pure trainingscrawlers blokkeren is een beleidskeuze zonder gevolgen voor je zichtbaarheid. Wie zoek- of live-antwoordbots blokkeert, haalt de site volledig weg uit die assistent. We registreren elke site in Bing Webmaster Tools naast Google Search Console, want de index van Bing voedt ook ChatGPT en Copilot.

Houd de entiteit consistent

Assistenten beschrijven een bedrijf door alles samen te voegen wat erover gezegd wordt. We gebruiken overal één merknaam, vermelden de relatie met de juridische entiteit één keer in de footer, en declareren vroegere namen en zustermerken in de gestructureerde data. Op de site van één klant wist Google niet dat een submerk als apart merk bestond, of dat het vroeger een andere naam droeg. Beide declareren, en de oude URL's doorverwijzen, loste dat op.

Details die de indexering bepalen

• Elke pagina krijgt een eigen title en description in haar eigen taal. Een generieke title op meerdere pagina's, of een Nederlandse description op een Engelse pagina, is een veelvoorkomende reden waarom vertaalde pagina's buiten de index blijven.
• Elke oude URL krijgt een 301-redirect naar haar nieuwe tegenhanger, oude domeinen inbegrepen. Pagina's die door een vroegere hack zijn aangemaakt, laten we bewust zonder redirect.
• Paginatypes linken bewust naar elkaar: dienst naar dienst, dienst naar case, dienst naar artikel, artikel naar artikel. Cases krijgen een eigen pagina, en die vangt ook zoekopdrachten naar bekende klantnamen op.
• Interne links dragen nooit trackingparameters. Voor een zoekmachine wijst een link met een trackingcode naar een andere URL.
• Archiefpagina's na de eerste blijven crawlbaar, anders wordt elk ouder artikel een weespagina.

Overdracht

De klant krijgt een rondleiding door het CMS en een korte geschreven handleiding over wat het team zelf kan aanpassen en wat bij ons terugkomt. Bij Webflow-projecten gaat het eigendom van de site over naar het account van de klant.