Farben anpassen und Designs verwenden

Passen Sie die Farben Ihrer Anzeige an Ihre Markenidentität an

10 Min. LesezeitZuletzt aktualisiert: 1/15/2024189 found helpful

Farben anpassen und Designs verwenden

Die Farbanpassung ermöglicht es Ihnen, das Flight Display perfekt an Ihre Markenidentität anzupassen. Dieser Artikel erklärt, wie Sie Farben auswählen, Themes verwenden und eine konsistente visuelle Identität erstellen.

Das Farbsystem verstehen

Primärfarbe

Die Primärfarbe wird verwendet für:

  • Tab-Auswahl (Abflüge/Ankünfte)
  • Aktive Elemente
  • Buttons und Akzente
  • Header-Rahmen
  • Call-to-Action-Elemente
  • Beispiele:

  • #1E40AF (Ozeanblau)
  • #166534 (Waldgrün)
  • #6B21A8 (Königslila)
  • Sekundärfarbe

    Die Sekundärfarbe wird verwendet für:

  • Hover-Effekte
  • Sekundäre UI-Elemente
  • Hintergrund-Akzente
  • Schatten und Overlays
  • Inaktive Zustände
  • Empfehlung: Wählen Sie eine hellere Variante Ihrer Primärfarbe für beste Ergebnisse.

    Farben anpassen

    Schritt-für-Schritt-Anleitung

  • Navigieren Sie zum Branding-Portal
  • - Melden Sie sich im Hotel-Portal an

    - Klicken Sie auf "Branding" in der Navigation

    - Scrollen Sie zu "Markenfarben"

  • Primärfarbe auswählen
  • - Klicken Sie auf das Farbfeld "Primärfarbe"

    - Wählen Sie eine Farbe im Farbwähler ODER

    - Geben Sie einen Hex-Code ein (z.B. #1E40AF)

  • Sekundärfarbe auswählen
  • - Klicken Sie auf das Farbfeld "Sekundärfarbe"

    - Wählen Sie eine Farbe ODER

    - Geben Sie einen Hex-Code ein

  • Vorschau ansehen
  • - Die Vorschau-Boxen zeigen Ihre Farben

    - Überprüfen Sie den Kontrast

    - Testen Sie verschiedene Kombinationen

  • Farben speichern
  • - Klicken Sie auf "Farben speichern"

    - Änderungen werden sofort gespeichert

    - Display wird bei nächster Aktualisierung aktualisiert

    Den Farbwähler verwenden

    Methode 1: Visueller Farbwähler

    1. Klicken Sie auf das farbige Quadrat
    2. Bewegen Sie den Cursor im Farbspektrum
    3. Passen Sie Helligkeit/Sättigung an
    4. Farbe wird automatisch angewendet

    Methode 2: Hex-Code-Eingabe

    1. Klicken Sie auf das Textfeld
    2. Geben Sie einen 6-stelligen Hex-Code ein
    3. Format: #RRGGBB (z.B. #1E40AF)
    4. Drücken Sie Enter zum Anwenden

    Methode 3: RGB-Konverter

    Wenn Sie RGB-Werte haben (z.B. RGB 30, 64, 175):
    1. Verwenden Sie einen RGB-zu-Hex-Konverter
    2. Beispiel: https://www.rgbtohex.net/
    3. Konvertieren Sie RGB zu Hex
    4. Geben Sie den Hex-Code ein

    Vordefinierte Themes verwenden

    8 vordefinierte Themes

    Wir bieten 8 professionell gestaltete Themes:

    1. Ozeanblau (Standard)

  • Primär: #1E40AF
  • Sekundär: #3B82F6
  • Ideal für: Moderne, professionelle Hotels
  • 2. Waldgrün

  • Primär: #166534
  • Sekundär: #22C55E
  • Ideal für: Nachhaltige, naturorientierte Hotels
  • 3. Königslila

  • Primär: #6B21A8
  • Sekundär: #A855F7
  • Ideal für: Luxushotels, Premium-Marken
  • 4. Sonnenuntergang-Orange

  • Primär: #C2410C
  • Sekundär: #F97316
  • Ideal für: Energetische, warme Marken
  • 5. Rubinrot

  • Primär: #BE123C
  • Sekundär: #F43F5E
  • Ideal für: Mutige, auffällige Marken
  • 6. Mitternachtsblau

  • Primär: #1E3A8A
  • Sekundär: #3B82F6
  • Ideal für: Elegante, zurückhaltende Marken
  • 7. Smaragdgrün

  • Primär: #047857
  • Sekundär: #10B981
  • Ideal für: Frische, lebendige Marken
  • 8. Schiefergrau

  • Primär: #475569
  • Sekundär: #94A3B8
  • Ideal für: Minimalistische, moderne Hotels
  • Ein Theme auswählen

  • Öffnen Sie das Branding-Portal
  • - Navigieren Sie zu "Branding" → "Markenfarben"

  • Theme auswählen
  • - Klicken Sie auf einen Theme-Button

    - Farben werden automatisch angewendet

  • Anpassen (Optional)
  • - Passen Sie die Farben nach Bedarf an

    - Speichern Sie Ihre Änderungen

    Farbharmonie und Best Practices

    Kontrast prüfen

    Wichtig für Lesbarkeit:

  • Primärfarbe sollte mindestens 4.5:1 Kontrast zu Weiß haben
  • Text auf farbigen Hintergründen muss lesbar sein
  • Testen Sie mit dem WebAIM Contrast Checker
  • Online-Tools:

  • https://webaim.org/resources/contrastchecker/
  • https://contrast-ratio.com/
  • Chrome DevTools Accessibility Inspector
  • Farbpsychologie

    Blau (Ozeanblau, Mitternachtsblau):

  • Vertrauen, Professionalität, Ruhe
  • Ideal für Business-Hotels, Flughäfen
  • Grün (Waldgrün, Smaragd):

  • Natur, Wachstum, Nachhaltigkeit
  • Ideal für Öko-Hotels, Resorts
  • Lila (Königslila):

  • Luxus, Kreativität, Exklusivität
  • Ideal für 5-Sterne-Hotels, Boutique-Hotels
  • Orange (Sonnenuntergang-Orange):

  • Energie, Wärme, Begeisterung
  • Ideal für Budget-Hotels, Hostels
  • Rot (Rubinrot):

  • Aufmerksamkeit, Leidenschaft, Dringlichkeit
  • Sparsam verwenden, ideal für Akzente
  • Grau (Schiefergrau):

  • Neutralität, Eleganz, Modernität
  • Ideal für minimalistische Marken
  • Farbkombinationen

    Monochromatisch (Empfohlen):

    Primärfarbe: Dunklerer Ton (z.B. #1E40AF)
    Sekundärfarbe: Hellerer Ton (z.B. #3B82F6)
    Ergebnis: Harmonisch, professionell

    Komplementär (Fortgeschritten):

    Primärfarbe: Blau (#1E40AF)
    Sekundärfarbe: Orange (#F97316)
    Ergebnis: Hoher Kontrast, auffällig
    Warnung: Kann zu stark sein

    Analog (Harmonisch):

    Primärfarbe: Blau (#1E40AF)
    Sekundärfarbe: Grün (#166534)
    Ergebnis: Natürlich, beruhigend

    Farben testen

    Live-Vorschau

  • Vorschau öffnen
  • - Klicken Sie auf "Vorschau" im Portal

    - Sehen Sie Ihre Farben live auf dem Display

  • Auf verschiedenen Bildschirmen testen
  • - Desktop-Monitor

    - Tablet

    - 32" Android-Display

    - Smartphone (über QR-Code)

  • Lichtverhältnisse berücksichtigen
  • - Test bei hellem Licht (Lobby tagsüber)

    - Test bei schwachem Licht (Lobby abends)

    - Auf Reflexionen prüfen

    Fehlerbehebung

    Farben werden nicht gespeichert

    Problem: Änderungen gehen verloren

    Lösung:

  • Klicken Sie auf "Farben speichern" (nicht vergessen!)
  • Warten Sie auf "Farben erfolgreich gespeichert!"-Nachricht
  • Aktualisieren Sie die Seite und überprüfen Sie
  • Farben erscheinen nicht auf dem Display

    Problem: Display zeigt alte Farben

    Lösung:

  • Warten Sie 5 Minuten (Auto-Refresh)
  • Oder drücken Sie F5 auf dem Display
  • Oder leeren Sie den Browser-Cache
  • Farben sehen anders aus als erwartet

    Problem: Farben erscheinen unterschiedlich auf dem Display

    Mögliche Ursachen:

  • Display-Kalibrierung: Verschiedene Bildschirme zeigen Farben unterschiedlich
  • Umgebungslicht: Helle Lobby vs. dunkle Lobby
  • Browser-Rendering: Chrome kann Farben leicht anders darstellen
  • Lösung:

  • Testen Sie auf dem tatsächlichen Display-Gerät
  • Passen Sie Farben nach Bedarf an
  • Verwenden Sie standardisierte Farben (wie unsere Themes)
  • Häufig gestellte Fragen

    Kann ich mehr als 2 Farben verwenden?

    Nein, das System unterstützt Primär- und Sekundärfarbe. Diese werden intelligent im gesamten Display angewendet.

    Werden Farben auf allen Seiten gleich angewendet?

    Ja, Farben gelten für das gesamte Display (Abflüge, Ankünfte, Hotel-Info-Folien).

    Kann ich Farben zeitbasiert ändern (z.B. Nachtmodus)?

    Derzeit nicht automatisch. Sie können Farben manuell ändern, aber kein zeitbasiertes Wechseln.

    Welche Farben funktionieren am besten?

    Dunkle Primärfarbe (#1E40AF) mit heller Sekundärfarbe (#3B82F6) für besten Kontrast.

    Kann ich Farbverläufe verwenden?

    Nein, nur Volltonfarben werden unterstützt. Farbverläufe werden im System nicht unterstützt.

    Nächste Schritte

    Nach der Farbanpassung:

  • Logo hochladen - Vervollständigen Sie Ihr Branding
  • Display-Vorschau öffnen - Sehen Sie Ihre Farben live
  • Branding-Portal Übersicht - Weitere Optionen erkunden
  • Support

    Fragen zur Farbanpassung?

  • E-Mail: info@lobbyflight.com
  • Telefon: +43 650 753 1811
  • Live-Chat: Montag-Freitag, 9:00 - 18:00 Uhr
  • War dieser Artikel hilfreich?