Zum Inhalt
← Rezepte
Alle Rezepte

Hausverwaltung: geordnet und erreichbar

Hausverwaltung / WEG-Verwaltung / Mietverwaltung / Sondereigentumsverwaltung (auch Gewerbeobjekte und kleine Verwaltungen mit Inhaber:in)

Zur Hausverwaltung kommen drei Gruppen mit drei Fragen: Mieter:innen mit einem Schaden („Wen rufe ich an?“), Eigentümer:innen mit Unterlagen („Wo ist die Abrechnung, wann ist die Versammlung?“) und Gemeinschaften, die eine neue Verwaltung suchen („Was kostet das pro Einheit, wie läuft der Wechsel?“). Deshalb ist die Startseite ein Klingelbrett: vier gleich große Schilder (Schaden melden, Mieter:in, Eigentümer:in, Verwaltung anfragen), Notfallnummern immer zuerst. Danach Schadenmeldung in Schritten mit Fotos, Bereiche für Eigentümer und Mieter, Leistungen mit Preis je Einheit, Verwaltungswechsel, freie Wohnungen mit Energieausweis-Angaben, Zuständigkeiten und Bürozeiten. Source Serif 4 für Überschriften, Geist für Text. Putz, Messing und Schiefer, Ziegelrot nur für „Schaden melden“. Signatur: das Klingelbrett. Zeigt man auf ein Schild, macht es Platz und nennt den nächsten Schritt, die Nachbarn treten zurück (nachbarn-reagieren-hover).

Bauplan tokens.css Alle Techniken

Schrift

Geordnet und erreichbar

Zur Hausverwaltung kommen drei Gruppen mit drei Fragen: Mieter:innen mit einem Schaden („Wen rufe ich an?“), Eigentümer:innen mit Unterlagen („Wo ist die Abrechnung, wann ist die Versammlung?“) und …

Headline
Source Serif 4
Text
Geist

Farbe

  • #F2F0EB
  • #1D2024
  • #E8DFC9
  • #2B3138
  • #9E3B22
  • #5A5D61

Bewegung

cubic-bezier(0.16, 1, 0.3, 1)
Dauer
150 (Hover, Farbe), 300 (Reiter, Akkordeon, Dialog öffnen), 200 (schließen), 220 (Klingelschild macht Platz, Nachbarn treten zurück; 150 zurück), 450 (Seitenwechsel, Klingelschild wird Kopfzeile)

Aufbau der Seite

SignaturNachbarn reagieren auf Hover

