Chilverstone Engineering — Website Design Options

The five options

All five include the full sitemap: Home, About us, Services, Machinery/capabilities, Our work/gallery, Request a quote and Contact us.

Forge

Option 01

Dark industrial · confident · traditional engineering

Charcoal and steel with blueprint grid textures, a scrolling capability strip and diagonal CTA bands. The safest, most immediately “engineering workshop” of the five.

Full-bleed hero over workshop imagery
Eight service cards with ghost numerals
Capability spec sheet with TBC values
Filterable gallery with lightbox

Open option 01

Blueprint

Option 02

Light · technical · drawing-sheet aesthetic

A light, documentary take: drawing-sheet frames, monospace annotations and real specification tables. Reads as precision and documentation rather than marketing.

Blueprint grid backgrounds and title blocks
Spec tables for every machine and material
Numbered technical sections
High contrast, very legible on any screen

Open option 02

Steel Edge

Option 03

Editorial · bold · agency-led

Split-screen layouts, oversized condensed headings and full-bleed photography. Designed to make a new company look established and ambitious from the first scroll.

50/50 hero with edge-to-edge imagery
Numbered editorial sections and diagonal bands
Horizontal scroll strip for capabilities
Asymmetric gallery grid

Open option 03

Precision

Option 04

Minimal · quiet · premium

Near-black, hairline-thin structure and a lot of space. Positions Chilverstone as the workshop you send the difficult job to — the most understated and expensive-looking option.

Centred hero, restrained typography
Services as expanding hairline rows
Large-format image gallery
Almost no decoration — all restraint

Open option 04

Workshop

Option 05

Approachable · conversion-led · practical

Light sections, clear cards and obvious calls to action, with a sticky call/WhatsApp/quote bar on mobile. The strongest option for turning visitors into enquiries.

Trust badges and service chips above the fold
Callback request form and FAQ accordion
Sticky mobile action bar and WhatsApp button
Spec chips instead of dense tables

Open option 05

Included in every option

All seven pages: Home, About us, Services, Machinery/capabilities, Our work, Request a quote, Contact us
Quotation form with job details, service type, quantities, material, tolerances, deadlines and drawings/photograph uploads
Contact page with phone, WhatsApp, email, workshop address, Google map, opening hours and social links
Filterable work gallery with a keyboard-accessible lightbox

Responsive from small phones up to large desktops
Keyboard accessible, with skip links, focus states and reduced-motion support
Contrast checked against WCAG AA: the brand blue is used at full strength for fills, borders and icons, with derived shades of the same blue for small text on light and dark backgrounds
Fast: no frameworks, no trackers, no cookie banner needed
Consistent header, footer and navigation across every page
Honest positioning throughout — no invented history, customers or certifications

Before this goes live

The sites are built and working, but a few things still need to come from the client. Everything below is currently shown as a clearly marked placeholder so nothing is mistaken for a claim or a fact.

Information still needed

Confirm the services list and the exact wording for each
Machine list with models, capacities and tolerances (every value currently marked TBC)
Founder’s name, background and the story behind starting the company
Number of years of engineering experience (currently [XX]+)
Phone number, WhatsApp number and email address
Workshop address, opening hours and parking/access notes
Company registration number and VAT number
Social media page URLs (LinkedIn, Facebook, Instagram, YouTube)
Photographs of the workshop, machines, completed work and the founder
Sensible response-time promise for the quotation form ([X] working hours)

Points worth flagging

The logo sheet supplied says “EST. 2018”, but the brief states the company was established in 2026. The sites use 2026 throughout — please confirm which is correct and we will update the logo artwork to match.
The quotation and contact forms are front-end only. They validate properly, but nothing is sent anywhere until the form is connected to an email address or a form service (a one-line change, with the exact spot marked in the code).
File uploads need a form service or server-side handling that accepts multipart data — worth deciding early, as it affects the hosting choice.
The Google map uses a placeholder search term. Once the address is confirmed it will point at the actual unit.
Google Fonts are loaded from the web with system-font fallbacks, so the sites still look right offline. They can be self-hosted once hosted if preferred.

How the options are put together

Structure of each folder

site-1-forge … site-5-workshop

Seven HTML pages at the top level
assets/css/style.css — the full design system for that option
assets/js/main.js — navigation, gallery, forms and file uploads
assets/img/ — logo, favicon and placeholder photographs

Open any index.html directly in a browser to review it — no server required.

Replacing the placeholders

Photographs: drop the real images into assets/img/ and swap the file names, or send them over and we will place them properly
Square-bracket items such as [XX]+, [FOUNDER NAME] and [ADDRESS] are the tokens to replace
Values marked TBC are deliberately unset rather than guessed
The logo mark is supplied as SVG, so it stays sharp at every size