Web design for trade businesses that looks like your firm
Colour, type, imagery and structure come from what you do every day — not from a template that has to serve every industry at once.
In short and in plain language
Here we explain how we design websites for trade businesses. The site should look like your business.
We take colours and type from what you already have. That can be your van or your work clothes. We use few colours so the site looks calm.
We show pictures from your own building sites. They feel more real than bought pictures.
We build the site for the phone first. The text is large and the buttons are easy to tap.
The design is part of the fixed price. Write to us or give us a call.
Key figures
94 %
of trade businesses run their own website (Bitkom)
74 %
of firms say customers have become more critical (Bitkom)
89 %
of firms: customers expect individual offers (Bitkom)
19 pixels
body text on a phone
Prices · net plus VAT
- Colour range, type pairing and imagery inside the fixed price from 1,490 euros net
- Redesign of an existing website from 2,900 euros net
- Website care from 49 euros per month, cancelable with one month's notice to the end of the month, no minimum term
- Hosting in Germany from 15 euros per month, cancelable with one month's notice to the end of the month, no minimum term
The full design work sits inside the fixed price of the website, from 1,490 euros net: colour range, type, imagery, page structure and the templates for the home, service, reference and contact pages. If an existing website is redesigned and moved at the same time, the relaunch starts from 2,900 euros net. The on-site photo session carries no separate price, it is part of the project price. The amount is fixed before work begins.
Prices as of September 2026.
94 per cent (Bitkom) of trade businesses run their own website. The question is no longer whether one exists, but what someone recognises on it within the first few seconds. At the same time, 74 per cent (Bitkom) of firms report that customers have become more critical. Anyone who renders a facade, roofs a house or commissions an installation sells a visible result. The design has to show exactly that instead of hiding it behind blocks of text. This page describes how we settle colour, type, imagery and structure for a trade business — and why the result may look different from a law firm's website without losing any of its credibility.
The same design work, side by side
The essentials on design, in short
- Colour and type are not picked, they are derived: from van lettering, workwear, site boards and printed material the business already owns.
- Two colours plus greys are enough. Seven colours leave you without a main colour and with nothing but noise.
- Body text on a phone runs at 18 to 20 pixels, because it is read outdoors, in sunlight and with tired eyes.
- Photographs from your own jobs beat any library motif, even when they are not technically perfect.
- Credibility comes from order — even spacing, one type family, complete details — not from muted colours.
What design has to achieve in the trades
A trade website has three jobs, and all three are decided in the first screen: it has to show which trade works here, in which area that happens, and how to get in touch. Everything else is depth. That sounds simple, yet it is rarely honoured in practice. Many sites open with a welcome paragraph that would suit any industry and show the first real project photo far down the page. Design here does not mean decoration, it means order: what is seen first decides whether anyone stays. And because the vast majority of visits arrive from a phone, every decision is made on the small screen first and only then carried over to the large one.
Colour range
Two colours plus greys, derived from the van, the workwear and the site board. The signal colour is reserved for calls and forms so that it still works.
Type
One type family in two or three weights. Strong enough to hold up on a phone screen in sunlight, without shouting.
Imagery
Your own sites, your own workshop, your own people. Finished work instead of staged motifs, labelled with place, year and task.
Page structure
The order follows the questions customers ask: what can you do, where do you work, how do I reach you, who turns up at my door.
Use on a phone
Call area, menu and form fields large enough for a thumb. Tap targets from 44 pixels, even with cold fingers in winter.
Recognition
Website, van, workwear and quotation folder share one handwriting. Whoever knows the van recognises the site.
Colour: two tones the business already owns
The colour question is usually answered before anyone asks it. There is a colour on the van, the same colour on the jackets and, as a rule, on the site board as well. That colour becomes the main colour of the website — not because it is fashionable, but because recognition is worth more than any trend. A dark tone for large surfaces and a set of greys for text, rules and boxes complete the range. Nothing more is needed. It only gets tricky when the company colour is light: a bright yellow or orange will not carry text. The colour then moves into surfaces, borders and symbols while the text sits on a dark ground. Nothing is lost, the colour stays visible.
How a colour range comes about
Derived, not chosen
We do not start with a palette but with photographs of the van, the workwear and the last site board. From these we set a main colour, add a dark tone for surfaces and define a signal colour used only on call and form areas. Every combination of text colour and background is then measured. Anything below 4.5 to 1 never enters the draft. How that looks once finished is shown in the design examples.
- Main colour taken from what is already out on the road
- One dark tone for surfaces, one light tone for calm
- Signal colour for calls and forms only, nowhere else
- Contrast measured, not estimated
Type: large enough for a building site
Your website is rarely read in peace at a desk. It is read in a van, in a stairwell, with a glove still on one hand. Thin weights and 13 pixel body text do not work under those conditions, however elegant they looked in the draft. We therefore use a legible type family in two or three weights, keep body text on a phone at 18 to 20 pixels and limit line length so the eye finds its way back to the start of the next line. Headings grow rather than being letterspaced in capitals: words set in capitals read more slowly, especially on small screens. And the phone number is not an image in the header but an area you tap.
| Decision | Off-the-shelf template | For a trade business |
|---|---|---|
| Body text on a phone | 13 to 15 pixels | 18 to 20 pixels |
| Type weight | thin variants for effect | strong weights that hold up in sunlight |
| Line length | across the full screen width | around 75 characters at most |
| Headings | letterspaced capitals | set normally, but larger |
| Phone number | graphic in the header | call area from 44 pixels tall |
| Text to surface contrast | light grey on white | at least 4.5 to 1, measured |
The office screen misleads
Imagery: your sites, not a stock library's
Little makes a trade website feel interchangeable faster than a picture from a stock library. The motifs are visibly staged, the clothing is too clean, the tools lie too neatly. People looking for a trade business see this several times a day and read it for what it is: generic. Your own shots are almost always the better choice, even when they were taken on a phone. They show your work, your people and your area. To turn them into a consistent set we spend half a day with you on site or in the workshop and bring existing material to a common standard. There is more on this on the page about photos for trade websites.
Structure: the order customers think in
Five layers from top to bottom
Show first, explain later
Whoever opens your home page has a few seconds of patience. In that time it must become clear which trade works here and in which area. A welcome paragraph does not manage that; a large photograph with one short line beneath it does. The route to contact follows immediately, then the services as tiles with their own photographs, then the finished work, and last of all the business itself. Explanatory text moves to where people call it up deliberately: the service pages. What belongs on each page is set out in the overview of a website for tradespeople.
- A photo and one sentence at the top, no preamble
- Calling and writing reachable without scrolling
- Four to six service tiles, each with its own photo
- Finished work labelled with place, year and task
- The business and the team last, where they are looked for
Why this may look different from a law firm
A law firm sells something invisible: judgement, discretion, care. Its design works accordingly, with generous white space, quiet blues and greys and few images. A trade business sells the opposite, a result you can put your hand on. That is why the photograph may dominate the surface here, why the colour may be assertive, why figures may be large. In both cases credibility arises in the same place: from order. Even spacing, one type family, clean edges, complete details about the business, address and the people responsible. It is not the strong colour that looks dubious but the muddle — seven colours, three typefaces, an imprint without a name. How this differs from a site builder is set out in the comparison site builder or agency.
Three routes, three outcomes
The same content, three very different sites — and what each of them does to the impression you leave.
Template from a site builder
- Not included: Colours and typefaces are preset
- Not included: Motifs come from a stock library
- Not included: Usually only shrunk for the phone, not rebuilt
- Included: Online within a few days
Designed like a law firm
- Not included: Plenty of white space, hardly any imagery
- Not included: The trade is not recognisable in the first screen
- Not included: Muted colours with no link to the van
- Included: Reads as factual and tidy
Designed for your business
- Included: Colour and type derived from what you already own
- Included: Your own project photos, brought to a common standard
- Included: Drawn for the phone first, then for the desktop
- Included: Contrast and tap targets measured, not estimated
- Included: A fixed price before the first line is drawn
How the design work runs
Look at what exists
Van lettering, workwear, site board, quotation folder, existing photographs. Half the design usually follows from that alone, with nothing invented.
Settle colour and type
Main colour, dark tone, signal colour, greys and a type pairing in two or three weights. Every combination is checked for contrast before it enters the draft.
Draw for the phone first
The home page is drawn in the narrow format, then tablet and desktop follow. You see the draft with your real content, not with dummy text.
Take the photographs
Half a day on a site or in the workshop, plus bringing existing shots to a common standard. The appointment carries no separate price, it sits inside the project price.
Sign-off and handover
Two rounds of corrections, then handover with a short guide for your own changes. If you would rather hand the upkeep over, see maintenance and support.
Van lettering, workwear, site board, quotation folder, existing photographs. Half the design usually follows from that alone, with nothing invented.
Main colour, dark tone, signal colour, greys and a type pairing in two or three weights. Every combination is checked for contrast before it enters the draft.
The home page is drawn in the narrow format, then tablet and desktop follow. You see the draft with your real content, not with dummy text.
Half a day on a site or in the workshop, plus bringing existing shots to a common standard. The appointment carries no separate price, it sits inside the project price.
Two rounds of corrections, then handover with a short guide for your own changes. If you would rather hand the upkeep over, see maintenance and support.
What the design work includes
- A colour range of main colour, dark tone, signal colour and greys, derived from what you already own
- A type pairing in two or three weights with measured contrast values for light and dark display
- Designed templates for the home page, a service page, a reference page and the contact page
- Phone use first: call area, menu and form fields within thumb reach
- Half a day of on-site photography at no separate price, plus reworking of existing shots
- Low-barrier build with sufficient contrast, tap targets and labelled form fields
- Tiles, buttons and boxes as reusable components for later pages
- Handover with a short guide on swapping text and photographs yourself
What the design costs
Typical starting points
Example, not a client project. No particular outcome is assured.
Show us your van
A photo of the vehicle, a few shots of finished work and ten minutes on the phone are enough for a first assessment of how your website could look and what it would cost.