HeroFoto-Hero: echtes Foto, ein Satz, ein Weg · Bildunterschrift als

  1. Klingelbrett (vier gleich große Schilder: Schaden melden, Mieter:in, Eigentümer:in, Verwaltung anfragen; je Schild der nächste Schritt als Zeile)Nachbarn reagieren auf Hover · Klingelbrett
  2. Schaden melden (zuerst Notfälle mit Nummern: Wasser, Heizung, Aufzug, Strom; bei Gasgeruch Versorger und 112; dann Formular in Schritten: Objekt, Lage, Beschreibung, Fotos, Erreichbarkeit; Bestätigung mit Vorgangsnummer)Kontakt- und Anfrageformular als eigene Sektion · AnliegenMehrschritt-Anfrage mit Zusammenfassung · SenkrechtDatei-Ablage mit Vorschau und Prüfung · Ein Knopf und KachelnFehlerzusammenfassung im Formular · ListeDanke-Seite: was jetzt passiert · Offene Anfrage
  3. Für Eigentümer:innen (Eigentümerversammlung und Fristen, Jahresabrechnung und Wirtschaftsplan, Beschlusssammlung, Sonderumlagen; Zugang zum Portal; Unterlagen nur im Portal, nie öffentlich)Akkordeon mit Höhenanimation auf auto · Leistungsliste
  4. Für Mieter:innen (Ansprechperson je Haus, Hausordnung, Nebenkostenabrechnung erklärt, Umzug und Wohnungsgeberbestätigung, Kündigung; Fragen mit Suche)FAQ-Seite mit Suche · Mit Suche
  5. Leistungen und Preise (WEG-Verwaltung, Mietverwaltung, Sondereigentumsverwaltung; je Leistung eine Seite mit Antwort zuerst: was enthalten ist, Preis je Einheit und Monat als Spanne, Einzugsgebiet; Zusatzleistungen getrennt)Leistungsseite: Antwort zuerst · HandwerkGanze Karte klickbar
  6. Verwaltungswechsel: so läuft es (Anfrage → Objektbegehung → Angebot → Beschluss der Gemeinschaft → Übergabe der Unterlagen → erste Versammlung; Dauer ehrlich)Prozess-/Timeline-Sektion mit wachsender Linie · Unterstrich je Schritt
  7. Anfrage für eine neue Verwaltung (Kommen wir zu Ihnen? PLZ zuerst, dann Objektart, Einheiten, Baujahr, heutige Verwaltung; Rückmeldung mit Termin)Mehrschritt-Anfrage mit Zusammenfassung · PLZ zuerst
  8. Freie Wohnungen (nur bei eigener Vermietung: Kaltmiete, Nebenkosten, Kaution, Energieausweis-Pflichtangaben auf jeder Karte und im Exposé)Objekt-Steckbrief im Exposé · Miete
  9. Team und Zuständigkeit (wer ist für welches Haus zuständig, nach Objekt oder Straße suchbar; Vertretung im Urlaub; Rückruf innerhalb eines Werktags)Team-/Über-mich-Layout mit Porträt-Interaktion · NamenslisteAnsprechperson-Band · Kanzlei
  10. Aktuelles für die Häuser (Wartungstermine, Rauchmelderprüfung, Heizungsumstellung, Bürozeiten an Feiertagen; mit Datum)News-Übersicht mit Kategorien und Jahr-Archiv · Weitere ladenArtikelseite mit Autorin, Stand und Strukturdaten · MeldungÖffnungszeiten mit Live-Status · Hinweisleiste
  11. Büro und Erreichbarkeit (Telefonzeiten mit Status, Sprechzeiten nach Termin, Adresse als Text, Karte per 2-Klick; Notfallnummern außerhalb der Bürozeiten)Öffnungszeiten mit Live-Status · KarteAnruf-Knopf mit Erreichbarkeit · KnopfKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Kartenbild
  12. Erklärung zur Barrierefreiheit (eigene Seite; bei Online-Diensten für Verbraucher:innen nach BFSG prüfen lassen)Seite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

Nicht verwenden

Regeln
  • Erster Bildschirm: Hausfoto mit Bildunterschrift, H1 und das Klingelbrett mit vier gleich großen Schildern; die Notfallnummer steht im Kopf jeder Seite. Mobil untere Leiste Anrufen / Schaden melden.
  • Signatur (nachbarn-reagieren-hover): genau vier Schilder, gleich groß in Ruhe; das gewählte Schild macht Platz und nennt den nächsten Schritt, die Nachbarn werden schmaler und heller, die Schrift bleibt bei mindestens 4,5 : 1. Auf Touch alle Zeilen sichtbar; bei reduzierter Bewegung nur Farbwechsel.
  • Notfälle zuerst: Notfallnummern je Gewerk bzw. Dienstleister außerhalb der Bürozeiten, bei Gasgeruch Versorger und 112; im Formular steht über dem ersten Feld „Im Notfall anrufen“. Nummern aus einer Quelle (firmendaten-strukturiert) und regelmäßig prüfen.
  • Erlaubnis nach § 34c Abs. 1 Satz 1 Nr. 4 GewO (Wohnimmobilienverwalter) mit zuständiger Behörde im Impressum (§ 5 DDG); Berufshaftpflicht und Weiterbildungspflicht nach der Makler- und Bauträgerverordnung, auf Anfrage nachweisen. „Zertifizierter Verwalter“ (§ 26a WEG) nur mit Bescheinigung. Vom Kunden prüfen lassen.
  • Datenschutz: Abrechnungen, Protokolle und Beschlüsse nur im Portal mit Login, nie als offene PDFs; Schadenmeldung fragt nur, was zur Bearbeitung nötig ist. Objektlisten und Hausfotos nur mit Erlaubnis der Gemeinschaft. Vom Kunden prüfen lassen.
  • Freie Wohnungen nur mit den Pflichtangaben zum Energieausweis in der Anzeige (Gebäudeenergiegesetz) und ohne Provision für Mieter:innen, wo das Bestellerprinzip gilt (objekt-steckbrief-expose, Variante miete). Vom Kunden prüfen lassen.
  • Preise als Spanne je Einheit und Monat mit Stand-Datum und dem Satz, wovon sie abhängen; Zusatzleistungen (Sonderverwaltung, Baubetreuung) getrennt.
  • Knöpfe: Ziegel gefüllt (button-zustaende) nur für „Schaden melden“; Nebenwege als Textlink mit Pfeil (pfeil-icon-button, Variante linie).
