Maatlijn

Het bureau was gegroeid via mond-tot-mondreclame. Er was geen echt merk, en de website leek op die van elke andere architect: een diavoorstelling van renders en een contactformulier. Dat paste niet meer. Nieuwe klanten kwamen met vragen waar de oude site geen antwoord op had. Hoe werken jullie? Wat kost het? Spreek ik over een jaar nog steeds dezelfde persoon? Maatlijn had een naam nodig, een huisstijl en een website die die vragen al beantwoordt vóór het eerste gesprek. En die net zo zorgvuldig aanvoelt als hun tekeningen.

De opdracht kwam neer op één zin. Laat de website voelen alsof hij getekend is door dezelfde hand die de huizen tekent.

De naam kwam eerst. Een maatlijn is op een technische tekening de dunne lijn met twee streepjes aan de uiteinden en een maat in millimeters. Het is het bescheidenste onderdeel van een plattegrond, en ook het onderdeel dat hem bouwbaar maakt. Precies zo ziet het bureau zijn eigen rol.

Die lijn werd de rode draad door alles, van het logo tot de website. Het beeldmerk is ermee getekend, het visitekaartje en het bouwbord dragen hem, en op de website wordt hij het grid dat je ziet. Twee dunne lijnen lopen langs elke sectie, lijnen markeren waar secties elkaar raken en op elk kruispunt staat een klein kruisje, net als de hulplijnen op een bouwtekening. De grote naam op de homepage staat op een van die lijnen, zoals het huis in het logo op zijn grondlijn staat. Waar je Maatlijn ook tegenkomt, op papier, op een bord langs de weg of op een telefoon, je herkent steeds dezelfde hand.

Het beeldmerk is een doorsnede van een huis. Eén taps toelopende plaat loopt naar rechts op, rust op een enkele kolom en kraagt uit over de grond, met de maat van de overstek erboven getekend. Het woordmerk is gezet in Newsreader, met ARCHITECTEN op de grondlijn. De kleuren komen uit de materialen waarmee het bureau bouwt: papier, steen, terracotta, mos en antraciet. Elk logobestand is een overgetrokken vector die uit één set maten is opgebouwd. Het visitekaartje, het bouwbord op de kavel en het favicon in een browsertabblad zijn dus letterlijk dezelfde tekening.

De website vertelt het verhaal van het bureau in de volgorde waarin een nieuwe klant zijn vragen stelt. Hij begint met wie Maatlijn is en waar ze in geloven, en laat dan een korte film zien van het bureau aan het werk. Daarna volgen geselecteerde projecten als panelen over het hele scherm, die elk openklappen tot een korte case. Dan komen de diensten, het bureau in cijfers, de vier fases van eerste schets tot oplevering met de tijd die elke fase kost, en de woorden van een opdrachtgever. Elke sectie eindigt dicht bij dezelfde uitnodiging: plan een eerste gesprek.

Naast de website is er een merkgids met het logo in elke versie, de kleuren, de typografie en de regels voor het gebruik van de maatlijn. Er zitten ook mock-ups in voor het visitekaartje, de projectmap, het briefpapier, het bouwbord en berichten voor social media.

De beweging is rustig en doorlopend, alsof je door een huis loopt. De openingsfoto groeit uit een klein venster terwijl de naam uit de grond oprijst. Bij het scrollen schuift het papier over de foto, de film groeit in één ononderbroken shot uit een zin, projectpanelen stapelen zich op elkaar en het menu neemt niet het hele scherm over, maar groeit uit de balk zelf.

Niets daarvan zit in de weg. Alles werkt met een toetsenbord, elke animatie stapt opzij voor bezoekers die liever minder beweging zien, tekst houdt op elke foto genoeg contrast en de film speelt alleen af als hij in beeld is. De site is gebouwd met gewone HTML, CSS en JavaScript, met Motion voor de animaties en Lenis voor soepel scrollen.