Zum Inhalt
← Rezepte
Alle Rezepte

Architektur: ruhiges Raster

Architekturbüro / Planungsbüro / Innenarchitektur

Die Arbeit steht im Vordergrund, die Website tritt zurück: eine Schriftfamilie in einem Schnitt, weiße und hellgraue Flächen, Projektlisten statt Effekte. Bewegung ist kurz und ohne Show, Seitenwechsel laufen über native View Transitions. So arbeiten David Chipperfield, KAAN und Sauerbruch Hutton – kein Award-Feuerwerk.

Bauplan tokens.css Alle Techniken

Schrift

Ruhiges Raster

Die Arbeit steht im Vordergrund, die Website tritt zurück: eine Schriftfamilie in einem Schnitt, weiße und hellgraue Flächen, Projektlisten statt Effekte.

Headline
Hanken Grotesk
Text
Hanken Grotesk

Farbe

  • #FFFFFF
  • #E1E3E3
  • #231F20
  • #76767A
  • #1F2323
  • #0022FF

Bewegung

cubic-bezier(0.25, 1, 0.5, 1)
Dauer
125 (Farbe/Stroke), 250 (UI, Hover), 500 (Panels), 750–1000 (Bild-Einblendung)

Aufbau der Seite

SignaturMeta-Labels & HUD-Typografie (Mikrotypo als Layout-Ebene)

HeroEditorial-/Magazin-Layout · Magazin-Cover als HeroMeta-Labels & HUD-Typografie (Mikrotypo als Layout-Ebene)

  1. Projekte / WerkverzeichnisProjektindex als Liste mit Hover-BildvorschauAnimierter Filter- und Ansichtswechsel (FLIP / View Transitions) · Nativ
  2. Leistungen / Typologien (Leistungsphasen, Wohnen, Bildung, Kultur …)Akkordeon mit Höhenanimation auf auto · LeistungslisteBildvorschau beim Listen-Hover
  3. Projekt-DetailseiteCase-Study-Gerüst auf Award-NiveauEditorial-/Magazin-Layout · Magazin
  4. Büro / TeamTeam-/Über-mich-Layout mit Porträt-Interaktion · Raster
  5. Aktuelles / AuszeichnungenEditorial-/Magazin-Layout · Zeitung
  6. Kontakt (Anfrage, Adresse als Text, Anfahrt mit Karte per 2-Klick, „Termin nach Vereinbarung“)Kontakt- und Anfrageformular als eigene SektionKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · KartenbildÖffnungszeiten mit Live-Status · Termin

Nicht verwenden

Regeln
  • Eine Familie, ein bis zwei Gewichte; Betonung über Kursiv oder Größe, nie über Fett.
  • Projektbilder in Originalfarbe und unbeschnittenem Seitenverhältnis; Bildunterschrift 'Titel • Ort • Jahr' in Meta-Größe.
  • Navigation mit höchstens 5 Punkten (Büro, Projekte, Team, Aktuelles, Kontakt); Header sticky, verschwindet beim Runterscrollen.
  • Projektliste umschaltbar Liste/Raster mit Filter (Typologie, Jahr) – Umschalten per View Transition, nicht per Effekt.
  • Textspalten höchstens 50ch, großzügiger Weißraum statt Trennlinien.
  • Alle Übergänge mit einer Kurve aus den Tokens; UI 250 ms, Panels 500 ms; nichts dauert länger als 1 s.
  • Kontakt als eigene Sektion (kurzes Anfrageformular, Karte per 2-Klick) und zusätzlich als Visitenkarte im Footer: Adresse, Telefon, E-Mail, Kammer-Eintrag.
  • oeffnungszeiten-status als Terminbetrieb: „Termin nach Vereinbarung · Telefon erreichbar Mo–Fr 9–17 Uhr“ statt „Jetzt geöffnet“ (wann_nicht des Musters).
  • Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Architektenkammer, Berufsbezeichnung und Kammer-Eintrag; Projektfotos nur mit Nutzungsrecht der Fotograf:innen und Zustimmung der Bauherren; Wettbewerbe und Auszeichnungen mit Jahr und Quelle – vom Kunden prüfen lassen.
Bild und Ton
  • Licht: Natürliches Tageslicht, Architekturfotografie in Originalfarbe, stürzende Linien korrigiert.
  • Ausschnitt: Unbeschnitten im Original-Seitenverhältnis (Regel); Totale des Baus, dazu Details von Material und Fuge.
  • Personen: Selten, höchstens klein als Maßstab im Raum, nie als Motiv.
  • Formate: 3:2, 4:5, Original
  • Nicht: Keine Renderings mit Lichtreflexen, keine Stockbilder, kein Zuschnitt auf ein einheitliches Kachelformat, keine Filter oder Duotone.
  • Anrede: Sie
  • Sätze: Kurz und sachlich, Substantive tragen. Projekte als „Titel • Ort • Jahr“, Beschreibungen in drei bis fünf Sätzen.
  • Haltung: Die Arbeit spricht, die Website tritt zurück. Keine Superlative, keine Selbstbeschreibung.
  • Tonproben: Wohnen am Kanal. Umbau eines Speichers, 2024., Wir planen Schulen, Wohnhäuser und Räume für Kultur.
  • Nicht schreiben: „Wir leben Architektur“, „innovative Lösungen“, „visionär“, „ganzheitlich“, Ausrufezeichen.
Hero, Raum und Form
  • Hero-Raster: Bürokopf als Zeile oben wie der Titel einer Ausgabe, darunter ein Bild randlos über die volle Breite (editorial-magazin-layout, Variante cover).
  • Hero-Bild: Ein Projektfoto, randlos, 3:2 oder Originalformat; kein Slider, kein Video.
  • Überschrift: clamp(1.953rem, 1.2rem + 2.4vw, 3.052rem), wght 450–500, unten links über Spalte 1 bis 6, unter dem Bild statt darauf.
  • Handlung: Kein CTA-Paar. „Projekte“ als Textlink mit Pfeil unter der Titelzeile, „Kontakt“ im Kopf.
  • Zusatz: Bildunterschrift „Titel • Ort • Jahr“ in 0.8rem, Meta-Labels in Textgröße (meta-labels-hud-typografie).
  • Sektionsabstand: clamp(96px, 12vw, 200px)
  • Dichte: luftig
  • Raum: Weißraum statt Trennlinien (Regel). Große Sprünge zwischen Sektionen, kleine Abstände innerhalb einer Projektzeile: Titel, Ort und Jahr stehen 4 bis 8 px auseinander.
  • Spalten: 12
  • Maximale Breite: none
  • Raster: Bilder randlos oder über 8 Spalten, Text in Spalte 1 bis 5 und höchstens 50ch. Projektliste als Liste oder Raster umschaltbar (3 Spalten Desktop, 1 mobil).
  • Radius klein: 0
  • Radius groß: 0
  • Schatten: keiner
  • Form: Keine Pille: Haupthandlung als Textlink mit Pfeil (pfeil-icon-button, Variante linie), Nebenaktion als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken).
Vorbilder