Zum Hauptinhalt springen

Design-Anpassung

Das Design des Chatbots kann umfassend an die Corporate Identity angepasst werden.

Übersicht​

Alle visuellen Elemente sind anpassbar:

  • Farben (Primär- und Sekundärfarben, Hintergründe, Text)
  • Layout (Positionierung, Grösse, Abstände)
  • Grafiken (Logo, Button-Icons, Bot-Avatar, Favicons)
  • Typografie (Schriftarten, -grössen, -gewichte)
  • Formen (Eckenradien, Rahmen)
  • Responsive Design (unterschiedliche Darstellung auf Desktop und Mobile)

Farben​

Markenfarben​

Die Hauptfarben des Chatbots können an die Marke angepasst werden:

  • Primärfarbe: Wird für den Header, Benutzer-Nachrichten und Hervorhebungen verwendet
  • Sekundärfarbe: Für unterstützende Elemente
  • Textfarben: Primäre und sekundäre Textfarben für optimale Lesbarkeit
  • Hintergrundfarben: Chat-Hintergrund und Nachrichtenblasen
  • Linkfarben: Normale und Hover-Zustände

Nachrichten-Bubbles​

Die Sprechblasen können individuell gestaltet werden:

  • Bot-Nachrichten: Hintergrundfarbe, Textfarbe, Rahmenfarbe und -stärke
  • Benutzer-Nachrichten: Eigene Farbgestaltung, typischerweise in Ihrer Primärfarbe
  • Abstände und Innenabstände: Für kompakte oder luftige Designs

Layout und Positionierung​

Chat-Fenster​

Das Chatfenster lässt sich flexibel anpassen:

  • Grösse: Breite und Höhe für Desktop und Mobile
  • Position: Rechts, links, oben oder unten auf der Seite
  • Eckenradien: Von rund bis rechteckig
  • Header-Höhe: Anpassbar an das Logo

FAB (Floating Action Button)​

Der runde Button auf der Webseite, der den Chat öffnet:

  • Icon: Kann durch eigenes SVG-Icon ersetzt werden
  • Grösse: Anpassbar für Desktop und Mobile separat
  • Position: Frei wählbar (standardmässig unten rechts)
  • Farben: Hintergrund und Icon-Farbe

Grafiken​

Das Firmenlogo wird im Header des Chat-Fensters angezeigt:

  • Format: Bevorzugt SVG für optimale Qualität, auch PNG möglich
  • Grösse und Position: Anpassbar an die Anforderungen
  • Responsive: Kann auf kleinen Bildschirmen anders dargestellt werden

Bot-Avatar​

Das Profilbild des Chatbots neben seinen Nachrichten:

  • Format: SVG oder PNG
  • Anpassbar: Komplett austauschbar durch eigenes Icon oder Maskottchen
  • Optional: Kann auch vollständig ausgeblendet werden
  • Grösse und Form: Rund, quadratisch oder individuell anpassbar

Favicons​

Komplettes Set an Icons für alle Geräte und Browser:

  • Apple Touch Icon (iPhone/iPad)
  • Standard Favicons (Browser-Tabs)
  • Web App Manifest Icons (Android/Progressive Web Apps)
  • Verschiedene Grössen für optimale Darstellung

Typografie​

Schriftarten​

Corporate Fonts können eingebunden werden:

  • Web-Fonts: Google Fonts, Adobe Fonts oder eigene Schriften
  • Schriftschnitte: Regular, Bold, Light etc.
  • Fallback-Schriften: Für optimale Kompatibilität

Text-Gestaltung​

  • Schriftgrössen: Für Überschriften, Fliesstext und kleine Texte
  • Zeilenhöhe: Für optimale Lesbarkeit
  • Schriftgewicht: Von dünn bis fett

Formen und Rahmen​

Eckenradien​

Die Eckenradien bestimmen den Charakter der Oberfläche:

  • Runde Bubbles: Für einen freundlichen, modernen Look
  • Quadratische Bubbles: Für einen sachlichen, professionellen Stil
  • Gemischt: Unterschiedliche Radien für verschiedene Ecken

Rahmen​

  • Bubble-Rahmen: Mit oder ohne sichtbaren Rand
  • Rahmenfarben: Passend zu Ihrem Design
  • Rahmenstärke: Von dünn bis prominent

Responsive Design​

Mobile vs. Desktop​

Der Chatbot passt sich automatisch an die Bildschirmgrösse an:

Mobile (Smartphone)

  • Kompaktere Darstellung
  • Optimierte Touch-Bedienung
  • Angepasste Schriftgrössen
  • Vollbildmodus möglich

Tablet

  • Mittlere Grösse
  • Optimiert für Touch und Maus

Desktop

  • Grösseres Fenster mit mehr Informationen
  • Kann Quellen und zusätzliche Infos anzeigen
  • Optimale Lesbarkeit auf grossen Bildschirmen

Für jede Bildschirmgrösse können unterschiedliche Designs definiert werden.

Weitere Anpassungen​

  • Hintergrundfarbe: Passend zu Ihrer Marke
  • Höhe: Anpassbar an Ihr Logo
  • Icons: Farbe der Menü- und Aktions-Icons
  • Logo-Position: Links, zentriert oder andere Platzierung

Menü​

  • Hintergrundfarbe: Für das Dropdown-Menü
  • Hover-Effekte: Farbe beim Überfahren mit der Maus
  • Rahmen und Schatten: Für Tiefe und Eleganz

Scrollbar​

  • Farbe: Anpassbar an Ihr Design
  • Stil: Modern oder klassisch

Buttons und Interaktionselemente​

  • Primäre Buttons: In Ihrer Markenfarbe
  • Hover-Zustände: Feedback bei Interaktion
  • Active-Zustände: Während des Klicks

Umsetzungsprozess​

  1. Design-Brief: Bereitstellung der Corporate Identity Guidelines (Farben, Schriften, Logos)
  2. Konzept: Erstellung eines Design-Konzepts für den Chatbot
  3. Review: Prüfung des Designs und Feedback
  4. Anpassung: Verfeinerung des Designs
  5. Umsetzung: Implementierung des finalen Designs
  6. Testing: Testen auf verschiedenen Geräten
  7. Launch: Veröffentlichung des Chatbots

Benötigte Grafiken​

Für die Design-Umsetzung werden folgende Assets benötigt:

  • Logo (bevorzugt als SVG, alternativ PNG mit transparentem Hintergrund)
  • Farben (Hex-Codes oder RGB-Werte der Markenfarben)
  • Schriften (Namen und Web-Font-Links, falls spezielle Fonts)
  • Optional: Bot-Avatar (eigenes Icon oder Maskottchen)
  • Optional: FAB-Icon (falls ein spezielles Icon gewünscht wird)