// REFERENZEN / NAKHLE

Nakhle

Relaunch mit 5-Schritte-Konfigurator für Lochbleche

INDUSTRIE · METALLVERARBEITUNG·Relaunch 2026·WEBENTWICKLUNG · KONFIGURATOR

// 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.

// 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.

Sechs tragende Pfeiler, auf denen das gesamte System steht – jeder mit einem klaren Zweck im Tagesgeschäft von Coaches und Studios.

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