Playbook 4: Design and build for people and machines
A site buyers can judge in seconds and AI crawlers can read in full
- For
- Teams designing or building a service website
- You get
- Our schema map per template and the details that decide indexing
A site has two kinds of readers now: the buyer, who judges it in seconds, and the machines that fetch it, index it and quote it to the buyer later. Design serves the buyer. The build has to serve both. Nothing in this phase invents structure, because the approved sitemap and wireframes already hold it.
Design starts with a system and one page
We translate the brand into a design system in Figma first: type scale, colour use, and every recurring component with its variants and states. Buttons, cards, forms, navigation and call-to-action blocks are designed once and reused everywhere.
Then we design the homepage, desktop and mobile, in one direction, and iterate on it with the client until the visual language is right. Only then does the system roll out to the remaining templates and the CMS templates. Showing one direction works because strategy already settled what the site has to say. Our lesson from a recent project: say up front that the client will see one direction, and make every revision a visible step forward. A client who expected two concepts and received one design in two colour variants felt she had no real choice, and that cost us a round.
The client's own photos usually beat a stock selection wherever trust is the point: team, premises, real projects. We use stock for atmosphere only.
How we brief designers on client feedback
Client feedback rarely arrives in the order a designer works. Before it reaches the designer, we sort it per section of the page, and for every point write down three things: the exact text the client gave, what it means if it is in another language, and what to do. Copy the client supplied goes into the design word for word in the site's language. Where a layout changes but copy is still missing, the brief says copy follows. The project's strategy documents in the shared drive stay the single source of truth, so briefs link to them instead of repeating them. The brief ends with an invitation to ask, because ten questions cost less than one redesigned section.
Platform: Webflow unless the site needs more
Webflow is our default. It produces clean HTML and CSS, has built-in localisation with hreflang, and its CMS lets clients add a case, a service or an article by filling in a form. We build custom, in Next.js with Payload or Sanity, when a site needs what Webflow cannot do well: a member login tied to an existing member system, complex integrations, or a client team that wants the code in its own repository. Otherwise custom is complexity the client pays for twice, once to build and again to maintain.
On custom builds we put the brand guidelines, the style guide and written instructions for AI coding assistants in the repository. A client's own team can then ask its AI tools for changes that stay within the house style.
Make every word available without JavaScript
Most AI crawlers fetch the HTML and do not run JavaScript (Vercel's crawler study). Content that only appears after scripts run is content they never see. Every page we ship is rendered on the server or exported as static HTML, including text inside tabs, accordions and sliders.
Structured data per template
We map schema to templates, never to individual pages, so every new CMS item inherits it.
Template | Schema we add |
|---|---|
Every page | Organization, with the same name, address and logo everywhere |
Service page | Service, plus FAQPage when the page answers questions |
Local business or office page | LocalBusiness |
Article | Article, with a named author |
Founder or expert page | Person |
Event or programme | Event |
Book | Book |
FAQ page | FAQPage |
Let the right crawlers in
The robots file allows the crawlers that power AI search and live answers. Blocking pure training crawlers is a policy choice with no visibility cost; blocking search or live-answer bots removes the site from that assistant entirely. We register every site in Bing Webmaster Tools alongside Google Search Console, because Bing's index also feeds ChatGPT and Copilot.
Keep the entity consistent
Assistants describe a company by stitching together everything said about it. We use one brand name everywhere, state the relationship to the legal entity once in the footer, and declare former names and sister brands in the structured data. On one client's site Google had no idea that a sub-brand existed as a separate brand, or that it used to carry another name. Declaring both, and redirecting the old URLs, fixed that.
Details that decide indexing
- Every page gets its own title and description in its own language. A generic title repeated across pages, or a Dutch description on an English page, is a common reason translated pages stay out of the index.
- Every old URL gets a 301 redirect to its new equivalent, old domains included. Pages created by a past hack are deliberately left without a redirect.
- Page types link to each other on purpose: service to service, service to case, service to article, article to article. Cases get their own pages, which also catches searches for well-known client names.
- Internal links never carry tracking parameters. To a search engine a link with a tracking code points to a different URL.
- Archive pages beyond the first stay crawlable, or every older article becomes an orphan.
Handover
The client gets a CMS walkthrough and a short written manual covering what they can change themselves and what comes back to us. For Webflow projects, ownership of the site moves to the client's account.
Do you have a project in mind?
Let's talk about how to apply this to your own site.
