singlechat/DESIGN-KONZEPT.md

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.