For more than 25 years, London-based Modus Fireplaces has designed and installed bespoke modern fireplaces for prestigious homes and hotels across the UK, often working hand in hand with architects and interior designers. Their core belief is that a fireplace isn’t just a fireplace, but a sculptural piece of furniture that sets the mood of a room all year round. A belief like that deserves a website that steps back and lets the products shine.
My task was to re-design and build a new website from the ground up, giving the brand a calm, premium look and feel where large-format photography and the craftsmanship behind each model take centre stage. Less brochure, more showroom.
Before designing the first page, I set up a complete design token system in Figma, covering colours, spacing and typography, and mirrored it one-to-one in Webflow using Client-First conventions. Global text classes are bound across the entire site, which means the design stays consistent as the client adds new models, projects and articles, and that future changes can be made in one place rather than fifty.
On top of that foundation, I built a navigation with a full-width mega menu that gives quick access to the whole product range, and gently gets out of the way by hiding on scroll. Every template is fully responsive, with dedicated adaptations for tablet, where large imagery and navigation tend to collide the most.
Here’s a flat view of the home page. See the live site at www.modusfireplaces.com
The home page opens with a slow crossfade through some of the most striking installations. The images are pulled from a dedicated CMS collection, so the client can swap, reorder and add images (with proper alt texts) without touching the design. Behind the scenes, the animation is custom-coded to stay smooth and in sync, even when images load at different speeds.
See the home page live.
Each fireplace model and project gets its own gallery, fully driven by the CMS. Thumbnails sit directly on top of the hero image and simply disappear when there’s nothing to show. Once you start browsing images, the navigation steps aside so nothing competes with the fire, and slides back in as soon as you reach for it.
Choosing a fireplace involves more decisions than most people expect. Style, fuel type, installation and more. I designed a guide with 19 topics organised into four categories in a nested tab structure, so visitors can explore at their own pace without drowning in information. A FAQ answers the most common questions along the way.
To add a sense of discovery, key images reveal themselves as you scroll through the page. A subtle effect that adds atmosphere without stealing focus from the message, and a small nod to the slow, mesmerising movement of a real flame.
.webp)
