Case study · Headless WordPress · Live at studio3b.co.za
Studio 3B
Studio 3B is a Durban practice that does architecture, quantity surveying and interiors. Their old website showed almost none of that work, which for an architecture firm is the whole problem. So we rebuilt studio3b.co.za around the work itself. The home page is a full-bleed mosaic of their own renders, 29 projects of it, and the firm updates everything from WordPress without calling us.
- Year
- 2026
- Type
- Headless WordPress
- Practice
- Architecture · QS · Interiors
- Live
- studio3b.co.za ↗
The live site, top to bottom. This is a recording, not a mockup.
The brief
An architecture practice gets judged on its buildings, so the buildings had to be the first thing you see (not a slogan with the work three clicks away). The quieter half of the brief mattered more. When the practice finishes a building, they wanted to put it on the site themselves, without a developer and without waiting.
The build
We built the home page as a full-bleed mosaic on a near-black background, because the renders read better as the only bright thing on the page. The content (29 projects across eight categories) lives in WordPress, and the front end is Next.js, built by hand and served from Vercel. Navigation is a single hamburger menu on every screen size, so nothing competes with the images.
The signature moment
The loading sequence
The site opens with a short loading sequence on black, and we kept it deliberately plain: the wordmark, a thin gold bar filling up, and the word ARCHITECTURE. It runs for about two seconds, once per session, and then gets out of the way. Anyone who has asked their device for reduced motion never sees it, and the styles load before first paint, so it never flickers on a return visit.
One detail
We didn’t guess the gold
By the time we started, three slightly different golds were in circulation between the old site and our own drafts, and by eye they all looked right. So we stopped eyeballing and sampled the colour from the “3B” in the firm’s own wordmark. That one value is now the only gold on the site (the loading bar, the enquire button, the routes on the globe), and the button in the header finally matches the logo next to it.
Two pages we rebuilt more than once
A gallery home page sets a bar the rest of the site has to clear, and these two took the most work to get there.
Projects, told in chapters
Our first version of this page was just the home mosaic again, which felt lazy the moment we compared them. The version that shipped treats each of the eight categories as a chapter: a fixed panel on the left with a big ghosted numeral and a short blurb, and a horizontal strip of projects on the right. The gold scrubber under each strip only appears when there’s more to scroll.
A globe on the contact page
The practice works well beyond Durban, and the contact page needed to show that without a paragraph of claims. So it has a globe you can drag, with gold routes running out from the office, and a flat map for anyone who prefers one. Both views stay mounted while you toggle, which means the globe never restarts and the enquiry form keeps whatever you’ve typed.
Details worth noticing
Theirs to update
Adding a project takes the firm about ten minutes in wp-admin: fill in the fields, drop in the images, publish. No developer involved.
Enquiries that can't go missing
There's no form plugin. A custom endpoint saves every enquiry into WordPress and then sends a branded email, so even if an email goes astray the enquiry is still sitting in the admin.
Eight landing pages that earn traffic
Residential, commercial, retail, restaurant, industrial, education, healthcare and multi-use each get a real page, because that's how people actually search for architects.
Built on their own type
The site uses Gotham Pro, the firm's existing brand font, self-hosted and carried over from the old site rather than swapped for a lookalike.