Halden: Roofing Company Website by Devansh PrakashHalden: Roofing Company Website by Devansh Prakash

Halden: Roofing Company Website

Devansh Prakash

Devansh Prakash

The brief

A family-run roofing company needed a website that earns trust before the first site visit. Homeowners rarely know what a roof should cost or what the work involves, so the site had to explain the process plainly, show real finished roofs and make booking an inspection easy.

The challenge

A roof is one of the biggest purchases a homeowner makes, and most roofing sites answer it with a phone number and a gallery. Prices stay vague, the work is a black box, and nothing separates a careful crew from the next one. Halden had to show exactly what a job looks like, what it costs and who does it, in language a homeowner can follow.

The approach

We built the site around the paperwork homeowners actually receive: a photo inspection report, a written scope with a fixed price, a daily build log and a warranty. Every page leads back to one action, booking a free inspection, and every claim is backed by something the visitor can see.

Design system

The palette is asphalt ink and felt-paper cream with a single hi-vis lime accent taken from the crew's shirts, set in Manrope throughout. The hero pairs a giant Halden wordmark with a roofer at work, and job-sheet details such as job numbers, towns and roof sizes give project cards the feel of real paperwork. Hairline lists replace icon tiles, and buttons use a roof-pitch wipe instead of hover lifts.

One design, three platforms

The live site is a fast hand-coded build with a shared page system across 26 pages. The same design was also built in WordPress, Framer and Webflow, keeping the layout, motion and booking flow consistent on each platform.

Services, one crew per job

Six services, from full replacement and leak repairs to storm damage, inspections, gutters and ventilation, each get their own page. The homepage lists them as an accordion with a starting price on every row, so a visitor can see the scope and cost of a job before they ever call.

How a job runs

The process section shows the four documents every customer receives, the same on a small repair as on a full replacement: a photo inspection report, a written scope with a fixed price, a daily build log and a final walkthrough with the warranty. Each step is a tab with a real-looking report inside, so homeowners see the paperwork before they see the crew.

A materials library

Six roofing materials, from architectural shingle and standing seam steel to natural slate, clay tile and cedar shake, are compared side by side with lifespan and wind rating. Every material has a trade-off, and the library lays them out before anyone tries to sell one.

Projects with the numbers that matter

Recent roofs are shown with the details homeowners actually compare: material, roof size in squares, days on site and completion date. Each project opens into a full case study with job notes, so the portfolio reads as evidence rather than a gallery.

A cost estimator in under a minute

Five questions about footprint, stories, pitch, layers to tear off and material give a realistic price range on the spot. It is framed as a ballpark, with the fixed price coming after the free inspection, so it sets honest expectations instead of a teaser number.

Storm response

After hail or high wind, homeowners need instructions, not a sales pitch. The storm band gives three plain steps (stay off the roof, stop the water, call your insurer second) and a direct line to the storm crew, and a dedicated storm page covers insurance claims in detail.

The outcome

The site now works like a well-run job: services, materials and projects are explained in plain terms, costs can be estimated before a call, and booking a free inspection takes a minute from any page. Twenty-six pages share one system, so new services, projects and articles slot in cleanly.
Like this project

Posted Sep 28, 2026

A residential roofing website with photo inspection reports, fixed written prices, a live cost estimator and simple inspection booking.