Reference · Website

117 pages, one design system, no agency

The mrpetzai.de website – concept, information architecture, design, copy and build from one pair of hands.

No website builder, no bought theme, no third-party extensions. Every page is assembled from the same components, which is why the hundredth page costs no more effort than the tenth. This page shows what came of that and which decisions sit behind it.

Home page of mrpetzai.de with hero, topic chips, key figures and the business check bar
In servicemrpetzai.de · German and English
117pages in German and English
2 hoursfor a new page in the corporate design
€0in licences for themes and extensions
1 personconcept, design, copy, build

The numbers

What this website saves

The numbers first, the reasoning after. If you only have a minute, this section is it.

€25,000 – 45,000 is what an agency in the German Mittelstand would have charged to build this
€9,600 – 24,000 in retainer fees that would fall due every year
5 minutes from spotting a typo to the corrected page – no ticket, no waiting
117 pages in German and English, all from a single design system
Red: what this would otherwise cost or delay Cyan: what it removes or speeds up
See the breakdown – item by item
What a site of this size costs Through an agency Here
Concept, information architecture, design system€8,000 – 15,000worked out in house
Design and build, 117 pages€12,000 – 22,000built in house
Copy and SEO architecture€5,000 – 8,000written in house
Ongoing retainer€800 – 2,000 per monthnone
Hosting€50 – 200 per montharound €15 per month
Build once, plus the first year of upkeep€34,600 – 69,000around €180

Where these figures come from: Typical market rates for the German Mittelstand, deliberately set at the lower end – not quotes obtained for this purpose. Anyone paying more will find the gap larger, not smaller.

The price is not the whole difference. A site you buy is finished on handover day and starts ageing from then on. A site you build yourself keeps developing, because developing it costs nothing. After twelve months that is the larger item.

See the combined figures for all seven systems →

Starting point

Why not a website builder

A consultancy website has to do two things at once: be found and be convincing. Website builders handle the first adequately and the second rarely.

Three reasons against the obvious answer

  • Templates look like templates. Use the same builder as your competitors and you look like your competitors. For an offering that sells judgement, that is a substance problem, not a taste problem.
  • Load time is not cosmetics. Builder sites carry code the page never uses. That costs visibility with Google and patience with the reader – both measurable.
  • Long-tail reach needs many pages. Being found for specialist topics means a good page for each of them. With a builder the eightieth page is as laborious as the first. With your own design system it takes two hours.

So the decision was not a technical preference but a calculation: what will it cost to add the hundredth page two years from now?

In service

What was built

No theme, no page builder, no third-party extensions. One design system of a few components, from which every page is assembled.

Home page of mrpetzai.de with hero, topic chips, key figures and the business check bar
The home page in service. Hero with a single clear message, topic chips, layered calls to action, the pricing banner and the business check bar – all components from the same design system. None of them was bought in.

117 pages, two languages

German and English, plus service pages, specialist topics, the newspaper, the campus and the application pages. All from the same components, all in the same visual language.

A design system, not single pages

Hero, card, figure row, process chain, quote panel, form. A new page is assembled rather than designed. That is why it takes hours instead of weeks.

Long tail rather than home page SEO

Visibility comes from many good specialist pages, not from one optimised home page. Each topic gets its own page with its own search term and its own call to action.

Measured, not assumed

Load time, stability and structure are checked regularly – with the same tool the business check applies to client sites.

How it is built

The decisions behind it

A website does not live on its page count but on a handful of early decisions that cannot be corrected later.

  • One stylesheet for everything. Colours, spacing, type sizes and components live in one place. Changing the button colour changes it on 117 pages at once – and cannot be forgotten on 116 of them.
  • No framework, no build step. The pages are plain HTML and CSS. That sounds old-fashioned and is the reason they load fast, need no maintenance and will still work in five years.
  • Images in modern formats and several sizes. A phone does not download the same image as a desktop. This is the single largest lever on load time.
  • Accessibility as a requirement, not an afterthought. Keyboard operation, visible focus rings, contrast and read-aloud are built in. Not out of duty, but because decision-makers read pages on the phone and on the move.

What it means

What this is worth to a company

The website is the most visible of the seven systems – and the least telling if you only look at the surface.

  • I can judge an agency quote. Having built 117 pages myself, I know what a line item called “design system implementation” means and where an estimate has been padded.
  • I know what upkeep really costs. Not in hourly rates but in friction: how often does anyone change something when every change means raising a request? The answer is almost never.
  • Marketing and engineering in one person. Search terms, page structure, copy and implementation belong together. Split across three people, the connection is lost in the handover.

A website is not a project, it is a working tool. It never gets finished, it gets used. Everything about this site is built on that assumption – which is why there is an editorial system beside it instead of an invoice for text corrections.

Take it with you

This reference as a PDF

The figures, the build and the reasoning, laid out for A4 – without navigation, with contact details in the footer. To pass on or to print.