Enhance UI and functionality across multiple components
- Updated styles in style.css to improve overall design consistency and introduced CSS variables for better theming. - Refined ChatWindow.vue with improved no-conversation styling and adjusted image borders for a cleaner look. - Enhanced HistoryView.vue and InboxView.vue with new panel styles for better user experience and readability. - Revamped LoginForm.vue to provide a more engaging user interface with a landing page layout and cookie-based profile persistence. - Improved MenuBar.vue and SearchView.vue with active state indicators and refined item displays for better navigation. - Added logout functionality in chat store and server routes to manage user sessions effectively. - Introduced a new mockup view route for design previews. These changes collectively enhance the user experience and visual appeal of the application.
This commit is contained in:
Torsten Schulz (local)
353
DESIGN-KONZEPT.md
Normal file
353
DESIGN-KONZEPT.md
Normal file
@@ -0,0 +1,353 @@
|
||||
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.
|
||||
Reference in New Issue
Block a user