Designing and shipping a luxury property website,end-to-end.

6,000 homes. A green valley. 58% of it left unbuilt.

The first viewing happens on a screen.

It started by accident. I landed on a property developer's website, and it was basic: a stock photo, a wall of text, and a form asking for my number. I looked at a few more, and they were the same.

Take what works. Leave what doesn't. Add what's missing.

A luxury town needed a voice that didn't shout.

Luxury is mostly restraint. Every choice below took several attempts, and the rejected ones taught me as much as the keepers.

Colour: plum, after four rounds

Forest green came first and was too dark. Celery, pink and a brighter green followed before plum settled it: modern and unexpected in property, with a sense of luxury that still feels calm and trustworthy.

Type: the italic is the identity

PP Editorial Old for headings, chosen for its true italic, drawn rather than slanted, and used from Ultralight to Ultrabold. Libre Caslon Text for body copy, so longer passages stay easy to read. A striking condensed serif was tested and dropped: it had no real italic, and its hairlines broke apart at small sizes.

Logo: a ring of words around a V

Building icons felt dated, so I worked through landscape glyphs, lozenges, seals and marks drawn from the site plan before landing on type: an ascending V inside a ring that reads Verdance Valley, twice, with all four gaps exactly equal. The ring drifts slowly, spins faster as you scroll, reverses when you scroll back, then settles. The V never moves. Below 48 px the ring can't be read, so the favicon is the V alone.

Imagery: zero stock, one world

Every image and film is AI-generated, then directed until it belonged to the same world: one variable changed per attempt, and every new image graded to match the film's light and colour.

Then I designed the moments that make someone stop scrolling.

Each moment had to do a job for the buyer, not just look good. Each one also hides a detail that most visitors will never notice, and that took the longest to get right. With reduced motion switched on, every moment still reads, just without the movement.

Arrival: a tower rises, then a flight

Instead of a spinner, a tower builds floor by floor at the real pace of the download, through the same five stages as the payment plan. Then scrolling takes over, driving a 30-second flight over the town from daylight to the night skyline.

The detail: the five tower renders were made with five different cameras, so the ground jumped between stages by up to 104 px. I composited every tower onto the first stage's plot, taking the drift to 0 px across all 90 frames. And the Verdance name appears only once the frame on screen is night, so even the fastest scroller never sees it over daylight.

It worked perfectly on my laptop. That was the problem.

A laptop loads everything from its own disk, instantly. A buyer meets the site over a real connection, often on a phone, for the first time. So I stopped designing for my machine and started designing for theirs.

Real phones told the truth

Emulators missed what real devices showed: leaves rendering as solid boxes on iPhone, and a white band appearing on the Samsung as the browser bar hid. The leaves were transparent videos, and Safari ignores the transparency in the format other browsers use, so it now gets its own. The phone hero became its own experience, drawn frame by frame, taking the first scrub from about 11 s to 0.9 s.

Then I made it impossible to miss again

I built a release check that runs real Safari and real Chrome, on an empty cache and a throttled connection, and nothing ships unless every row is green. The final run passed on a line averaging just 3.1–3.5 Mbps, under half the target, with slower connections falling back gracefully to still images.