Gleiche Funktion, gleiche fünf Schritte, gleiche Live-Vorschau — vier sehr unterschiedliche Haltungen dazu, wie sich das Gestalten anfühlen soll. Von kinolike-produktverliebt bis Designer-Tool.
Statische Design-Studien · echte Produkt-Komposition · zum Vergleichen gedacht
Teil A
Inline-Layouts
Der Konfigurator lebt direkt auf der Seite — sofort sichtbar und bedienbar. Vier Haltungen zum gleichen Ablauf.
1
Spotlight
Das Produkt ist der Star. Vollflächige, kinoreife Szene; die Steuerung schwebt als Glas-Dock darüber. Maximaler „Wow“-Moment, minimale UI.
Eingewebt als Jacquard, Ton in Ton. Wählen Sie die Basis-Farbe Ihres Handtuchs.
Veredelung
Eingewebt (Jacquard)
Farbe
Format
50 × 100 cm
3
Studio Pro
Wie ein echtes Design-Werkzeug. Dunkle Bühne mit Spotlight, Werkzeugleiste links, Inspector rechts. Für Profis, die Kontrolle wollen — Figma-Energie.
Dark ModeToolbar + InspectorSpotlit CanvasPower-User
⤒
▦
◐
⤢
#
Jacquard-Handtuch· 50×100 cm● bereit für Anfrage
100% · Live-Vorschau
Inspector
Farbe
Basis-Farbe (Jacquard, Ton in Ton)
Pantone
280 C2728 C+
Menge
−150+
4
Playful
Konversationell und warm. Eine große Frage pro Schritt, übergroße Swatches, runde Formen, verspielte Tiefe. Niedrige Schwelle, hoher Spaß — Typeform-Gefühl.
Eine Frage pro SchrittXL-SwatchesWarme VerläufeConsumer-friendly
Vorschau ✨
Sieht gut aus! 🔥
Schritt 3 von 5
Welche Farbe?
Ton-in-Ton eingewebt — wähl die Basis deines Handtuchs.
Weiß
Klassisch
Koralle
Beliebt
Navy
Edel
Salbei
Soft
Sonne
Warm
Pantone
Custom
Teil B
Overlay-Takeover
Auf der Konfigurator-Seite steht ein CTA. Klick — und der Ablauf übernimmt den Bildschirm. Vier Arten, wie das Overlay aufgeht.
5
Full Takeover
Klick auf „Konfigurator starten" — und der Flow füllt den ganzen Bildschirm, randlos. Keine Seite mehr im Blick, keine Ablenkung. Eigene Top-Leiste mit Schritt-Pills und Schließen.
Randlos · 100% ViewportStep-Pills obenFokus-ModusExpand aus dem CTA
gaavoo
✓ Logo✓ Produkt3 · Farbe4 · Größe5 · Menge
✕
✓ Logo hochladen mein-logo.svg
✓ Produkt Jacquard-Handtuch
3 Farbe wählen
4 Größe
5 Menge
Auslöser„Konfigurator starten" → CTA dehnt sich zum Vollbild · Schließen oben rechts
6
Spotlight Modal
Klassisch und premium. Die Seite bleibt sichtbar, wird abgedunkelt und unscharf — der Konfigurator erscheint als großes, zentriertes Dialogfenster. Kontext bleibt, Fokus liegt auf dem Flow.
Laden Sie Ihr Logo hoch und sehen Sie es live auf dem Produkt.
Konfigurator starten →
✕
✓ Logo mein-logo.svg
✓ Produkt Handtuch
3 Farbe wählen
4 Größe
5 Menge
Auslöser„Konfigurator starten" → Dialog zentriert, Seite abgedunkelt
7
Slide-over Sheet
Wie ein Warenkorb. Der Konfigurator fährt als hohe Lade von rechts herein, die Seite bleibt links sichtbar. Preview oben, Schritte darunter — ideal, wenn man den Seitenkontext behalten will.
Slide-in von rechtsPreview oben gestapeltSeitenkontext bleibtWarenkorb-Muster
Laden Sie Ihr Logo hoch und sehen Sie es live auf dem Produkt.
Konfigurator starten →
Konfigurator
✕
✓ Logo hochladen mein-logo.svg
✓ Produkt Jacquard-Handtuch
3 Farbe wählen
4 Größe
5 Menge
Auslöser„Konfigurator starten" → Lade fährt von rechts ein
8
Bottom Sheet
Mobil-nativ, funktioniert aber überall. Eine große Lade steigt von unten auf, mit Greif-Indikator und abgerundeter Kante. Die Seite lugt oben hervor — man spürt, man kann jederzeit zurück.
Aufsteigen von untenGrab-HandleMobile-firstSeite lugt hervor
Auslöser„Konfigurator starten" → Sheet steigt von unten auf
Vier Haltungen, ein Produkt. Spotlight verkauft Emotion, Atelier verkauft Wertigkeit,
Studio Pro verkauft Kontrolle, Playful verkauft Leichtigkeit.
Sag mir, welche Richtung dich packt — dann baue ich sie voll funktionsfähig aus (oder mische zwei).