Grün/Weiß mit klassischem Messenger-Look
Chat-Design anpassen
Im letzten Schritt des Chat-Setups wählst du eine Design-Vorlage für deinen Chat. Die Vorlage bestimmt das grundlegende Aussehen der Nachrichten-Bubbles, Farben und das Layout.
Übersicht
Section titled “Übersicht”Das Chat-Modul bietet 6 Design-Vorlagen:
iMessage
Blau/Grau im Apple-Stil
Telegram
Blau mit Telegram-inspirierten Elementen
Minimal
Hell und reduziert
Dunkel
Dark Mode für Nachtnutzung
Eigenes Design
Alle Features selbst konfigurieren
Die 6 Vorlagen im Detail
Section titled “Die 6 Vorlagen im Detail”1. WhatsApp-Stil
Section titled “1. WhatsApp-Stil”| Eigenschaft | Wert |
|---|---|
| Fokus | Klassisches Messenger-Design |
| Hintergrund | Chat-Muster (#ECE5DD) |
| Eigene Bubble | Hellgrün (#DCF8C6) |
| Andere Bubble | Weiß (#FFFFFF) |
| Akzentfarbe | Grün (#25D366) |
| Eckenradius | 8px (leicht gerundet) |
Der WhatsApp-Stil ist der bekannteste Messenger-Look und eignet sich perfekt für:
- Persönliche Kommunikation
- Community-Apps
- Familien-Gruppen
- Allgemeine Messaging-Apps
Design-Merkmale:
- Typisches Hintergrund-Muster
- Grüne eigene Nachrichten
- Weiße Nachrichten anderer
- Zeitstempel am unteren Rand
- Häkchen für Status
2. iMessage-Stil
Section titled “2. iMessage-Stil”| Eigenschaft | Wert |
|---|---|
| Fokus | Apple-typisches Design |
| Hintergrund | Weiß (#FFFFFF) |
| Eigene Bubble | Blau (#007AFF) |
| Andere Bubble | Hellgrau (#E5E5EA) |
| Textfarbe eigene | Weiß |
| Eckenradius | 18px (stark gerundet) |
Der iMessage-Stil bietet den Apple-typischen Look und eignet sich für:
- Premium-Apps
- iOS-fokussierte Apps
- Elegante Designs
- Business-Kommunikation
Design-Merkmale:
- Stark gerundete Bubbles
- Blaue eigene Nachrichten
- Graue Nachrichten anderer
- Sauberer weißer Hintergrund
- Minimalistischer Look
3. Telegram-Stil
Section titled “3. Telegram-Stil”| Eigenschaft | Wert |
|---|---|
| Fokus | Modern und funktional |
| Hintergrund | Hellblau (#E6EBEE) |
| Eigene Bubble | Blau (#2AABEE) |
| Andere Bubble | Weiß (#FFFFFF) |
| Textfarbe eigene | Weiß |
| Eckenradius | 12px (mittel gerundet) |
Der Telegram-Stil ist modern und feature-reich und eignet sich für:
- Tech-affine Zielgruppen
- Internationale Apps
- Gruppen-Chats
- Cloud-basierte Messaging
Design-Merkmale:
- Leicht bläulicher Hintergrund
- Blaue eigene Nachrichten
- Weiße Nachrichten anderer
- Modernes, klares Design
- Gute Lesbarkeit
4. Minimal-Stil
Section titled “4. Minimal-Stil”| Eigenschaft | Wert |
|---|---|
| Fokus | Reduziertes, sauberes Design |
| Hintergrund | Weiß (#FFFFFF) |
| Eigene Bubble | Hellgrau (#F0F0F0) |
| Andere Bubble | Sehr hell (#FAFAFA) |
| Akzentfarbe | Schwarz (#000000) |
| Eckenradius | 16px (stark gerundet) |
Der Minimal-Stil ist reduziert und eignet sich für:
- Design-fokussierte Apps
- Premium-Plattformen
- Professionelle Kommunikation
- Einfache Benutzeroberflächen
Design-Merkmale:
- Viel Weißraum
- Dezente Farben
- Stark gerundete Ecken
- Fokus auf Inhalt
- Wenig visuelle Ablenkung
5. Dunkel-Stil (Dark Mode)
Section titled “5. Dunkel-Stil (Dark Mode)”| Eigenschaft | Wert |
|---|---|
| Fokus | Augenfreundliches Nachtdesign |
| Hintergrund | Dunkelgrau (#1E1E1E) |
| Eigene Bubble | Blau (#0088CC) |
| Andere Bubble | Dunkelgrau (#2D2D2D) |
| Textfarbe | Weiß/Hellgrau |
| Eckenradius | 12px (mittel gerundet) |
Der Dunkel-Stil ist augenfreundlich und eignet sich für:
- Nachtnutzung
- AMOLED-Displays (Stromsparen)
- Nutzer mit Lichtempfindlichkeit
- Moderne App-Designs
Design-Merkmale:
- Dunkler Hintergrund
- Kontrastreiche Bubbles
- Helle Textfarbe
- Reduzierte Helligkeit
- Angenehm für lange Sessions
6. Eigenes Design
Section titled “6. Eigenes Design”| Eigenschaft | Wert |
|---|---|
| Fokus | Vollständige Kontrolle |
| Hintergrund | Hellgrau (#F5F5F5) |
| Eigene Bubble | Lila (#6200EA) |
| Andere Bubble | Weiß (#FFFFFF) |
| Akzentfarbe | Lila (#6200EA) |
| Eckenradius | 12px (mittel gerundet) |
Das Eigene Design ist der Startpunkt für vollständig individuelle Chat-Designs:
- Du konfigurierst alles selbst
- Perfekt für einzigartige Marken
- Keine vordefinierten Einschränkungen
Was du anpassen kannst:
- Alle Farben (Hintergrund, Bubbles, Text)
- Eckenradien
- Abstände
- Schriftgrößen
- Status-Icons
- Und vieles mehr im Chat-Editor
So wählst du eine Vorlage
Section titled “So wählst du eine Vorlage”-
Vorlagen-Galerie ansehen
Im Design-Schritt siehst du alle 6 Vorlagen als Vorschau-Karten in einem Raster.
Jede Karte zeigt:
- Mini-Vorschau des Designs
- Name der Vorlage
- Ausgewählt-Status (Häkchen + blaue Umrandung)
-
Vorlage antippen
Tippe auf die Vorlage, die dir gefällt.
Die ausgewählte Vorlage wird mit:
- Blauer Umrandung
- Häkchen-Symbol
- Leichtem Schatten
hervorgehoben.
-
Fertig!
Nach der Auswahl wird die Vorlage als Startpunkt für dein Chat-Design gespeichert.
Du kannst alles später im Chat-Editor anpassen.
Empfehlungen nach App-Typ
Section titled “Empfehlungen nach App-Typ”Empfohlene Vorlage: WhatsApp
| Vorlage | Empfehlung |
|---|---|
| ✅ Beste Wahl | |
| iMessage | ⚪ Alternative |
| Telegram | ⚪ Alternative |
Der WhatsApp-Stil ist vertraut und intuitiv für persönliche Kommunikation.
Empfohlene Vorlage: iMessage oder Minimal
| Vorlage | Empfehlung |
|---|---|
| iMessage | ✅ Beste Wahl |
| Minimal | ✅ Alternative |
| ⚪ Möglich |
Der iMessage-Stil wirkt professionell und elegant.
Empfohlene Vorlage: Telegram
| Vorlage | Empfehlung |
|---|---|
| Telegram | ✅ Beste Wahl |
| Dunkel | ⚪ Alternative |
| Eigenes Design | ⚪ Für individuelle Designs |
Der Telegram-Stil spricht tech-affine Nutzer an.
Empfohlene Vorlage: Dunkel
| Vorlage | Empfehlung |
|---|---|
| Dunkel | ✅ Beste Wahl |
| Eigenes Design | ⚪ Für mehr Kontrolle |
Der Dunkel-Stil ist augenfreundlich und spart Akku auf AMOLED-Displays.
Vergleich der Vorlagen
Section titled “Vergleich der Vorlagen”| Merkmal | iMessage | Telegram | Minimal | Dunkel | Eigenes | |
|---|---|---|---|---|---|---|
| Eigene Bubble | Grün | Blau | Blau | Grau | Blau | Lila |
| Andere Bubble | Weiß | Grau | Weiß | Hellgrau | Dunkelgrau | Weiß |
| Hintergrund | Muster | Weiß | Hellblau | Weiß | Dunkel | Grau |
| Eckenradius | 8px | 18px | 12px | 16px | 12px | 12px |
| Stil | Vertraut | Elegant | Modern | Minimalistisch | Nacht | Flexibel |
Design später anpassen
Section titled “Design später anpassen”Nach der Einrichtung kannst du das Design jederzeit im Chat-Editor individuell anpassen:
Farben
Hintergrund, Bubbles, Text, Akzente
Bubbles
Eckenradius, Schatten, Abstände
Status-Icons
Häkchen-Farben, Position, Stil
Eingabe
Eingabefeld-Design, Senden-Button
Der Chat-Editor bietet:
- Live-Vorschau aller Änderungen
- Komplette Freiheit bei der Gestaltung
- Speichern & Wiederherstellen von Designs
Dark Mode Integration
Section titled “Dark Mode Integration”Der Chat kann automatisch zwischen hellem und dunklem Design wechseln:
Option 1: Systemeinstellung
Section titled “Option 1: Systemeinstellung”Das Chat-Design folgt der Systemeinstellung des Geräts:
- Gerät im Dark Mode → Chat im Dunkel-Stil
- Gerät im Light Mode → Chat im hellen Stil
Option 2: In-App Toggle
Section titled “Option 2: In-App Toggle”Nutzer können den Dark Mode direkt in der App umschalten:
- Unabhängig von Systemeinstellung
- Schneller Wechsel möglich
- Persönliche Präferenz
Option 3: Zeitgesteuert
Section titled “Option 3: Zeitgesteuert”Der Dark Mode aktiviert sich automatisch zu bestimmten Uhrzeiten:
- Abends: Dark Mode aktivieren
- Morgens: Light Mode aktivieren
- Anpassbare Zeiten
Nächste Schritte
Section titled “Nächste Schritte” Chat-Editor Passe das Design nach der Einrichtung an
Zurück zur Übersicht Chat-Modul Setup Übersicht