Design-Vorlage wählen

Im fünften Schritt des Firebase Auth Setups wählst du eine Design-Vorlage für deine Login- und Registrierungs-Seiten. Du kannst aus 8 professionellen Vorlagen wählen.

Die 8 Design-Vorlagen

Modern Minimal

Eigenschaft	Wert
Stil	Sauber, luftig
Farbschema	Lila-Blau-Gradient
Zielgruppe	Moderne Apps, Startups

Sauberes, luftiges Design mit Lila-Blau-Gradient. Ideal für Apps, die einen modernen und frischen Look benötigen.

Merkmale:

Klare Linien und viel Weißraum
Sanfter Lila-Blau-Gradient im Hintergrund
Minimalistisches Formular-Design

Glassmorphismus

Eigenschaft	Wert
Stil	Mattglas-Effekt
Farbschema	Türkis-Cyan-Gradient
Zielgruppe	Trendige Apps, Design-fokussiert

Mattglas-Effekt mit Türkis-Cyan-Gradient. Ein moderner Design-Trend, der Tiefe und Eleganz vermittelt.

Merkmale:

Halbtransparenter “Frosted Glass”-Effekt
Türkis-Cyan-Farbverlauf
Weiche Schatten und Unschärfe-Effekte

Dark Mode Premium

Eigenschaft	Wert
Stil	Dunkel, elegant
Farbschema	Dunkle Töne mit Akzenten
Zielgruppe	Premium-Apps, Tech-fokussiert

Dunkles Theme mit Akzent-Rahmen. Professionell und augenschonend - perfekt für Apps im Dark Mode.

Merkmale:

Dunkler Hintergrund
Akzentfarben für Rahmen und Buttons
Hoher Kontrast für gute Lesbarkeit

Clean Corporate

Eigenschaft	Wert
Stil	Professionell, geschäftlich
Farbschema	Neutral, Whitespace
Zielgruppe	Business-Apps, B2B

Professionelles Whitespace-Design. Ideal für Unternehmens-Anwendungen und B2B-Apps.

Merkmale:

Klare, professionelle Optik
Viel Weißraum
Dezente Farben
Seriöser Eindruck

Gradient Hero

Eigenschaft	Wert
Stil	Mutig, auffällig
Farbschema	Kräftiger Gradient
Zielgruppe	Consumer-Apps, Marketing

Mutiger Gradient mit unterer Karte. Ein auffälliges Design, das Aufmerksamkeit erregt.

Merkmale:

Dominanter Gradient im oberen Bereich
Formular in weißer Karte am unteren Rand
Ideal für Logo-Platzierung im oberen Bereich

Split Screen

Eigenschaft	Wert
Stil	Asymmetrisch, modern
Farbschema	Lila Gradient
Zielgruppe	Kreative Apps, Portfolios

Asymmetrisches lila Gradient-Layout. Ein unkonventionelles Design, das aus der Masse heraussticht.

Merkmale:

Bildschirm in zwei Bereiche geteilt
Farbiger Bereich links, Formular rechts
Ideal für Branding und Bildmaterial

Soft Pastel

Eigenschaft	Wert
Stil	Freundlich, sanft
Farbschema	Pastellfarben
Zielgruppe	Lifestyle-Apps, Wellness

Freundliche, sanfte Farbpalette. Vermittelt Wärme und Zugänglichkeit.

Merkmale:

Weiche Pastelltöne
Einladende Atmosphäre
Ideal für Apps im Bereich Gesundheit, Wellness, Lifestyle

Bold & Bright

Eigenschaft	Wert
Stil	Energetisch, lebendig
Farbschema	Leuchtende Farben
Zielgruppe	Jugendliche Apps, Gaming

Hochenergetisches, lebendiges Design. Für Apps, die Energie und Spaß ausstrahlen sollen.

Merkmale:

Kräftige, leuchtende Farben
Dynamisches Design
Ideal für jüngere Zielgruppen

So wählst du eine Vorlage

Vorlagen durchstöbern

Scrolle durch die Galerie und sieh dir die Vorschau-Bilder an.

Jede Vorlage zeigt:
- Name der Vorlage
- Kurze Beschreibung
- Vorschau-Bild
Vorlage antippen

Tippe auf die Vorlage, die dir gefällt.

Ein Bestätigungs-Dialog erscheint:

“Vorlage anwenden?”

Möchtest du diese Vorlage auf alle Auth-Seiten (Login, Registrierung, Passwort zurücksetzen) anwenden? Deine aktuellen Designs werden überschrieben.
Bestätigen oder Abbrechen
- “Anwenden”: Die Vorlage wird auf alle Auth-Seiten angewendet
- “Abbrechen”: Zurück zur Auswahl
Fertig!

Nach der Bestätigung siehst du:

“Vorlage angewendet”

Design wurde auf Login, Registrierung & Passwort-Reset angewendet.

Was wird angewendet?

Die Vorlage wird auf alle drei Auth-Seiten angewendet:

Seite	Beschreibung
Login-Seite	Wo sich bestehende Nutzer anmelden
Registrierungs-Seite	Wo neue Nutzer ein Konto erstellen
Passwort-Reset-Seite	Wo Nutzer ihr Passwort zurücksetzen

Alle drei Seiten erhalten:

Das gleiche Hintergrund-Design (Farbe, Gradient, oder Bild)
Die gleichen Formular-Einstellungen (Eckenradius, Schatten, Abstände)
Die gleichen Farben (Button-Farben, Textfarben, Link-Farben)

Empfehlungen nach App-Typ

Empfohlene Vorlagen:

Clean Corporate - Professionell und seriös
Dark Mode Premium - Modern und elegant

Diese Vorlagen vermitteln Professionalität und Vertrauen.

Vorlage überspringen

Du kannst diesen Schritt auch überspringen:

Tippe auf “Überspringen” oder “Weiter” ohne Auswahl
Das Standard-Design wird verwendet
Du kannst das Design später im Auth Page Builder anpassen

Design später anpassen

Nach der Einrichtung kannst du das Design jederzeit im Auth Page Builder individuell anpassen:

Hintergrund

Farbe, Gradient oder eigenes Bild

Formular

Eckenradius, Schatten, Abstände

Farben

Button-, Text- und Link-Farben

Widgets

Eigene Elemente hinzufügen

Der Auth Page Builder bietet:

Komplette Freiheit bei der Gestaltung
Live-Vorschau aller Änderungen
Widget-System für individuelle Elemente
Drag & Drop zum Anordnen

Tipps

Nächste Schritte

Zusammenfassung Überprüfe alle Einstellungen und schließe das Setup ab

Auth Page Builder Passe Login und Registrierung individuell an