Case study
Reel.
An architecture studio site that lets the work do the talking — clean, image-forward, no fluff.
2025 · Website · Solo, end-to-end · A couple of weeks of evenings · Figma · Framer
See it live
reel.com
The problem
Most studio sites talk too much; the work doesn't get to breathe.
The outcome
Sharpened my web typography and image-led layout instincts.
The problem.
Studio websites tend to overload — long hero copy, multi-level navigation, promotional language. I wanted to test the opposite: a site where the work does the talking and the design's job is to get out of its way.
The approach.
Step 01
Reference research.
Studied real architecture studio sites — what worked, what felt overdone. Patterns kept repeating: oversized hero copy, dense navigation, promotional language that fought the photography. The reference set told me what to leave out, not what to add.
Step 02
Type system.
Built a tight system around one display family and one body sans. Restraint, not variety. Mono captions for metadata, so the prose voice never competes with the work itself.
Step 03
Asymmetric grid.
Designed a grid that lets project images breathe. Captions sit small and mono — secondary to the work. The asymmetry keeps the eye moving through the page without ever centering the studio over the projects.
“Every UI decision had to earn its place.”
The solution.
The outcome.
Shipped a live concept site that does what it set out to: the work leads, the words follow. The constraint of fictional content actually sharpened the brief — without a real client's promotional pressure, I could keep cutting until only the necessary remained.
What I’d do differently
Without a real client the brief was easier than reality. I'd push harder on edge cases — slow connections, image-heavy pages, real content variability — and pressure-test the type system at scale before calling it done.
Next case study