SOLARIS NORD — Produktkonfigurator & Anfrage-Plattform für solare Dacharchitektur
Ein Website-Template für gebäudeintegrierte Photovoltaik (BIPV), das skandinavische Architekturästhetik mit einem interaktiven Ertragsrechner kombiniert.

01. Projekteinführung
SOLARIS NORD ist ein Konzept-Template für die Solar- und Baubranche. Statt unübersichtlicher Datentabellen präsentiert es solare Dächer als architektonisches Premiumprodukt inklusive schnellem Ertragsrechner.
02. Unternehmens- & Marktkontext
Unternehmen im Bereich erneuerbare Energien nutzen oft überladene Verkaufsseiten, die weder Architekten noch anspruchsvolle Eigenheimbesitzer gestalterisch überzeugen.
03. Die Ausgangsherausforderung
Wie verbindet man architektonische Ästhetik mit einem präzisen Berechnungstool, das Interessenten vor dem Beratungsgespräch vorqualifiziert?
04. Projektziele
- 01Entwicklung eines interaktiven Dachflächen-Reglers zur Berechnung von kWp-Leistung und Jahresertrag.
- 02Klare Darstellung von Witterungsbeständigkeit, Garantie und Speicherintegration.
- 03Eigener Bereich für Architekten mit BIM-/CAD-Planungsdaten.
- 04Direkte Übergabe der berechneten Werte an das Anfrageformular.
05. Analyse, Annahmen & Strategie
Die Strategie verwandelt passives Lesen in aktive Interaktion: Besucher konfigurieren zunächst ihre Gebäudedaten und fragen anschließend gezielt ein individuelles Angebot an.
- Produktpositionierung für Bauherren und Architekten
- UX/UI für interaktiven Dachflächen- und Leistungsrechner (kWp)
- Redaktionelles Designsystem & responsive Ansichten
- Next.js-Umsetzung mit Echtzeit-Berechnung
- Anfrageformular mit automatischer Übernahme der Rechnerdaten
06. Visuelle Richtung & Moodboard
Eine präzise Farbwelt aus dunklem Solar-Graphit (#101010), hellem Architekturbeton (#F3F0EA) und klaren Akzenten (#C8FF45) für Leistungswerte.
07. Informationsarchitektur
- 01Hero-Bereich mit Solardach-Visualisierung und Rechner-Einstieg
- 02Interaktiver Konfigurator für Dachfläche und Jahresertrag
- 03Schichtaufbau des Solarmoduls und Witterungsbeständigkeit
- 04Planungsbereich für Architekten (CAD-/BIM-Daten)
- 05Anfrageformular für Standortprüfung und Kostenvoranschlag
08. UX-Struktur & Nutzerführung
Nutzer stellen ihre Dachfläche ein, wählen optional einen Stromspeicher und übernehmen die Konfiguration mit einem Klick in das Kontaktformular.
Das Interface kombiniert großformatige Architekturfotografie mit präzisen technischen Datenkarten.
10. Motion Design & Mikrointeraktionen
Flüssige Zahlenübergänge im Ertragsrechner kombiniert mit einer animierten Autarkie-Anzeige.
11. Responsives Design (Mobil / Tablet / Desktop)
Der Konfigurator ist für die komfortable Bedienung per Daumen auf Smartphones optimiert.
12. Technische Umsetzung & Architektur
Schlankes React- und TypeScript-State-Management sorgt für verzögerungsfreie Berechnungen direkt im Browser.
13. Präsentation des finalen Interfaces
Zeigt das vollständige Template inklusive aktivem Leistungsrechner, Modulvergleich und Anfragebereich.
14. Architektonische Erkenntnisse & Konzeptmehrwert
- Zeigt, wie ein interaktiver Rechner klassische Formulare aufwertet und die Anfragequalität verbessert.
- Ideale Vorlage für Unternehmen aus Solartechnik, Modulbau, Gebäudetechnik und Architektur.
- Optimal vorbereitet für den Einsatz im polnischen, deutschen (DACH) und internationalen Markt.
15. Eingesetzter Technologie-Stack
Planen Sie ein Projekt mit ähnlichem Anspruch?
Erzählen Sie uns von Ihrem Vorhaben. Gemeinsam definieren wir die passende Strategie, Gestaltung und technische Architektur.
Lassen Sie uns über Ihr Projekt sprechen16. Weitere Fallstudien
KRONO ATELIER — Redaktionelles Portfolio & Anfragesystem für ein Architekturbüro
Ein digitales Flaggschiff-Konzept für ein europäisches Architekturbüro mit großformatiger Werkpräsentation, interaktivem Projektindex und strukturierter Bauherren-Anfrage.
VELOX CLOUD — Produkt-Website & Demo-Funnel für eine B2B-Analyseplattform
Abkehr von austauschbaren SaaS-Layouts hin zu einer präzisen technischen Produktpräsentation mit interaktiven Architekturdiagrammen und klarem Demo-Anfrageprozess.

