Brand System
Logo, visuelle Sprache, Motion und ein konsistenter Auftritt für ein technisches Produkt.
Webdesign · Shopify · Marketingmanagement
ALU
TERRASSEN
BAU
Vom bestehenden Auftritt zu einem digitalen Verkaufssystem für Beratung, Vertrauen und individuelle Planung.
Shopify WebsiteLive-Website öffnen ↗ (neuer Tab)
3D-KonfiguratorLive ausprobieren ↗ (neuer Tab)
Meine RolleWebdesign · Entwicklung · Marketingmanagement
Über den Launch hinaus
Ein Auftritt, den ich auch im Marketing begleite.
Bei ALU Terrassenbau bin ich auch für das Marketingmanagement verantwortlich. Website, Produktinformationen und digitale Kommunikation werden gemeinsam weiterentwickelt – mit einem konsistenten Blick auf das Angebot und seine Zielgruppe.
Die eigentliche Aufgabe
Nicht nur eine Website. Ein verständliches System für ein komplexes Angebot.
Terrassenüberdachungen werden nicht spontan gekauft. Menschen vergleichen Konstruktion, Eindeckung, Maße, Montage und Vertrauen. Deshalb verbindet das Projekt Markenauftritt, Beratung, technische Information und interaktive Planung.
Ein Projekt / Sechs verbundene Systeme
Was tatsächlich entwickelt wurde.
Shopify UX
Modulare Seiten für Leistungen, Modelle, Referenzen, Ratgeber, Kontakt und zukünftigen Shop.
Content & Marketing
Technische Inhalte verständlich aufbereitet. Laufende Verantwortung für die digitale Marketingkommunikation.
Lead Journey
Angebotsformular, Beratung, Projektbeispiele und ein klarer Weg von Interesse zur Anfrage.
3D-Konfigurator
React, TypeScript und Three.js für Produkte, Maße, Bauart, Eindeckung, Wände, Licht und Zusammenfassung.
Suchstruktur & Qualität
Leistungsseiten und regionale Inhalte strukturiert. Nutzerwege, mobile Ansichten und technische Funktionen geprüft.
Brand System / bewegt
Das Zeichen baut sich selbst.
Drei Sekunden: erst die Bauzeichnung, dann das Aluminium, dann Licht und Glas. Dieselbe Reihenfolge, in der eine Überdachung entsteht — und derselbe Grund, aus dem das Logo aus drei Stützen und einem Balken besteht. Gebaut als SVG mit eigener Zeitachse, nicht als Video: scharf in jeder Größe, rund 110 KB, und ohne Ladebalken.
Digital Product
Ein Konfigurator, der technische Entscheidungen sichtbar macht.
Der eigenständige Konfigurator verbindet ein responsives Interface mit einer 3D-Szene. Produkte, Maße und Materialien verändern nicht nur einen Textwert, sondern das tatsächliche Modell und seine technischen Regeln.
- React, TypeScript, Vite und Three.js
- reale Produkt- und Materialfotografie
- Tag-, Abend-, Nacht- und Morgenansicht
- Geometrie- und Kompatibilitätsprüfungen
- responsive Planung bis zur Angebotsanfrage
- 01Produkt wählenSechs Konstruktionen, vom schlanken Basic bis zum Carport. Die Wahl baut das Modell am Haus sofort neu auf.
- 02Maße eingebenMillimetergenau, mit Reglern und Serienmaßen daneben. Die Grenzen stehen dabei, nicht in einer Fehlermeldung danach.
- 03Eindeckung wählenVSG in vier Ausführungen, Polycarbonat, Solarmodule. Jede Platte liegt danach sichtbar auf dem Dach.
- 04Wände ergänzenJede Seite einzeln: offen, Glas, Schiebetür oder Sichtschutz. Das Modell zeigt, was das für den Raum bedeutet.
Sechs Konstruktionen / ein Regelwerk
Dasselbe Gerüst trägt jedes Modell.
Basic, Premium, Kaltwintergarten, Cube, Vordach, Carport — im Konfigurator sind das nicht sechs Programme, sondern ein Regelwerk mit sechs Ausgängen. Was wechselt, sind Profile, Dachneigung und erlaubte Maße. Was bleibt, ist die Logik darunter.
Nach dem Bildschirm
Und so sieht es aus, wenn es steht.
Die Bilder darüber kommen aus dem Konfigurator. Diese hier nicht: drei gebaute Anlagen bei Kunden, aufgenommen nach der Montage. Die Aufgabe des Konfigurators ist, dass zwischen dem einen und dem anderen keine Überraschung liegt.
Die Website, in Betrieb
Vier Bildschirme aus der laufenden Seite.
Keine Nachbauten und keine Entwürfe: Aufnahmen von alu-terrassenbau.de, wie die Seite heute für jeden erreichbar ist. Der Weg darin ist der, den eine Anfrage nimmt — ankommen, sich einordnen, Vertrauen fassen, die letzten Fragen klären.
Live-Website öffnen ↗
- 01AnkommenEin Bild, ein Satz, zwei Wege weiter — konfigurieren oder Projekte ansehen.
- 02EinordnenDrei Produktwelten statt einer Liste. Wer sucht, erkennt seine Aufgabe sofort wieder.
- 03Vertrauen fassenAufmaß, Festpreis, kein Kleingedrucktes — und darunter über 400 gebaute Projekte.
- 04Fragen klärenBaugenehmigung, Pflege, Montage — die Einwände stehen auf der Seite, nicht im Telefonat.
Von Rohmaterial zu digitalem Produkt
Der Prozess war praktisch, iterativ und überprüfbar.
- 01
Verstehen
Bestehende Website, Kundenwünsche, Produkte und technische Unterlagen auswerten.
- 02
Ordnen
Leistungen, Modelle, Beratung, Referenzen und technische Daten in ein verständliches System bringen.
- 03
Bauen
Shopify-Theme, Komponenten, Content, Formulare und den eigenständigen 3D-Konfigurator entwickeln.
- 04
Prüfen
Regeln, Geometrie, Mobilansicht, SEO, Performance, Accessibility und reale Nutzerpfade testen.
Warum dieses Projekt wichtig ist
Kreativität ist nur dann wertvoll, wenn sie ein echtes Problem löst.
Dieses Projekt zeigt Strategie, Design, Content, Shopify, 3D-Entwicklung, technische Logik und Qualitätssicherung in einem zusammenhängenden System.
Business website / digital product