The word shows what it says
“Already” is set so large that it can hold a photograph. Through the letters you see the practice’s own construction site. The picture drifts as you scroll, so the word is never the same twice.
already
PDA Architecture
Twenty years of architecture, legible in one minute
A Paris practice that gives existing buildings a second life. I rebuilt its site as one English page where the scale, the proof and the strongest argument can be read before the first scroll ends.
- Industry
- Architecture
- Audience
- B2B, investors and asset managers
- Year
- 2026
- Role
- Product designer, end to end
- Scope
- Brief audit, three directions, design system and build
- Built with
- Claude Code
- HTML, CSS, JavaScript
- GSAP for animation
- Lenis for smooth scroll
The project
in short
The goal
- An English first impression that works on a phone, between two meetings
- Scale and proof visible without opening every project
- A modern, animated site that still loads fast
What I did
- Audited the original site and read the brief as claims to test
- Built three directions as working pages and kept one
- Designed one English page, a project sheet and the design system behind them
- Built it with Claude Code and checked it on a phone
The result
- The first screen says what the practice does, how large it is and who it works for
- Eight projects carry area, year, client and certification on their cards
- A real before and after leads the argument
- It stays light, with 418 KB on first load despite heavy photography
- Body text meets WCAG AAA contrast and secondary text meets AA, both measured
The challenge
A modern, animated brief and heavy photography, against a fast first load. Motion had to earn its place, so each effect carries one idea, and the one pinned section was the price of the horizontal rows.
The practice's strongest argument was one it barely showed, the same building before and after.
Walking through
the page
The page is ordered the way the case is made to a sceptic. This is a preview of the site, not the live page. Scroll to walk it.
- ClaimScale, the claim and one action before the fold. Whoever leaves after ten seconds has still learned what the practice does.
- ProofThe same corner of 125 Saussure photographed before and after a heavy rehabilitation. The practice's argument in one image.
- RangeEight projects of thirty-one, with area, client and certification on every card. The row moves sideways under the scroll.
- DepthTen disciplines under one roof, from reconstruction to the Digital Lab, without a page for each.
- DetailA project opens over the page with its gallery, story and technical card. The reader never has to leave.
The same practice,
a different first minute
The practice has since launched a new site of its own, so the original now exists only in the web archive. Here it is next to my redesign. On a computer keep scrolling, on a phone drag the handle.
Before pda.archi, home page, as archived in April 2026. After
BeforeThe page opened on a full-screen slider with one French line over it. Nothing said what the practice does, how big it is or who it works for, and the logo and menu sat directly on the photograph, where the light parts of the picture swallowed them.
AfterThe page opens with the practice's one subject in a sentence, the year, the place and what it does, then the largest photograph. The same image is still there. It now lands on a reader who knows what they are looking at.
A project page
A project, beforeA photograph and one French line. A foreign client learns nothing about the building, such as where it is, how big, who it was for or what was done.
A project, afterThe same building gets a proper sheet of its own, with a gallery, the story and a technical card with client, address, area, dates and certifications.
One pagereplaces a many-page archive, and the rest of the archive is one click away
Englishfor readers who open the site in London, Munich or Dubai
Proof on the cardEight projects show area, year, client and certification without being opened
Tokens onlyNo raw colour or size values outside the token file, checked by a linter that blocks the build
The brief asked
for a site that moves
A modern, animated site was part of the task. For a practice that works on buildings that already stand, motion had to earn its place, so each of three effects carries one idea. They run live below, they are not screenshots.
Projects move sideways
Eight of thirty-one projects sit in one row that travels sideways while you scroll down. The other twenty-three stay in the archive, one click away.
A project opens as a sheet
Click a project and the building opens as its own sheet, so the reader never leaves the page. Here it is 125 Saussure, with a before-and-after pair, the story and a technical card with client, contractor and address.
A Paris studio,
readable to strangers
The practice
PDA has worked in Paris since 2002. Twenty-odd architects and engineers, clients such as Swiss Life, PIMCO and Gecina, buildings from 200 to 30 000 m². They almost never build on empty ground. They take buildings that already stand and give them a next life.
The reader
The people who hire them increasingly decide from abroad. They are fund and asset managers with an ageing office portfolio, and they open the site between two meetings, usually on a phone, looking for one answer. Can these people handle our building?
What I changed
- Scale at a glanceAreas, client names and figures now sit on the home page, so the size of the practice is clear straight away.
- Data on every projectEach project card carries area, year and building type, so nobody has to open it to find out what it is.
- Before and after up frontGiving existing buildings a new life is the whole practice, so the page leads with a real before and after.
- Made for readers abroadOne English page, with the rest of the archive one click away.
Three directions
I tried
Three decisions
and what they cost
Each of these made some other part of the page harder. Choosing which part is the design decision.
The grid is drawn, not implied
Column lines are painted on the container at exactly one column's pitch, and every block that carries lines sits on the real grid, so each cell starts on a line. For a practice whose whole argument is structure, the page itself has to show some.
What it cost — it broke twice before it was right, once because cells drew their own borders over the lines and once because a figure row used its own layout without a gutter. Both are now rules in the system.A real before and after, not the impressive one
The first matched pair I had was an aerial rendering of an unbuilt research tower. It looked synthetic, and it was going to be the first argument on the page. I found a true pair instead, one corner of 125 Saussure, a built project for a real client, before and after.
What it cost — the two photographs were shot from slightly different distances, so they are aligned by crop until the cornice runs across the seam. It is a quieter image than the rendering, and it is honest.Horizontal rows, pinned, with a price
Projects, expertise and team each scroll sideways under the vertical scroll, and each is pinned until its last card is fully on screen. Without the pin the first card leaves before anyone has looked at it and the last arrives as the section exits.
What it cost — the page grew from about 16 000 to 24 000 px, three quarters of it the travel of the rows. The team row goes first if the page needs to be shorter.Designed for
the phone too
The people who read this site often open it on a phone, so the phone version was designed alongside the desktop one, not cut down from it.
Click a screen, then scroll inside it
One menu for both screens
On a computer the links stand in a row. On a phone they fold behind a button, and the list is written only once.
Swipe instead of pin
The pinned rows of the desktop page become rows you move with a finger.
No hover needed
Anything that opens on hover on a computer is a plain link on a phone.
See it
running
Visit website
Concept redesign, not affiliated with PDA Architecture. Photography and project data belong to the practice and the named photographers. Opens in a new tab.