A website drawn like a structural set

The starting point

The previous site was a six-page template build. It had genuine assets: a distinctive isometric star logo, a clear mission about delivering the soundest structural system per construction dollar spent, and real photography of real buildings. It just was not using them. The hero was a generic bridge video with the player controls showing. Projects lived in carousels with no names, no sectors and no captions, so the firm's best proof of capability was the hardest thing on the site to find. And the metadata undersold the firm in search.

The audit came first

Before any design, I audited what was already there: brand colours sampled from the logo files and the live stylesheet, the typeface, every page and every claim. The output was a written list of what to keep, what to fix, and which facts needed re-confirming with the firm before launch, because nothing on a professional services site should be invented to make a layout look full.

A design language borrowed from the drawings

• Sheet numbers. Sections are labelled S-101, S-201 and so on, the way sheets are numbered in a structural set.
• Gridlines and dimensions. Gridline bubbles, dimension strings and level datums run through the layout as quiet structure rather than decoration.
• Type that echoes the wordmark. A variable-width grotesque set slightly condensed, matching the condensed DCSE letters, with a mono face for annotations.
• The palette, retained exactly. Every brand colour came from the existing logo and site. The only additions were neutrals and one tint of the logo blue for linework on dark.

The logo, built in 3D

The star in the logo is a true isometric form (three orthogonal members), so I built it as one in Three.js. On scroll it assembles from blueprint linework into the solid mark and lands in the logo's exact isometric pose. It is lazy-loaded, so it never stands between a visitor and the first paint.

One art direction for mixed photography

The project photography varied in quality and resolution. Rather than hide the weaker images, the site gives all of them one treatment: monochrome by default, colour revealed on interaction. Every project is now named, assigned a sector and captioned.

Motion with restraint

Masked line reveals on headings, shutter-style image reveals, smooth scrolling, a magnetic pull on the primary calls to action, and a curtain transition between pages. All of it is built on GSAP, Lenis and Motion, and all of it switches off for visitors who prefer reduced motion.

Built to be handed over

• One content file. Company details, projects, markets, services and team live in a single typed file. Adding a project means dropping in a photo and adding one entry.
• A contact form that fails gracefully. Submissions send through Resend; if email is not configured, the form shows the direct address instead of an error.
• Launch is a switch. Search indexing stays off on preview URLs and turns on with one environment variable at launch. Redirects keep every old URL working.