Drawn to scale

FM Studio works from Kievitlaan in Ghent: Francesca De Fonseca, architect, and Margaux Lisabeth, interior architect. Between them more than forty years of experience, from houses to offices, from foundations to furnishings. Their projects don’t get poetic names, they get file numbers: G01, G06, G52, T.SOPHARMA.

The brief for their website was just as businesslike: the work had to be visible, they had to be able to add projects themselves, and everything else could go. Design and build were ours. No mission statement, no slider full of slogans, no news section that dies after three months.

A drawing starts with a grid of axes, and so does this site. We put one measurement underneath it — one twelfth of the screen width — and drew everything else on top. Every field, every margin, every photo is a multiple of it. That measurement appears ninety-seven times in the compiled CSS, which means the blocks on the page aren’t sized in pixels but in twelfths.

The result scales like a drawing you blow up: on a wide screen everything grows in the same proportion instead of just spreading out. If you think in pixels, brace yourself. If you draw plans, you’ll nod.

A category page shows images and nothing else. No titles, no years, no filters. The grid uses two widths, four units and five, in a fixed order: small, large, large, small, and round again. Every row mirrors the one above it while the left and right edges stay exactly where they are.

Thirty projects hang there today: thirteen in Architecture, thirteen in Interior, four in Landscape. Some appear in more than one category, because a building with a garden and an interior is simply the same building three times.

A project page is a gallery, and that gallery is a list of rows. For each row the studio picks one of two options: a single landscape image, or two portraits side by side. There is no third option, and that is the point. Landscape measures ten units, portrait four and a half, with one unit in between. Everything is five units tall. Whatever you choose, the row closes.

No column picker, no draggable blocks, no chance of breaking the grid between two site visits. Freedom is nice; a gallery that always lines up is nicer.

Every project page is built the same way: the title, a banner across the full width, a portrait image beside a coloured text block that slides two units up over the banner, and the gallery below. Two round arrows walk you through the category, project by project.

The colour of that text block belongs to the category, not to the page. Give Interior a different colour tomorrow and every interior project follows. If the colour is too dark for black type, one switch turns the text light.

In the back end a project looks like a case file: grid image, banner, intro, image next to text, and the gallery as a table where every row picks its own type. Beside it sits that page’s image library. The category carries a colour picker and that switch for light text. There is an SEO tab, and in the site settings FM Studio manages the menu, the footer and the cookie notice themselves.

Everything you see on the site, they can change without us. We only have to show up when something new needs building. With a portfolio that rarely happens, which is a compliment to the grid.

Coincidence or not: we like building for people who work with measurements. For scenography studio Pièce Montée we stacked a homepage like a cake, for Footnote Gallery a site where the work takes the lead and the rest is a footnote, and for garden architects Livingreen a tree counter. If you have a grid in your head, we’ll happily do the arithmetic.