Bild und Ton
  • Licht: Tageslicht, ehrlich, auch bedeckt; keine Weitwinkel-Verzerrung.
  • Ausschnitt: Häuser frontal und unbeschnitten, Treppenhaus, Hof, Technikraum; Team im Büro.
  • Personen: Team mit Einwilligung; Bewohner:innen nicht.
  • Formate: 3:2, 4:5
  • Nicht: Keine Schlüsselübergabe, keine Stock-Hochhäuser, keine Häuser ohne Erlaubnis der Gemeinschaft.
  • Anrede: Sie
  • Sätze: Kurz und genau: wer ist zuständig, bis wann, was ist zu tun.
  • Haltung: Wie eine gute Verwalterin am Telefon: freundlich, sortiert, verbindlich bei Fristen.
  • Tonproben: Wasser tritt aus? Rufen Sie sofort an: [Nummer], rund um die Uhr., Die Jahresabrechnung 2026 liegt ab 30. April im Portal.
  • Nicht schreiben: „Rundum-sorglos-Paket“, „wir kümmern uns um alles“, Paragrafen ohne Erklärung.
Hero, Raum und Form
  • Hero-Raster: Hausfoto mit Bildunterschrift über Spalte 1 bis 7, H1 darüber; Klingelbrett über Spalte 8 bis 12 als 2 × 2; mobil H1, Klingelbrett, Foto.
  • Hero-Bild: Echtes Foto eines verwalteten Hauses (mit Erlaubnis), unbeschnitten, 3:2.
  • Überschrift: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem), Source Serif 4; Name der Verwaltung oder ein Satz zu Ort und Aufgabe, kein Label darüber.
  • Handlung: Klingelschild „Schaden melden“ in Ziegel, die anderen drei in Messing; Telefon im Kopf.
  • Zusatz: Notfallnummer im Kopf jeder Seite; mobil untere Leiste Anrufen / Schaden melden.
  • Sektionsabstand: clamp(56px, 7vw, 120px)
  • Dichte: mittel
  • Raum: Geordnet: Klingelbrett mit 12 px Fugen, Zuständigkeiten und Fristen dicht, Kapitel mit klarem Abstand.
  • Spalten: 12
  • Maximale Breite: 1200px
  • Raster: Hero 7/5: Hausfoto über 7 Spalten, Klingelbrett über 5 als 2 × 2-Raster (mobil vier Zeilen). Formulare über 7 Spalten, Hinweise rechts.
  • Radius klein: 4px
  • Radius groß: 10px
  • Schatten: keiner; Klingelknopf als flacher Kreis mit Innenlinie
  • Form: Gerade wie ein Briefkasten: kleine Radien, Messing-Schilder mit Rand, keine Karten-Schatten.
Vorbilder