WEBSITES · ARCHITECTURE
Website for an architecture studio: let the work speak
An architect does not sell words, they sell space. For Atelje Mora we built a site with almost no text — but with a slider that pulls the finished render out of a grey working model.
Architecture studios make two opposite mistakes. The first kind fill the page with text about the philosophy of space that nobody reads. The second kind publish a gallery with no context, where it is impossible to tell what is a built project, what is a competition entry and what is a holiday photograph.
For Atelje Mora we looked for the middle ground: as few words as possible, every one of them in the right place — and one element the competition does not have.
1. The slider: massing model ↔ final render
This is the centrepiece of the site. The same villa, the same camera angle, two states:
- Left — the grey working model: volumes only, no materials, no sky, no light.
- Right — the final render at dusk: concrete, glass, warm light from the windows, a reflection in the pool.
The visitor drags the handle and moves between them. On the first visit the slider nudges itself gently left and right, to signal that it is interactive.
Why it works: the client sees your process, not just the result. The difference between the model and the render is precisely what they are paying you for. It is the strongest argument for the fee that an architecture studio has — and nobody uses it.
Technically: the grey model is not a separate 3D export but a derivative of the same image, so the geometry matches down to the last pixel. That is why the transition is perfectly smooth, with no jump.
Atelje Mora — architecture studio
Model/render slider, a portfolio of six projects, the process in four steps. Try dragging the handle in the middle of the page.
Open demo →2. Typography should be quiet
An architecture site must not compete with the projects. So: one serif typeface, plenty of white space, small mono labels for technical data and no colour accents apart from a single bronze.
The opening sentence writes itself out word by word as you scroll, as if someone were typing it — slowly, without jumping about. It is the only text animation on the site, and that is exactly why it lands.
3. Projects need names and years
A gallery without data is Pinterest. Every project at Atelje Mora has a name, a type and a year: Thermae Oculus (wellness, 2026), Helix House (interior, 2025), Casa Arco (residential, 2026), Črna Koča (alpine retreat, 2025), Pavilion Mira (workspace, 2026).
Photographs reveal themselves from the bottom up as they come into view, and inside the frame they drift slowly — which gives a calm page just enough life.
4. The process in four sentences
A client building for the first time has no idea what happens after the first meeting. Hence four steps, one sentence each: we listen (site, brief, budget, light), we model (volume studies in the grey model), we render (materials, furnishings, time of day), we hand over (stills, films and walkthroughs for the planning office, the bank and the buyers).
That last item matters more than it looks: architectural renders are not just handsome pictures, they are the tool for winning planning permission and a loan. Say so, and you are selling a solution rather than images.
5. What belongs in the footer
Instead of “get in touch” there is a line worth stealing: “We build twice. Once in pixels. Once in concrete.” Two sentences that describe the entire business model of a studio doing both visualisation and architecture.
What we need from the studio
- Renders at full resolution — and, if possible, the grey working versions from the same angle (for the slider).
- Project data — name, location (approximate is fine), type, year, floor area.
- A decision on confidentiality — which projects may be public and which appear only as a “private residence”.
If you have not kept the working models, we can derive them from the finished renders — which is exactly what we did for this demo.