Skip to content

Design examples for trade websites you can click through

Four complete drafts for electrical work, plumbing and heating, roofing and joinery. Each with its own colour world, its own typeface and its own tools — visible on a desktop and in phone view before you ever talk to us.

Ask for a draft for your trade See our services
Four drafts to click through Website at a fixed price from 1,490 euros net Built for phone use

In short and in plain language

This page shows drafts for trade websites. There are drafts for electrical work, plumbing, roofing and joinery.

You can click through each draft yourself. You can do this on a computer or a phone. The firms in them are made up.

Each draft has its own colours and its own typeface. The colour fits the material, like copper or oak. The text should be easy to read, even outside.

Your site gets your colours, your photos and your services. You pay a fixed price.

Tell us your trade and which draft you like. The first conversation costs nothing.

Key figures

4

complete drafts to click through

8

trades with their own design direction

94 percent

of German trade businesses run their own website (Bitkom)

4

type pairings, one per draft

Prices · net, plus VAT

from 1,490 euros net fixed price
  • You choose the design direction before the draft, not afterwards
  • A light and a dark version are part of the fixed price, at no extra cost
  • Support with photography on site is included in the project price
  • SEO support from 490 euros per month and a maintained business profile from 290 euros per month can be booked separately, both cancelable with one month's notice to the end of the month, no minimum term
See all prices

The fixed-price website from 1,490 euros net covers structure and design, your own texts and images built in, the enquiry form, operation on a phone and setup on your domain. A relaunch of an existing website starts at 2,900 euros net. Website support with updates, backups and availability costs 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.

Prices as of September 2026.

Most trade websites look as if they came out of the same drawer: a bought stock photo, a blue bar, three tiles. The fact that 94 percent (Bitkom) of German trade businesses run their own website does not mean you could tell those sites apart. This page shows the opposite: four finished drafts for four trades, each with its own colour world, its own typeface and its own tools for the visitor. You can walk through every one of them on a desktop and in phone view. After that we explain why each decision was taken — colour, type, images, contrast, dark mode and one-thumb operation. How we work is described on web design for the trades; the trades we regularly equip are listed in the industry overview.

How the home page of an electrical business is built

your-company.invalid/electrical-work/
Electrics planned, not improvised
Master craft business near Hildesheim · reply on the same working day
Send enquiryCall us
Eight areas of work
Size a charging point
Report a fault
No detour at the top
Trade, service area and the route to an enquiry sit in the first screen height — ahead of any picture and any company history.
Colour from the material
Copper and warm grey instead of agency blue. The accent marks what can be tapped, nothing else.
Three routes, not twelve
Services, calculator and emergency line. Everything else sits one level down and disturbs no one.
First screen heightTrade · area · enquiry
Website at a fixed pricefrom 1,490 euros net
Structure of a home page in the draft. The company name is a placeholder; colour and type follow your trade. Website at a fixed price from 1,490 euros net.

Four drafts you can click through yourself

Four trades, four finished layout drafts

They show structure and operation. The businesses shown in them are invented.

Draft
Electrical

Electrical business in copper and grey, with a charging point calculator

The most technical of the four drafts: a geometric display face, a copper tone as the only accent and a lot of quiet grey in between. Eight areas of work can be filtered instead of sitting in one long list. The charging point calculator moves in three steps from vehicle and annual mileage to a suitable charging output, and the emergency service has its own red entry point that is visible straight away on a phone.

Service filterCharging calculatorEmergency line
Draft
Plumbing and heating

Plumbing and heating in petrol, with a bathroom planner

Here a wide, highly legible display face carries the headings, together with a cool petrol that recalls water and plant technology. The bathroom planner asks for size, fittings and scope and ends in a cost range rather than a number nobody could hold to. A second part compares the existing system with a heat pump, and fault reports are sorted by urgency.

Bathroom plannerHeating comparisonEmergency line
Draft
Roofing

Roofing in brick red and zinc, with a damage reporter

The only draft with a serif face in the headings: it takes the hardness out of the brick red and gives the pages a quiet, hand-made feel. Images are deliberately cropped wide and flat here, because a roof runs across. The damage reporter moves in three steps from the type of damage through a photo to the reply, joined by a checklist for storm damage and a map of the service area.

Damage reporterStorm checklistService area
Draft
Joinery

