Durham Coast Roofing — website concept

An SR7 concept project, not a client commission. Durham Coast Roofing is a fictional roofing company on the County Durham coast, designed and built by SR7 Web Design to show what a roofer’s website can be.

View the live concept → (opens in a new tab)

The homepage on desktop. One notice across the top of every page says the business isn’t real.

The brief

Most roofing websites are either a directory listing with a phone number or a template filled with photos of somebody else’s roof. The idea here was a roofer’s website that reads like a proper local firm: plain about the work and the process, specific about the roofs of the North East coast, and quick to ask for a quote from on a phone.

It had to cover every service a coastal roofer offers, show the work with an honest before-and-after, make clear which towns it covers, and keep the quote form within easy reach. And because Durham Coast Roofing isn’t real, it had to say so plainly on every page without spoiling the experience.

Home, seven service pages, projects, a project case study, about, areas we cover, contact and privacy
Service pages for roof repairs, new roofs, flat roofing, commercial roofing, leadwork, guttering and fascias, and roof surveys
An areas page for Seaham, Sunderland, Durham, Houghton-le-Spring, Peterlee, Hartlepool, South Shields, Tynemouth and Whitley Bay
A quote form with clear validation that sends nothing
A privacy notice written for a concept site

Branding

The name was checked before anything was built around it. Durham Coast Roofing says where the firm works and what it does, and I searched Companies House, the UK trademark register, Google and the main social platforms for a real business trading under the same name. None came up.

The palette comes from the coast itself: navy for the sea and wet slate, cream and limestone for the sandstone terraces, and copper for the flashings and the one call to action that matters. The same colours carry onto the livery of the van in the team photograph.

Navy #14304f, cream #fbf8f2 and copper #a4592e, with limestone and slate for the neutrals
Lora for headlines and Manrope for everything else, both served from the site itself
A simple roof mark that still reads at favicon size
One concept notice at the top of every page, styled to sit with the brand

Design direction

As with the other SR7 concepts, the look started in the GetLayers design library rather than on a blank page. I held every page to one GetLayers style, Lumora, and laid each section out from GetLayers compositions instead of the usual centred stack: a split hero, a product-style services grid, and editorial layouts for the featured project and the team.

For the working parts, the quote form, the specification strips, badges and tables, I adapted patterns from the FORGE design system on HorizonX, so the details get the same care as the headlines.

The services section. Each service has its own page, written for the jobs people actually search for.

Photography and the before-and-after

The site is built around a supplied pack of twelve roofing photographs. Each one is cropped for every screen size so the important part of the picture, whether that’s the roofer, the slate or the leadwork, never falls out of frame, and every placement was checked automatically at five screen widths.

The featured project needed a genuine before-and-after. Two unrelated photographs labelled before and after would have been dishonest, so the before image was made as a deliberate edit of the after photograph: the same villa, from the same angle, in the same light, with the roof aged. A slider compares the two.

Twelve supplied photographs plus one matched edit, served as AVIF, WebP and JPEG in up to four sizes
155 image placements checked at 390, 430, 768, 1440 and 1920 pixels wide, with every key area kept in frame
Alt text written for what each picture actually shows
A comparison slider that works with a mouse, a finger or the keyboard

The featured project. Both sides of the slider show the same roof; the before image is a matched edit of the after photograph.

A responsive build

Durham Coast Roofing is built by hand as a static site: plain HTML, one stylesheet and one small script, generated by a Node build that also produces every image size, the sitemap and the structured data. There is no page builder, no framework and nothing to run on the server.

The phone layout was designed rather than left to squash. A call and quote bar sits at the bottom of the screen, the menu becomes a full panel, and the quote form stacks into a single column with large touch targets.

On a phone: the homepage, the before-and-after slider and the quote form.

14 pages in the sitemap and a custom 404 page, all with clean URLs
One canonical address, with www and plain http redirected to https://durhamcoastroofing.uk
Structured data that describes a website concept by SR7 Web Design, not a business
A sitemap with image entries, a web manifest, favicons and social sharing images

Roof repairs, one of seven service pages, each with a short specification panel.

Accessibility

Accessibility was part of the build rather than a check at the end.

A skip link, visible focus styles and a logical heading order on every page
Form errors explained in words and tied to their fields for screen readers
Reduced-motion support throughout
Automated axe-core checks on every page at desktop and mobile widths
Lighthouse Accessibility: 100 on every page tested

Performance

A photography-led site has to watch its weight. The hero is preloaded at the right size for the screen, and everything below it loads only as it comes into view.

Every image served in modern formats at the size the screen needs
Fonts served from the site, with metric-matched fallbacks so text doesn’t jump as they load
Fingerprinted CSS and JavaScript cached for a year, and text compressed on the way out
Lighthouse on the live site, 13 September 2026: homepage Performance 99 on mobile and 100 on desktop, with Accessibility, Best Practices and SEO at 100 on every page tested

Honest by design

Durham Coast Roofing had to feel real right up to the point where someone might mistake it for a real roofer. So the site says what it is on every page, once, without shouting.

A notice at the top of every page: a website concept by SR7 Web Design, not a real company, so it can’t take bookings, enquiries or calls
The quote form is marked as a demonstration; submitting it sends and stores nothing, and suggests contacting a local accredited contractor instead
The phone number comes from the range Ofcom sets aside for TV and radio drama, so it can’t ring anyone
No street address, and no LocalBusiness or RoofingContractor markup: the search data describes a website concept

The quote form. A note above the fields explains that it is a demonstration and nothing is sent.

The result

Durham Coast Roofing is an SR7 concept project, built to show what a roofing website can become when the branding, the photography, the copy and the build are treated as one job.

There are no customers or finished roofs to show here, because it isn’t a real roofing company. What there is, is the site itself, live and working. Open it on your phone.

View the live concept → (opens in a new tab)

More work

Gentry House Barbers — a premium barbershop concept with a filmed hero and a booking demo
Ember & Bone — a premium steakhouse concept built around fire, film and editorial type
Treemasters — a trade site built to get the phone ringing
Back to all work

Want a website that wins the work?

Roofers, builders, electricians, tree surgeons: any trade where the website has to earn trust before the phone rings. If that’s you, this is the level of design I can build for you. Get a quote or call 07538 227 194.