Thomas FurlanettoCase Study · visueller Konfigurator
Ein interaktiver Selektor zum Vergleichen von Materialien, Farben und Oberflächen für den Boden eines Messestands.
Die Wahl des Standbodens erforderte Muster und verteilte Informationen. Teppich, PVC und Laminat unterscheiden sich in Farbe, Oberfläche und Eigenschaften. Ohne geordnete Ansicht brauchten Vergleich und eindeutige Kommunikation mehrere Schritte.
Ich habe die Materialien in einen visuellen Konfigurator auf walcher.bz überführt. Nutzer wählen die Familie, suchen ein Produkt, vergleichen Muster und sehen Farbe, Name, Code und Eigenschaften direkt. Das aktuelle PDF bleibt im selben Ablauf erreichbar.
Ich habe den Konfigurator persönlich konzipiert und entwickelt: Inhaltsstruktur, UX/UI, HTML und CSS, JavaScript-Logik, DOM-Manipulation, Materialdarstellung, Lightbox und zweisprachige PDF-Erstellung.
Ein geordneter Weg von der Materialsuche bis zur Auswahl. Kunden und Projektleiter vergleichen Optionen in einer Umgebung mit konsistenten technischen Angaben, ohne zwischen getrennten Seiten und Dokumenten zu wechseln.
Teppich, PVC und Laminat sind klar getrennt und folgen derselben Bedienlogik.
Die Suche filtert Materialien während der Eingabe nach Name oder Code.
Swatches, Farben und Oberflächen machen Varianten direkt vergleichbar.
Die Auswahl aktualisiert die Bodenansicht im Kontext des Messestands.
Code, Name, Spezifikationen und vergrößertes Muster bleiben in derselben Ansicht.
DE/IT-Dokumentation wird aus denselben Materialien des Selektors erzeugt oder aktualisiert.
03 · Workflow
Teppich, PVC oder Laminat
Name, Code oder Variante
Farbe und Oberfläche
Daten und Vorschau
Übersicht zum Teilen
04 · Data → preview
Jeder Eintrag folgt demselben Modell: Kategorie, Code, Name, Muster, Bild, Spezifikationen und Übersetzungen. Dadurch lassen sich neue Materialien hinzufügen, ohne die Oberfläche manuell neu aufzubauen.
05 · Logic & architecture
Die JavaScript-Logik trennt Daten, Zustand und Darstellung. Interaktionsereignisse aktualisieren Filter, gewähltes Muster, Details, Vorschau und PDF ohne Neuladen. Das DOM entsteht aus der Materialstruktur, damit neue Produkte und Varianten demselben Ablauf folgen.
Kategorien, Materialien, Varianten und Übersetzungen verwenden ein gemeinsames wiederverwendbares Schema.
JavaScript speichert Kategorie, Suche und aktives Muster und synchronisiert alle Komponenten.
Swatches, Karten und Details werden aus Daten erzeugt statt im Markup dupliziert.
Dieselbe Quelle versorgt Oberfläche, technische Angaben und zweisprachige PDF-Dokumentation.
06 · Stack
HTML5- und CSS3-Frontend, JavaScript ohne Framework, DOM-Manipulation, WebP-Bilder, Lightbox, mehrsprachige PDF-Erstellung und Integration in die WordPress-Plattform von Walcher.bz.
Walcher Messebau
Ein geordneter Weg von der Materialsuche bis zur Auswahl. Kunden und Projektleiter vergleichen Optionen in einer Umgebung mit konsistenten technischen Angaben, ohne zwischen getrennten Seiten und Dokumenten zu wechseln.