Wärmewerk
Design-Guide zum Konzept einer Wärmepumpen-Landingpage für einen Handwerksbetrieb (SHK): zwei Ausgangslagen (Sanierung/Neubau), ein animiertes Kälte-zu-Wärme-Funktionsdiagramm und echte Effizienzzahlen statt Werbeversprechen.
Live Seite ansehen →Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Projekt & Anforderungen
Was das Konzept leisten muss, für wen es gebaut ist und welche Haltung dahintersteckt.
Projektziel
Vertrauen durch Ehrlichkeit statt Verkaufsdruck aufbauen: erst rechnen (Heizlast, JAZ-Prognose), dann anbieten — genau umgekehrt zur tüpischen Handwerker-Verkaufsseite.
Zielgruppe
Eigenheimbesitzer in zwei sehr unterschiedlichen Situationen: Sanierer mit Bestandsheizkörpern und Sorge vor Fehlinvestition, sowie Bauherren mit fixem Bauplan und Termindruck.
Design-Philosophie
Ingenieurbetrieb statt Handwerker-Klischee: fast scharfe Ecken (4px Radius), echte Messwerte in Mono-Zahlen, Blau für Quelle/Technik, Amber für Ergebnis/Handlung — keine zufälligen Zweitfarben.
Design-Gedanken zum Konzept
Quelle-zu-Ergebnis als durchgängiges Farbleitmotiv: Blau markiert immer die Kälte-/Quelle-/Technik-Seite (Außenluft, Maßnahmen), Amber immer das warme Ergebnis (CTA, Erfolgszahlen). Kein drittes Zufallsakzent — die Farbcodierung selbst erklärt das Funktionsprinzip einer Wärmepumpe.
Animiertes Kälte→Wärme-Diagramm als Herzstück: Statt technischen Fachjargons zeigt eine einzige dunkle Sektion drei Stationen (Umgebungsluft → Verdichtung → Heizkreis) mit pulsierenden Pfeilen dazwischen — das Funktionsprinzip wird sichtbar statt nur beschrieben.
Zwei Pfade statt einer Zielgruppe: Sanierung und Neubau bekommen getrennte Karten mit eigenen Argumenten direkt unter dem Hero — niemand muss sich durch für ihn irrelevante Punkte lesen.
Farbgebung
Kühles Off-White als Basis, Blau für Quelle/Technik, Amber für Ergebnis/Handlung, eine einzige bewusste Dunkel-Sektion für die Funktionsprinzip-Story.
Bildwelt
Reale Fotos Pflicht: Wärmepumpen-Außengerät, Sanierungs- und Neubau-Referenz, Beratungssituation — mit dezentem SVG-Fallback, falls ein Bild fehlt.
Typografie
Live-Seite und dieser Guide nutzen beide denselben System-Font-Stack (Sans + Mono für Messwerte) — keine Google-Fonts-CDN-Requests, DSGVO-konform von Anfang an.
Interaktionskonzept
Pulsierendes Flow-Diagramm, Scroll-Reveals, CSS-:has()-Radio-Auswahl
ohne JavaScript, Zwei-Pfade-Karten mit eigenen CTAs.
Farbpalette
Zwei gekoppelte Akzente statt Zufallsfarben: Blau = Quelle/Technik, Amber = Ergebnis/Handlung.
Quelle/Technik
Blau steht immer für die Ausgangslage: kühle Umgebungsluft, technische Prüfung, Vertrauenssignale — nie für eine Handlungsaufforderung.
Ergebnis/Handlung
Amber markiert das warme Ergebnis und jede Handlungsaufforderung — wer klickt, bewegt sich Richtung Wärme, nicht nur Richtung Kauf.
Vertrauen
Grün bleibt auf Förder- und Bestätigungszahlen beschränkt — kein Greenwashing-Grün als Markenfarbe.
Typografie
System-Font-Stack für Sans und Mono — identisch auf Live-Seite und Guide, keine Drittanbieter-Requests.
Wärmewerk plant und installiert Wärmepumpen für Bestandsgebäude und Neubau. Wir rechnen vorher, ob es funktioniert, und sagen es Ihnen ehrlich.
UI-Komponenten
Wiederverwendbare Bausteine aus der Live-Seite.
Umgebungsluft
Quelle: Aussenluft oder Erdreich
Verdichtung
Aus 1 kWh Strom werden ca. 4 kWh Waerme
Heizkreis
Verteilt ueber Fussboden- oder Heizkoerperkreis
Die JAZ (Jahresarbeitszahl) ist der COP-Wert über ein ganzes Jahr gemittelt — das ist die Zahl, die für die Heizkosten wirklich zählt.
Sanierung
- Heizlastberechnung vor Angebot
- Prüfung vorhandener Heizkörper
Neubau
- Abstimmung mit Bauzeitplan
- Ein Ansprechpartner bis zur Abnahme
:has()-Selektor
hebt die Auswahl farblich hervor, ganz ohne JavaScript.