e# Design-Konzept: Modernisierung SingleChat ## Zielbild SingleChat soll moderner, ruhiger und effizienter wirken, ohne seinen funktionalen Charakter zu verlieren. Die Oberfläche bleibt kompakt und schnell erfassbar, bekommt aber: - eine konsistentere Farbwelt - dezentere Rundungen - klarere Hierarchien - bessere mobile Nutzbarkeit - mehr optische Ruhe bei gleicher Informationsdichte Das Ziel ist keine komplette Neugestaltung, sondern ein kontrolliertes Redesign mit klarer Wiedererkennbarkeit. ## Beobachtungen im aktuellen UI - Das Hauptgrün ist sehr dominant und wird auf vielen Flächen vollflächig eingesetzt. - Navigation, Userliste und Chat konkurrieren visuell stark miteinander. - Abstände und Höhen sind teilweise grob, dadurch wirkt die Oberfläche weniger präzise und nicht platzsparend. - Farben codieren Geschlechter stark, aber ohne neutrales Basissystem um diese Akzentfarben herum. - Mobile Nutzung ist nur eingeschränkt vorbereitet, weil die Desktop-Struktur sehr starr ist. ## Design-Prinzipien - Kompakt vor luftig: wenig vertikale Höhe verschwenden. - Neutraler Grundaufbau, Akzentfarbe nur gezielt einsetzen. - Rundungen ja, aber klein bis mittel: modern, nicht verspielt. - Hohe Kontraste für Lesbarkeit, aber weichere Flächenkontraste. - Eine saubere visuelle Hierarchie: App-Rahmen, Navigation, Liste, Chat, Eingabe. - Responsive first ab Tablet abwärts, ohne Desktop-Stärke zu verlieren. ## Visuelle Richtung ### Grundcharakter Die App soll wie ein modernes, nüchternes Messaging-Tool wirken: - heller, neutraler Grundton - gedämpftes Grün als Markenfarbe - weiche Grauabstufungen für Flächen und Grenzen - gezielte Statusfarben statt bunter Dauerflächen ### Farbstrategie Die bisherige grüne Identität bleibt erhalten, wird aber deutlich verfeinert. #### Primärpalette - `Primary 700`: `#245c3a` - `Primary 600`: `#2f6f46` - `Primary 500`: `#3d8654` - `Primary 100`: `#e7f1ea` #### Neutrale Flächen - `Bg App`: `#f4f6f5` - `Bg Panel`: `#ffffff` - `Bg Subtle`: `#eef2ef` - `Border`: `#d7dfd9` - `Text Strong`: `#18201b` - `Text Muted`: `#5f6b63` #### Status-/Akzentfarben Diese Farben nur als Marker, Badge oder kleine Flächen einsetzen, nicht mehr als große Vollflächen: - Info/aktiv: `#3f7cac` - Erfolg: `#3d8654` - Warnung: `#c78a2c` - Fehler: `#c55252` #### Geschlechterkennzeichnung Die Geschlechterfarben sollten erhalten bleiben, aber stark abgeschwächt werden: - nicht als Vollton-Hintergrund der kompletten User-Zeile - stattdessen als linke Farbleiste, Punktindikator oder Badge - Text bleibt auf neutralem Hintergrund Dadurch bleibt die Kodierung sichtbar, ohne die Lesbarkeit und Ruhe zu stören. ## Formensprache ### Rundungen - Panels: `10px` - Inputs/Buttons: `8px` - Kleine Tags/Badges: `999px` - Message-Bubbles: `10px` Damit wirkt die App zeitgemäß, bleibt aber sachlich. ### Schatten und Linien - Statt starker Schatten: feine Konturen - Schatten nur für Layer-Wechsel, z. B. mobiles Panel oder Bild-Modal - Standardgrenze: `1px solid #d7dfd9` ## Typografie Die vorhandene `Noto Sans`-Basis ist sinnvoll, vor allem wegen der Sprachabdeckung. Sie sollte beibehalten werden. Empfohlene Hierarchie: - App-Titel: `20px / 600` - Bereichstitel: `16px / 600` - Standardtext: `14px / 400` - Meta-Text: `12px / 500` - Buttons/Navigation: `13px / 600` Wichtig: - geringere Zeilenhöhen in Steuerbereichen - mehr Gewichtsunterschied statt mehr Schriftgröße ## Layout-Konzept ### Desktop Empfohlene Struktur: - obere App-Bar mit Branding und Status - darunter kompakte Aktionsleiste - links Userliste - rechts Hauptbereich mit Chat/Header/Input #### Größen - Header: `48px` - Aktionsleiste: `40px` - Userliste: `260px` Standardbreite - Chat-Header: `52px` - Eingabebereich: `56px` bis `64px` Die vertikale Verdichtung ist wichtig, damit mehr Chat-Inhalt sichtbar bleibt. ### Tablet - Userliste auf `220px` reduzieren - Menüeinträge enger setzen - Meta-Informationen im Chat-Header stärker verdichten ### Mobile Die App sollte auf kleineren Breiten nicht dreispaltig bleiben. Stattdessen: - Userliste als einblendbares Off-Canvas-Panel - Hauptnavigation horizontal scrollbar oder als Icon/Text-Leiste - Chatbereich füllt die Breite vollständig - Chat-Header mit Nutzername in einer Zeile, Meta in zweiter kleiner Zeile - Eingabebereich sticky am unteren Rand ## Komponenten-Konzept ### 1. Header Aktuell sehr schlicht. Neu: - weißes oder leicht getöntes Panel - kleineres, präziseres Branding - optional rechts Session-/Statusinformationen - klare Unterkante mit feiner Border statt harter Farbfläche ### 2. Menüleiste Ziel: - weniger laut - kompakter - besser scannbar Empfehlung: - Buttons als sekundäre Tabs oder Segment-Buttons - aktiver Punkt über Hintergrundtönung statt kräftiger Vollfarbe - Ungelesen-Zähler als Badge - Timeout und aktiver Chat als Meta-Info statt als dominante Blöcke ### 3. Userliste Ziel: - dichter, moderner, besser filterbar wirkend Empfehlung: - Zeilenhöhe ca. `36px` bis `40px` - Flagge kleiner und sauber ausgerichtet - Username links, Alter/Geschlecht als Meta rechts oder in zweiter reduzierter Textspur - Geschlecht über Badge/Farbmarker statt komplette Hintergrundfarbe - Hover nur leicht getönt - aktive Auswahl klar, aber nicht grell ### 4. Chat-Header Aktuell stark farbig nach Geschlecht. Neu: - neutraler Header mit kleinem Farbakzent - Name prominent, Meta-Infos sekundär - optional Statuspunkt oder Marker links Beispiel: - linke 4px-Akzentleiste nach Geschlecht - weißer Hintergrund - Name dunkel - Alter/Land in `Text Muted` ### 5. Nachrichtenbereich Ziel: - besser lesbare Nachrichten - klarere Trennung zwischen eigener und fremder Nachricht - trotzdem kompakt Empfehlung: - Nachrichten als Bubble mit leichter Tönung - eigene Nachrichten leicht grünlich-neutral - fremde Nachrichten weiß - Username klein, aber klar erkennbar - Timestamp nur per Hover oder sehr subtil - weniger Rahmen, mehr Fläche und Abstandssystem ### 6. Eingabebereich Ziel: - platzsparend - mobil belastbar - moderne Interaktion Empfehlung: - Eingabefeld als primäre Fläche - Senden-Button kompakt - Smiley/Bild als Icon-Buttons mit identischer Größe - obere Border statt massiver grauer Box - Smiley-Leiste als kleines Popover statt großer Block ### 7. Login-Bereich Ziel: - freundlicher erster Eindruck - kompakteres Formular Empfehlung: - Formular in Card-Layout - zweispaltig auf breiteren Screens, einspaltig mobil - Labels kleiner, Felder konsistent hoch - Willkommenstext visuell vom Formular getrennt ### 8. Tabellen und Systemmeldungen Empfehlung: - Systemmeldungen mit getönter Fläche und weicher Border - Befehlstabellen mit sticky Header beibehalten - Tabellen kompakter paddings, aber bessere Zeilentrennung ## Spacing-System Ein festes Raster reduziert visuelle Unruhe. Empfehlung: - `4px` - `8px` - `12px` - `16px` - `24px` Regel: - Innenabstände in Controls meist `8px` oder `12px` - Bereichsabstände meist `12px` oder `16px` - keine beliebigen Einzelwerte mehr ## Responsive-Regeln ### Breakpoints - `>= 1200px`: voller Desktop - `< 1200px`: kompakter Desktop/Tablet - `< 900px`: Userliste schmaler, Navigation enger - `< 720px`: Userliste als Overlay/Drawer - `< 560px`: Aktionsleiste stark verdichten, nur wichtigste Texte sichtbar ### Mobile Prioritäten - aktive Konversation hat Vorrang vor Nebenspalten - Bedienelemente müssen einhändig erreichbar bleiben - keine horizontalen Layoutbrüche - Chatinput immer sichtbar ## Interaktionsdetails - Hover-Effekte sehr leicht halten - Fokus-Zustände klar sichtbar, farblich aus Primärpalette - Animationen kurz und funktional, z. B. `120ms` bis `180ms` - Keine permanente Pulsen-Animation für Inbox mehr; Badge oder sanfter Highlight-Zustand reicht meist aus ## Technische Empfehlung für die Umsetzung ### Design Tokens in `client/src/style.css` Zuerst zentrale CSS-Variablen definieren: - Farben - Radius - Shadow - Border - Spacing - Höhen wichtiger UI-Bausteine Beispielhafte Token-Gruppen: - `--color-bg-app` - `--color-bg-panel` - `--color-border` - `--color-primary` - `--radius-md` - `--space-2` - `--header-height` ### Danach komponentenweise umbauen Sinnvolle Reihenfolge: 1. globale Tokens und App-Hintergrund 2. Header und Menüleiste 3. Userliste 4. Chat-Header und Nachrichten 5. Eingabebereich 6. Login und Nebenansichten 7. Responsive Verhalten ## Nicht-Ziele - kein komplettes Rebranding - keine starke Glasoptik - keine großen Rundungen - keine farblich überladene Gender-Codierung - keine luftige SaaS-Optik mit verschwendetem Platz ## Ergebnisbild in einem Satz SingleChat soll nach der Überarbeitung wie ein kompaktes, modernes Chat-Tool wirken: ruhig, klar strukturiert, responsiv, markentreu grün und deutlich hochwertiger, ohne unnötig anders auszusehen.