// REFERENZEN / NAKHLE

Nakhle

Relaunch mit 5-Schritte-Konfigurator für Lochbleche

INDUSTRIE · METALLVERARBEITUNG·Relaunch 2026·WEBENTWICKLUNG · KONFIGURATOR

Startseite von nakhle.de mit Lochblech-Balkon im diagonal geschnittenen Hero und der Überschrift „In 5 Schritten zum Lochblech“

// HERAUSFORDERUNG

Das Problem dahinter.

Lochbleche sind ein Produkt mit unzähligen Variablen – Material, Dicke, Lochungsmotiv, Blechform, Kantung, Maße, RAL-Farbe. Anfragen kamen lange unstrukturiert per Telefon, Mail oder PDF rein; in der Auftragsannahme musste dann zurückgefragt werden, was alles fehlte oder fertigungstechnisch nicht funktionierte. Gleichzeitig spiegelte die alte Website das Handwerksbild, das Nakhle in zweiter Generation aufgebaut hat, nicht mehr wider. Es brauchte einen Relaunch – visuell auf Stand und so geführt, dass die wichtigsten Daten mit der ersten Anfrage komplett im Haus sind.

// IN BEWEGUNG

Ein Lochblech in fünf Schritten.

Material, Blechform, Lochung, Maße, Kontakt: Mit jedem Schritt wächst die Vorschau. Was in der Fertigung nicht geht, bietet der Konfigurator gar nicht erst an.

Vereinfachtes Mockup zur Veranschaulichung. Der echte Konfigurator sieht anders aus, siehe Screenshots unten.

// SCHRITT FÜR SCHRITT

So läuft der Konfigurator

Die fünf Schritte und die Übersicht vor dem Absenden. Rechts hält der Konfigurator die bisherige Auswahl fest, nicht fertigbare Kombinationen bietet er gar nicht erst an.

01
Material wählen
Filter nach Anwendungsfall, darunter die Materialien mit Dicken, Eigenschaften und Einsatzbereich.
02
Blechform festlegen
Glattes Blech oder Kantung als 3D-Ansicht, gefiltert nach Befestigungsart. Die Dicke wird direkt auf der Karte gewählt.
03
Lochung wählen
Über 70 Lochungsmotive, filterbar nach Lochform von Quadrat bis Motiv.
04
Maße und Farbe angeben
Maße, Kantungsstelle und RAL-Farbe je Position. Die Vorschau zeichnet das Blech mit Lochung, Kantenmaßen und Farbe.
05
Kontaktdaten eintragen
Name, E-Mail und Adresse für das unverbindliche Angebot, optional mit eigener Skizze als Datei.
06
Auswahl prüfen
Vor dem Absenden steht rechts die komplette Auswahl, jeder Schritt lässt sich von dort aus ändern.

// WAS DRIN STECKT

Funktionen, die tragen.

5-Schritte-Konfigurator von Material bis Kontakt – jeder Schritt für sich validiert
Material-Filter mit Chips und Material-Info-Modal
Lochungs-Galerie mit Lightbox-Vorschau für jedes Motiv
Material- und dickenabhängige Sperrung nicht produzierbarer Lochungen
Regel-Schicht für Kantungs-Varianten (einfach/doppelt, 1- bis 4-seitig)
Geführte Skizzen je Blechform – gegenüberliegende Seiten werden automatisch mitgekantet
Mehrere Positionen pro Auftrag mit eigener Lochung, eigenen Maßen, eigener Kantung
RAL-Farbwahl mit visueller Farbpalette
Datei-Upload für Skizzen und Pläne im Kontakt-Schritt
Live-Übersicht aller Positionen vor dem Absenden
Komplett neue Inhaltsarchitektur (Lochbleche, Blechtechnik, Service, Karriere, Über uns)
Eigene Bereiche für RAL-Farben, Referenzen, Branchen, Katalog-Downloads und Standort
Statische Auslieferung für schnelle Ladezeiten und gute Auffindbarkeit

// SYSTEM

Wie die Plattform aufgebaut ist.

5-Schritte-Konfigurator

Der Bestellprozess in fünf klar abgegrenzten Schritten: Material, Blechform, Lochung, Maße, Kontakt. Jeder Schritt validiert für sich, der Stepper zeigt den Fortschritt, Kunden können jederzeit zurückspringen ohne Eingaben zu verlieren. Pro Auftrag sind beliebig viele Positionen möglich – jede mit eigenen Maßen, eigener Kantung und sogar abweichender Lochung.

Regel-Engine für Fertigbarkeit

Hinter dem Konfigurator liegt eine Regel-Schicht, die abbildet, was in der Fertigung tatsächlich möglich ist: welche Lochungen je Material und Dicke produzierbar sind, welche Kantungs-Stellen je Blechform erlaubt sind, welche Maße im Rahmen liegen. Was nicht geht, taucht im UI gar nicht erst auf oder wird mit Erklärtext gesperrt – Anfragen kommen ohne fertigungstechnischen Konflikt im Haus an.

Geführte Maß-Eingabe

Im Maße-Schritt zeigt der Konfigurator je Blechform die passende Skizze – glattes Blech, einfache oder doppelte Kantung, ein- bis vierseitig – und bietet nur die wirklich möglichen Kantungs-Stellen an. Gegenüberliegende Seiten werden automatisch mitgekantet, Pflichteingaben sind klar markiert, der Weiter-Button bleibt deaktiviert, solange etwas fehlt.

Live-Vorschau & Übersicht

Während der Konfiguration sehen Kunden ihr Blech als Vorschau – mit Lochungsmuster, Kantungen und Farbe. Vor dem Absenden listet eine Übersichtstabelle alle Positionen samt Material, Lochung, Maßen und Kantungs-Stellen, sodass nichts versehentlich falsch durchgereicht wird.

Inhalts-Architektur

Lochbleche, Blechtechnik, Service, Über uns und Karriere – jede Sektion mit eigener Hierarchie, Produktseiten, Referenzen und Branchen-Beispielen. RAL-Farben, Katalog-Downloads, Standort und Kontaktwege sind klar verortet, der Konfigurator führt aus jedem relevanten Punkt direkt in den Bestellweg.

Pixelgenaue Umsetzung

Das Screendesign kam von der Designerin und wurde in eine wiederverwendbare Komponentenbibliothek übersetzt: diagonal geschnittene Bänder, Farbpalette, Typografie und Bildsprache ziehen sich konsistent durch alle Seiten und Konfigurator-Schritte, vom Hero bis zum Footer.

// MEINE LEISTUNG

Wofür ich verantwortlich war.

Webentwicklung

Frontend und statische Auslieferung der gesamten Website, modular geschnittene Schritt-Komponenten, eigene Regel-Schichten für Kantungen und Lochungen, sauber getrennter Zustand für den Konfigurator. So sind neue Materialien, Lochungen oder zusätzliche Schritte später ohne Umbau ergänzbar.

Konfigurator-Entwicklung

Konzeption, Regelwerk und Umsetzung des 5-Schritte-Konfigurators inklusive Validierung, Fertigbarkeits-Regeln, Mehrfach-Positionen, Material- und Lochungs-Galerien, Datei-Upload und strukturierter Übergabe der Anfrage an den Vertrieb.

Umsetzung nach Screendesign

Das visuelle Konzept kam von der Designerin und wurde pixelgenau umgesetzt – inklusive der diagonal geschnittenen Bänder, der Farbpalette und der Bildsprache – und in Komponenten überführt, sodass es sich konsistent über die gesamte Website und den Konfigurator zieht.

// WEITERE PROJEKTE