Joinery in oak and cream, with a material picker

The warmest draft: a cream ground instead of white, soft serifs in the headings and an oak tone as the accent. Four materials can be viewed side by side, each with character, care and typical use. The configurator assembles a piece of furniture from carcass, front and handle, and on-site measuring has a section of its own, because everything in joinery depends on it.

Material pickerFurniture configuratorOn-site measuring

Illustrative layout drafts. The businesses shown are fictitious; these are not client projects.

What the design is actually decided by

The colour world comes from the material you work with, not from a colour card for service providers. An electrical business gets copper and warm grey, a plumbing business petrol and cool grey, a roofing company brick red on zinc grey, a joinery oak on cream. That is not decoration: anyone opening a trade website decides within about two seconds whether they have landed at the right trade, and colour carries that decision faster than any heading. On top of that comes a hard rule we keep in every draft: the accent colour marks what can be tapped, and nothing else. No coloured box without a function, no heading in a signal colour, no gradients across half a page. As a result the visitor knows after the first section where to tap without anyone explaining it. If your business already has company colours — on the vans, on the workwear, on the site board — we take those and only check whether they carry enough contrast as a text colour. If they do not, they stay a surface colour and the text takes a darker shade of the same hue.

Colour world from the material

Copper, petrol, brick red or oak instead of agency blue. Existing company colours from your vans are carried over and checked for legibility.

Two typefaces, no more

One display face for headings, one quiet reading face for everything else. Both sit on our own server, so nothing is loaded from outside providers.

Your own photos, not stock

Your site, your workshop, your people. Support with photography on site is part of the project price and is not billed separately.

Contrast that holds up outdoors

Body text stays clearly above the 4.5:1 target. A phone in sunlight on scaffolding is the test case, not the monitor in the office.

Built for one thumb

Call and enquiry are areas of at least 44 pixels, within reach in the lower third. Nobody taps a menu bar in the top right one-handed.

Light and dark mode

Every colour world exists in both versions. Anyone whose phone is set to dark in the evening does not get a glaring white surface.

Contrast and thumbs: two things that matter on site

What stays readable is what stands out from its ground

The most common design mistake on trade websites is light text on a light ground — usually a grey extra line under a heading, sometimes white type straight over a site photo. On an office screen you do not notice. On a phone outdoors the line disappears. We therefore measure every text-to-ground combination in the draft and treat the 4.5:1 target as the lower limit for body text. Type over an image either gets a darkened carrier or moves below the image. That is also the everyday core of accessibility: it helps not only people with impaired vision, but anyone reading the page on a half-glaring display.

  • Body text, labels and note lines are measured one by one
  • White type on accent surfaces only where the surface is dark enough
  • Type over photos gets a carrier or moves underneath
  • Dark mode is checked separately, not derived from the light version
Legibility in the drafttarget 4.5:1
Body text on a light ground12.1:1
White type on the accent colour5.4:1
Body text in dark mode11.3:1
Grey note line, light on light3.1:1
Type straight over a site photo2.2:1
The last two lines do not stay: the note line gets darker, the type over the photo gets a darkened carrier behind it.
Illustrative example — values for illustration only.

On a phone the order matters, not the amount

A business owner reads on a phone in the evening, and so does a customer with a water leak. So for every draft we first decide what sits at the very top of the narrow screen and in which order everything else follows. At the top are the two actions that lead to a job: calling and enquiring. Then comes one sentence on what you do and where, then the proof in the form of your own images, and only then the split into sections. On a desktop the same order sits side by side instead of stacked — nothing is left out and nothing is rebuilt, only rearranged. How such a site is built from scratch is described on websites for tradespeople.

  • Call and enquiry as areas of at least 44 pixels
  • No control that needs two hands or precise aiming
  • Images in the size a phone actually needs
  • A menu that opens and closes with one tap
Order on the phonethumb first
Call and enquiry
Two areas, each at least 44 pixels high
1
What you do
Trade and area in one sentence
2
Proof of the work
Two or three of your own project photos
3
The right section
Four to eight tiles instead of body text
4
Legal information
Imprint, privacy notice and opening hours in the footer
5
On a desktop the same order sits side by side instead of stacked.

Typography: a typeface that suits the trade

