Kundenbindung — UI Design Bibliothek

Eingabe Textfelder & Inputs

Textfeld (einfach)

Firmenname, E-Mail, Telefon, Prämienname — alle Pflichtfelder

A — Classic Outline

Klarer Border, Fokus-Ring in Indigo

B — Filled / Tinted

Indigofarbener Hintergrund, verschwindet bei Fokus

Firmenname

E-Mail-Adresse

C — Floating Label

Label schwebt nach oben bei Fokus (klicken zum Testen)

Passwortfeld

Mit Toggle zum Anzeigen, optionalem Stärke-Indikator

A — Classic mit Augen-Toggle

Klick auf Auge zum Anzeigen

Mittelstark

B — Mit Stärke-Indikator

Farbiger Balken zeigt Passwort-Qualität

min. 6 Zeichen erforderlich

C — Filled mit Hinweis

Inline-Hinweis unter dem Feld

Auswahl Auswahlfelder & Picker

Branchen-Auswahl

Auswahl der Unternehmensbranche — aktuell Radio-Liste

☕Café

💪Fitness

✂️Beauty

🛍️Shop

🍕Lieferung

💊Apotheke

A — Icon-Karten-Grid

Klickbar, Mehrfachauswahl sichtbar

B — Dropdown / Select

Platzsparend, klassisch

Weitere Kategorien...

C — Segmented Control

Ideal für wenige Hauptkategorien

Kartenfarbe (Color Picker)

Hintergrundfarbe der Wallet-Treuekarte

Preset-Farben

A — Preset-Chips + Hex

Schnell & einfach für wenig-techische Nutzer

B — Nativer Farbwähler

Browser-eigenes Farbrad, volle Freiheit

Markenfarben

Nur Markenfarben erlaubt

C — Eingeschränkte Palette

Nur vordefinierte Unternehmensfarben

Label-Farbe

Textfarbe auf der Wallet-Karte — Kontrast wichtig

✓ Kontrast: 4.8:1 — gut

A — Zwei-Toggle + Kontrast-Check

Einfach, mit WCAG-Feedback

Automatisch empfohlen:

A

Weiß empfohlen
für dunkle Hintergründe

B — Auto-Empfehlung

System wählt automatisch basierend auf Kartenfarbe

Freie Farbwahl mit Vorschau

C — Freier Farbwähler

Volle Kontrolle für Fortgeschrittene

Stempel-Symbol (Icon-Auswahl)

Icon für die Apple Wallet Karte — Kategorien: Allgemein, Gastro, Sport

⭐

🏆

💎

🎁

✨

A — Tab + Icon-Grid

Kategorisiert, klickbar

⭐

☕

🍕

💪

✂️

B — Suchfeld + Grid

Filterbar nach Suchbegriff

⭐

Stern

🏆

Pokal

💎

Diamant

C — Große Kacheln mit Name

Klar beschriftet, auch für Mobile

Buttons Aktions-Elemente

Primär-Button (CTA)

"Jetzt kostenlos beantragen" — wichtigster Button auf der Seite

A — Solid Indigo (Normal + Loading)

Hover: dunkler + Schatten

B — Pill-Form auf dunklem BG

Moderner Look, Pfeil als Call-to-Action

C — Dark / Soft Varianten

Dark = edel, Soft = freundlich

Upload-Button

Für Logo- und Hintergrundbild-Upload

PNG, max. 2 MB

A — Inline-Button

Kompakt, klassisch

☁️

Logo hierher ziehen

oder klicken zum Auswählen

PNG transparent · max. 2 MB

B — Drag & Drop Zone

Große klickbare Fläche

🏢

logo_firma.png

124 KB

C — Nach Upload: Vorschau-Card

Mit Dateiname und Löschen-Button

Sekundär-Button / Link

"Bereits registriert? → Zum Login"

Bereits registriert?

A — Textlink

Minimal, kein Ablenkung vom CTA

B — Ghost-Button

Sichtbarer, aber sekundär

Bereits Mitglied? Login →

C — Info-Banner

