LET'S TALK
Web Design·2024·Forma Architecture·Amsterdam, NL

Forma Studio

Forma needed a website as precise as their buildings — one that communicated spatial intelligence without resorting to the predictable aesthetics of architecture firms.
10
Weeks
40+
Pages
0.8s
Load Time
98
Lighthouse
SCROLL
PROJECT OVERVIEW
SERVICES
  • UX Strategy
  • Visual Design
  • Frontend Development
  • Motion Design
  • CMS Integration
CLIENT
Forma Architecture
DURATION
10 weeks
LOCATION
Amsterdam, NL
YEAR
2024

Forma needed a website as precise as their buildings — one that communicated spatial intelligence without resorting to the predictable aesthetics of architecture firms.

THE CHALLENGE

Architecture websites are almost universally broken. They're either portfolio dumps with no navigation logic, or sterile white boxes that feel abandoned. Forma deserved something that moved like their work — considered, purposeful, with nothing wasted.

NAVIGATION

SPACE AS INTERFACE

We approached the navigation as an architectural problem: how do you move through a building? You don't scan menus. You follow sightlines. The site works on the same principle — each section reveals the next through visual continuity.

N
NAVIGATION SYSTEM
Five primary routes, zero dead ends
TYPOGRAPHY & GRID

THE GRID IS THE BUILDING

We built a custom 24-column grid system — borrowed from architectural drawing conventions — and let it govern every layout decision. Headings never break the grid. Images fill modules precisely.

G
GRID SYSTEM
24-column, 8px base unit
T
TYPOGRAPHIC SCALE
5 levels, 2 typefaces

When the grid is right, you stop fighting the layout. Everything just wants to go where it belongs.

Zara Chen, Lead Designer
MOTION

ARCHITECTURE IN TIME

Static architecture photography goes flat on screen. We designed a motion language that reanimates the stills — subtle reveals that echo the way light moves through a building across a day.

M
MOTION SYSTEM
CSS-native, no JS animation library

Every animation on the site runs entirely in CSS — no JavaScript animation library, no canvas. The result is a 98 Lighthouse performance score and zero layout shift.

THE PROCESS
01

AUDIT

Full review of 40 architecture firm websites. Identified the five patterns everyone defaults to — then built in the opposite direction.

02

STRUCTURE

Information architecture workshop with Forma's partners. Mapped the 40+ page site to a 5-route navigation system that works at any depth.

03

BUILD

10 weeks of design and development running in parallel. Weekly client reviews. Launched with zero post-launch bugs reported.