Design / Layout

Hat der Gast einen Zeitraum für die Buchung ausgewählt, erscheint das Angebot in der Booking Engine. Hier werden Zimmerinformationen, Bilder und Buchungsdetails angezeigt. Das Erscheinungsbild kann in den Space-Einstellungen der Booking Engine individuell angepasst werden. Dies geschieht durch die Zimmerbeschreibung mit Bildern → Siehe Korrespondenz-Änderungen, sowie durch die Farbeinstellungen in den jeweiligen Design-Token, welche im folgenden Abschnitt erklärt werden.

Hinweis

Allgemeiner Hinweis zur Auswirkung auf das Space‑Layout

• Die gewählten Farben bestimmen Sichtbarkeit, Kontrast, Hervorhebung von Aktionen (CTAs), Lesbarkeit von Texten und die Wahrnehmung von Flächen (Hintergrund vs. Karten).
• Achte auf ausreichenden Kontrast (Lesbarkeit, Barrierefreiheit) und teste Hover/Disabled‑Zustände in relevanten Komponenten.

Design‑Token

Die Design-Token bestimmen das Erscheinungsbild der Booking Engine. Sie sind nach Bereichen gruppiert und legen fest, welche Farb- und Stilwerte die Buchungsseite (Space) verwendet. Zu jedem Token findest Du eine kurze Erklärung, welche UI-Elemente und Zustände (z. B. Standard, Hover, deaktiviert) dadurch beeinflusst werden.

1. background — Hintergrund
   • Legt die Grundfläche der Buchungsseite fest (Hintergrundfarbe des gesamten Space). Beeinflusst Gesamthelligkeit, Kontrast zu Karten und Eingabefeldern.

Beispiel (rosa):

2. foreground — Vordergrund
   • primary foreground / foreground / foreground-muted / foreground-highlighted
   • Steuert Haupttextfarbe, sekundäre (muted) Texte und hervorgehobene Texte. Bestimmt Lesbarkeit und Informationshierarchie (z. B. Überschriften vs. Beschreibungen).

Beispiel (grün/rot):

3. card — Karte
   • card / card-foreground / card-foreground-muted / card-foreground-highlighted
   • Definiert Hintergrund und Textfarbe von Karten/Boxen (z. B. Angebots- oder Reservierungs‑Fenster). Beeinflusst visuelle Trennung von Content‑Bereichen.

Beispiel (card-foreground pink):

4. border — Rahmen
   • border / border-highlighted
   • Legt Farbe von Trennlinien und Rahmen fest (z. B. Kartenränder, Input‑Borders, Grid‑Trennlinien). Highlighted wird für aktive oder fokussierte Rahmen genutzt.

Beispiel:

5. input — Eingabe
   • input-icon
   • Bestimmt Farben für Eingabefelder (Symbolik/Icons in Inputs). Wirkt auf Sichtbarkeit von Eingabe‑Icons und ggf. Platzhalter/Label.

6. overlay — Overlay
   • overlay
   • Farbe/Deckkraft des Overlays (z. B. Modal‑Backdrop). Steuert, wie stark der Hintergrund abgedunkelt wird und wie stark der Fokus auf dem Modal liegt.

7. muted — Abgeschwächt
   • muted
   • Für dezente Informationen und deaktivierte Zustände (z. B. inaktive Buttons, Platzhaltertexte). Reduziert visuelle Priorität.

8. primary — Primär
   • primary / primary-foreground / primary-foreground-muted / primary-hover / primary-foreground-hover
   • Hauptmarkenfarbe für Call‑to‑Action‑Elemente, primäre Buttons, Links und aktive Status. Foreground‑Varianten regeln Textfarbe auf primärer Fläche; Hover steuert Interaktionsfeedback.

9. destructive — Fehler / destruktiv
   • destructive / destructive-foreground / destructive-foreground-muted / destructive-hover / destructive-foreground-hover
   • Farbe für Fehler- und Warnzustände sowie destruktive Aktionen (z. B. Lösch‑Buttons, Validierungsfehler). Foreground‑Varianten für Text/Icons auf der destruktiven Fläche; Hover für Interaktion.

10. calendar — Kalender
    • calendar-foreground / calendar-foreground-muted / calendar-muted / calendar-available / calendar-available-muted / calendar-highlighted / calendar-highlighted-muted
    • Steuert Darstellung der Kalenderelemente: Standardtext, deaktivierte Tage (muted), verfügbare Tage, hervorgehobene/ausgewählte Tage. Verwendet unterschiedliche Nuancen für Statuskennzeichnung (verfügbar, gebucht, ausgewählt).

Beispiel:

Empfehlungen zur praktischen Anwendung

• Primärfarbe: Verwende für CTA‑Buttons, aktiven Navigationseintrag und markierte Elemente. Sorge dafür, dass primary-foreground deutlich lesbar ist.
• Karten vs. Hintergrund: Wähle Kartenfarbe mit ausreichendem Kontrast zum Seitenhintergrund, damit Inhalte klar abgegrenzt sind.
• Rahmen & Fokus: border-highlighted für Focus/Active‑Zustand verwenden (Input‑Fokus, aktive Karte).
• Overlay: Deckkraft so wählen, dass Fokusobjekt lesbar bleibt und Hintergrund abgeschwächt wird.
• Muted‑Varianten: Für sekundäre Informationen, kleine Hilfstexte und disabled States einsetzen.
• Kalenderfarben: Eindeutige, semantische Zuordnung (z. B. grün = verfügbar, gelb = eingeschränkt, rot = nicht verfügbar) und konsistente Muted‑Varianten für inaktive Tage.
• Fehlerfarben: Destructive‑Farbvarianten nur für Fehler/irreversible Aktionen nutzen, damit Warnungen sofort erkennbar sind.

Checkliste vor dem Rollout

• Kontrastprüfung (Text vs. Hintergrund) für alle Kombinationen (normal, hover, disabled).

Beispiel (Stornobedingungen kaum lesbar):

Vordergrund > foreground = gelb, Vordergrund > foreground-muted = lila:

• Test auf verschiedenen Bildschirmgrößen (Karten‑Kontrast bleibt konsistent).
• Interaktive Zustände prüfen (hover, focus, active, disabled).
• Kalenderstatus mit echten Buchungsszenarien testen (farbliche Legende klar verständlich).

Im folgenden Beispiel findet sich z. B. eine Kombination aus Karte > card-foreground (pink) und Vordergrund > foreground-highlighted (türkis)

Beispiel:

Es empfiehlt sich, verschiedene Farbkombinationen zu testen, um eine passende Abstimmung auf die CI des Betriebs zu finden und somit das Layout der Booking Engine entsprechend für das Hotel anzupassen. Über Klick auf Zur Booking Engine kann jederzeit im Browser geprüft werden, wie die Ansicht für den Gast wirkt. Falls Änderungen nicht sofort sichtbar sind, kann die Seite im Browser mit STRG + F5 aktualisiert werden.