Auffälliger, kaum zu übersehen

Navigation Seitenkopf, Steps, Trenner

Seitenkopf / Logo-Bereich

Oben auf der Seite — Branding

A — Weiß mit Border

Clean, klassisch, sticky

B — Indigo-Header

Markant, starkes Branding

C — Dunkel / Premium

Edel, für hochwertiges Branding

Formular-Sektions-Trenner

Trennung zwischen Unternehmen / Karten-Design / Zugangsdaten

✓

Unternehmen

2

Design

3

Zugang

A — Step-Indikator

Fortschritt sichtbar, Nutzer weiß wo er ist

Karten-Design

Zugangsdaten

B — Akzent-Heading Varianten

Linker Border oder Unterstrich

Karten-Design

Zugangsdaten

C — Punkt-Indikator

Subtil, modernes Look & Feel

Feedback Validierung, Meldungen, Hinweise

Validierungsmeldungen

Fehlermeldung bei falscher/fehlender Eingabe

⚠ Bitte gültige E-Mail-Adresse eingeben

A — Inline unter dem Feld

Rot-Border + Fehlermeldung

✕

Eingabe unvollständig

Bitte fülle alle Pflichtfelder aus.

B — Error-Toast oben

Gut sichtbar, nicht aufdringlich

Bitte prüfe folgende Felder:

→E-Mail fehlt

→Passwort zu kurz

→Branche nicht gewählt

C — Zusammenfassung oben

Alle Fehler auf einen Blick

Erfolgs-Toast / Bestätigung

Nach erfolgreichem Absenden des Formulars

✓

Dashboard beantragt!

Du erhältst in 24h eine E-Mail.

A — Grüner Toast

Klar & positiv

✓

Erfolgreich gesendet

Freischaltung innerhalb 24h.

B — Dunkler Toast

Modern, neutral, auf jedem BG sichtbar

🎉

Antrag eingegangen!

Wir melden uns in 24h per E-Mail

C — Inline-Bestätigung auf Seite

Formular wird ersetzt durch Danke-Screen

Ladeindikator

Während API-Request nach Formular-Absenden

A — Button-Spinner

Spinner erscheint im CTA-Button

Antrag wird übermittelt...

B — Fortschrittsbalken

Gibt Gefühl von Fortschritt

C — Skeleton Screen

Inhalt blinkt auf, weniger "Warte-Gefühl"

Tipp-Box / Hinweis-Text

z.B. "Wähle ein Bild das gut zur Kartenfarbe passt"

ℹ

Tipp: Wähle ein Bild das gut zur Kartenfarbe passt. Helle Bilder mit dunkler Karte.

A — Info-Card mit Border-Left

Klassisch, gut sichtbar

💡

Empfohlen: 750×288 px · PNG oder JPG · max. 5 MB

B — Gelbe Hinweis-Box

Für technische Empfehlungen

? Was macht ein gutes Hintergrundbild?

C — Tooltip-Trigger

Platzsparend, erscheint beim Hover/Klick

Karten-Preview Apple Wallet Live-Vorschau

Wallet-Karten-Vorschau

Echtzeit-Darstellung der Treuekarte — ändert sich live mit Eingaben

Mein Café

Treuekarte

Store Card

☕

·

Max Mustermann

3 von 10

A — Schwebende Karte

Gradient, Hover-Lift-Animation

Live-Vorschau

Mein Café

Treuekarte

⭐

·

Mitglied seit heute

Gratis Produkt

B — Dunkle Premium-Karte

Edel, mit Label "Live-Vorschau"

WALLET

Mein Café

☕

Max M. 2/10

C — Handy-Frame Mockup

Karte eingebettet in iPhone-Wallet-Darstellung

Logo-Vorschau

Hochgeladenes Logo auf der Karte — Zustand vor/nach Upload

Ihr Logo

A — Placeholder-Silhouette

Gestrichelt, zeigt wo das Logo erscheint

LOGO

logo_firma.png · 124 KB

B — Nach Upload: Logo + Dateiname

Bestätigung was hochgeladen wurde

LOGO