Each of the four drafts works with exactly two typefaces: one for headings, one for body text. The reading face is the same quiet sans throughout, because it stays reliably legible at small sizes and on weaker phones. The display face changes with the trade. The electrical business gets a geometric, technical face, the roofing company a serif that takes the hardness out of the brick red, the joinery a soft serif that suits timber surfaces, the plumbing business a wide, highly legible face for capitals. All typefaces sit on our server in Germany and are delivered with the page. Nothing is loaded from an outside provider when the page opens, no data flows away through font delivery, and the text stands immediately instead of jumping a tenth of a second later. Sizes and line spacing are set so the page stays readable without zooming: body text starts at 17 pixels, lines rarely run beyond 75 characters, and headings grow with the screen width.

The four design directions side by side

Four trades · four handwritings
Same construction, four completely different design worlds
Structure, loading behaviour and operation are built the same way in all four drafts. Colour, type, image crop and the entry point of the home page differ entirely.
Electrical
copper on warm grey
Display facegeometric
Imageswide, close to the board
Entry pointcharging calculator
technical and very plain
Plumbing and heating
petrol on cool grey
Display facewide sans
Imagestall, finished bathroom
Entry pointbathroom planner
clear at small sizes
Roofing
brick red on zinc
Display faceserif
Imagesflat, roof from below
Entry pointdamage reporter
quiet and hand made
Joinery
oak on cream
Display facesoft serif
Imagessquare, joint and grain
Entry pointmaterial picker
warm, suits timber
Every colour world exists in a light and a dark version; body text keeps a contrast above the 4.5:1 target in both.light and dark checked
Chosen in the first calldirection before the draft
Website at a fixed pricefrom 1,490 euros net
Colour, type, image crop and entry point of the four drafts compared. Illustrative example — the direction for your business is set in the first conversation.

Imagery: your own site beats any bought stock photo

Anyone who has seen three trade websites next to each other recognises a bought stock photo — it is the same on all of them. So we work with your own pictures: finished work, workshop, vehicles, people from the business. Because 74 percent (Bitkom) of businesses find that customers have become more critical, proof matters more than gloss: a slightly crooked but real photo of the last refurbishment convinces more than a perfect studio shot with no connection. The crop follows the trade. Roofs are cut wide and flat, because a roof surface runs across. Bathrooms need tall formats, because the room works in its height. Furniture details take square crops, because the point is the joint and not the room. So that images do not slow the page down, they are delivered in several sizes and stored in modern formats; the phone loads the small version, the large screen the large one. If you do not yet have usable pictures, photos for trade websites helps with the first step — support on site is not billed separately, it is part of the project price.

DraftColour worldDisplay faceImage crop
Electrical businesscopper on warm greygeometric, technicalwide, detail of board and cable
Plumbing and heatingpetrol on cool greywide, highly legibletall, finished bathroom and plant room
Roofingbrick red on zinc greyserif, quietflat and wide, roof from below
Joineryoak on creamsoft serif, warmsquare, joint and surface

How a draft for your business comes about

We clarify which work you want to bring in and which you do not, how far you travel and who answers the phone. That is what decides the top of the home page — not a matter of design taste.

Accessibility pays off even without an obligation

Under the German Accessibility Strengthening Act, micro-enterprises that offer or provide services are exempt from the accessibility obligation (section 3 subsection 3 sentence 1 BFSG). A micro-enterprise is a business with fewer than ten employees and no more than 2 million Euro in annual turnover or annual balance sheet total (section 2 number 17 BFSG). That exempts you neither from the imprint nor from the privacy notice, and it is no reason to build a site that is hard to use. Sufficient contrast, large tap areas and a clear order cost nothing extra in the design and help anyone using your site in poor light or with thick gloves. Whether your business falls under the exemption is a question for legal advice if in doubt.

Common questions about design and drafts

What can we help you with?

One click is enough — everything after that is optional.

Tell us briefly about the project

Everything on this step is optional.

As shown in your browser, with or without https://.

When would you like to start? (optional)
Rough budget range (optional)

Optional — you are not committing to anything.

A few keywords are enough. If you write something, please use at least 5 characters.

How can we reach you?

We usually get back to you within one business day.

Your name or surname, at least 2 characters.

Only needed if you would like a call back.

The address our reply should go to, with @ and domain.

By submitting you consent to the processing of your details to handle this request. Details in our privacy policy.