Source：m3-pg.de ↗ Checked 2026.10.25
Editor's note
What this site does
A German architecture and planning practice that states its three principles up front, switches between six projects with numbered tabs and puts its enquiry form in the footer.
Conversion
Notes
What you see
The first screen is a video of the M3 logo and nothing else. Below it, under "three principles, one attitude", three words fill the width: sustainability, aesthetics, economy. Three short columns follow — what they believe, how they think, how they work.
The projects section shows one building, Labwerk, an office, lab and warehouse ensemble in Göttingen, with a photo and description, and the other five as numbered vertical tabs. A statement about working with BIM comes next, then a black footer holding an enquiry form (name, email, company, phone, message), the address, phone number and email. The site switches between German and English, and the services page sets out the nine HOAI work stages with what each covers and its share of the fee.
What to take from it
Three words can say more about how a practice designs than a paragraph of introduction.
Showing one project large and the rest as tabs keeps the page short while still showing range. And an enquiry form built into the footer means every page ends with a way to get in touch.
Typography
Typefaces
| Element | Desktop size / weight | Desktop line height | Mobile size / weight |
|---|---|---|---|
| h1 | 155px / 700 | 1.00 | 40px / 700 |
| h2 | 64px / 600 | 1.16 | 34px / 600 |
| h3 | 40px / 400 | 1.20 | 24px / 400 |
| Body (p) | 16px / 400 | 1.50 | 16px / 400 |
Measured values (desktop 1440px, mobile 375px, 2026.10.25). The most frequent setting for each element is shown. Sites that use h1 for a logo or small label will show a small h1.
Download
Download the wireframe
This structure, as a wireframe you can edit in Figma
The page structure above, rebuilt from DevNJ's wireframe parts. It contains none of the original site's copy, images or code.
Using it in Figma
- Download the SVG.
- Drag and drop the file onto a Figma canvas.
- It opens with one layer group per section — start by reordering sections or replacing the copy.
Text comes in as text layers (set in Noto Sans JP).
Screenshots are shown at reduced size as quotations supporting the commentary. All rights in the design, copy and images belong to M3 Planungsgruppe and their respective owners. The wireframes are not copies of the original site; they rebuild its structure from DevNJ's parts. Owners or designers who would like this entry removed or corrected can contact us; we respond within two business days. Featured on: Awwwards — Honorable Mention
