Refactor database configuration and enhance server settings: Update database connection logic to utilize environment variables and improve error handling in database connection. Adjust server port configuration to prioritize BACKEND_PORT. Update HTML structure for better compatibility and add missing elements in various components.
This commit is contained in:
Torsten Schulz (local)
224
docs/DESIGN-UND-BEDIENBARKEIT-KONZEPT.md
Normal file
224
docs/DESIGN-UND-BEDIENBARKEIT-KONZEPT.md
Normal file
@@ -0,0 +1,224 @@
|
||||
# Konzept: Modernisierung von Design und Bedienbarkeit
|
||||
|
||||
**Projekt:** Evangelische Miriamgemeinde Frankfurt (Vue.js-Webauftritt)
|
||||
**Stand:** April 2026
|
||||
**Ziel:** Zeitgemäße, klare Oberfläche mit hoher Vertrauenswürdigkeit; kirchlich-seriös, ohne „Startup-Optik“.
|
||||
|
||||
---
|
||||
|
||||
## 1. Zielbild und Leitlinien
|
||||
|
||||
### 1.1 Positionierung
|
||||
|
||||
Die Website ist **Informations- und Gemeinschaftsangebot** einer evangelischen Gemeinde. Sie soll:
|
||||
|
||||
- **verlässlich und ruhig** wirken (kein visuelles „Rauschen“),
|
||||
- **inhaltlich im Vordergrund** stehen (Typografie, Lesbarkeit, klare Hierarchie),
|
||||
- **digital souverän** wirken (gute Struktur, schnelle Orientierung, respektvolle Hilfen für alle Nutzergruppen).
|
||||
|
||||
### 1.2 Nicht verhandelbar: EKHN-Violett
|
||||
|
||||
Die **Grundfarbe EKHN-Violett** bleibt die primäre Markenfarbe. Im Code aktuell u. a. als `#9400ff` mit Hover `#7a00d1` genutzt (Navigation). Diese Farbe wird **nicht ersetzt oder „neu interpretiert“**.
|
||||
|
||||
- Sie wird als **CSS-Design-Token** zentral definiert (z. B. `--color-ekhn-violet`, `--color-ekhn-violet-hover`), damit alle Komponenten konsistent darauf zugreifen.
|
||||
- **Abstufungen** (heller für Hintergründe, transparenter für Overlays) sind **zulässig**, solange die wahrgenommene Marke **dieselbe Violett-Identität** bleibt.
|
||||
- Kontrast zu Text und Icons muss **WCAG-konform** sein (siehe Abschnitt 7).
|
||||
|
||||
### 1.3 Seriosität vs. Modernität
|
||||
|
||||
| Modern (gewünscht) | Vermeiden (für kirchlichen Kontext) |
|
||||
|--------------------|-------------------------------------|
|
||||
| Klares Raster, viel Weißraum | Neon-Verläufe, Spielereien |
|
||||
| Ruhige, lesbare Schrift | Display-Fonts, übertriebene Größen |
|
||||
| Deutliche Fokuszustände (Tastatur) | Aggressive Animationen |
|
||||
| Einheitliche Komponenten | Zufällige Abstände und Stile pro Seite |
|
||||
| Verständliche Navigation | „Experimentelle“ Menüs ohne klare Labels |
|
||||
|
||||
**Leitmotiv:** *Ruhige Sachlichkeit mit warmer, einladender Sprache in der UI (Beschriftungen, Fehlermeldungen, leere Zustände).*
|
||||
|
||||
---
|
||||
|
||||
## 2. Kurze Ist-Analyse (Ausgangslage)
|
||||
|
||||
Aus dem aktuellen Aufbau (u. a. `AppComponent.vue`, `NavbarComponent.vue`, `HeaderComponent.vue`, `FooterComponent.vue`):
|
||||
|
||||
- **Typografie:** durchgängig `Arial, sans-serif` – funktional, aber wenig Profil; keine skalierbare Typo-Skala.
|
||||
- **Layout:** starre `min-width: 1000px` in der Hauptspalte begünstigt horizontales Scrollen auf Tablets/kleineren Viewports; Zwei-Spalten-Logik mit Breakpoints ist vorhanden, sollte aber **inhaltlich und technisch** weiterentwickelt werden.
|
||||
- **Farben:** Violett in der Navigation; Footer dunkelblau (`#0b1735`); rechte Spalte hellblau (`#d9e2f3`); Header mit Schlagschatten in Lavendeltönen – teils **uneinheitlich** zur Markenfarbe.
|
||||
- **Navigation:** Hamburger/Menü-Button unter 768px; Dropdowns mit Hover – auf Touch-Geräten und für Tastaturnutzer ist hier **Verbesserungspotenzial** (Fokus, ARIA, Touch-Targets).
|
||||
- **Footer:** Login-Link in Grau auf dunklem Grund – **Kontrast** prüfen und ggf. anpassen (ohne Marke zu verändern).
|
||||
|
||||
Diese Punkte fließen als konkrete Maßnahmen in die Phasenplanung (Abschnitt 9) ein.
|
||||
|
||||
---
|
||||
|
||||
## 3. Design-System: Farben
|
||||
|
||||
### 3.1 Primär (unverändert)
|
||||
|
||||
| Token (Vorschlag) | Verwendung | Hex (Ist) |
|
||||
|-------------------|------------|-----------|
|
||||
| `--color-brand-primary` | Navigationsleiste, primäre Buttons, aktive Zustände | `#9400ff` |
|
||||
| `--color-brand-primary-hover` | Hover, aktive Menüpunkte | `#7a00d1` |
|
||||
|
||||
*Hinweis:* Falls das offizielle EKHN-Handbuch eine minimal abweichende Hex-Angabe vorsieht, **eine** kanonische Quelle festlegen und nur diese verwenden – weiterhin **kein** Wechsel zu einer anderen Farbfamilie.
|
||||
|
||||
### 3.2 Neutrale Flächen (ergänzend, nicht markenersetzend)
|
||||
|
||||
- **Hintergrund Seite:** `#ffffff` oder sehr helles Neutral (`#f8f9fb`), konsistent.
|
||||
- **Sekundärflächen** (Karten, rechte Spalte, Infoboxen): dezentes Grau oder ein **sehr zurückhaltendes Violett-Grau** (z. B. Mischung aus Weiß mit 3–6 % Primärfarbe), damit die Seite **ruhig** bleibt und nicht „bunt“ wirkt.
|
||||
- **Text:** nahezu schwarz für Fließtext (`#1a1a1a` bis `#222`), sekundäre Texte etwas heller – immer mit Kontrastprüfung.
|
||||
|
||||
### 3.3 Akzent (optional, sparsam)
|
||||
|
||||
- **Links** im Fließtext: z. B. unterstrichen oder klar farbig abgesetzt; Primärviolett oder eine **eine** abgestimmte dunklere Violett-Nuance für Lesbarkeit auf Weiß.
|
||||
- **Erfolg/Warnung/Fehler:** Standard-Semantik (Grün/Gelb/Rot) nur für Status – **nicht** als neue Hauptfarbe neben dem Violett.
|
||||
|
||||
### 3.4 Footer
|
||||
|
||||
- Dunkler Footer kann bleiben; **Links und Fokus** müssen gut lesbar sein. Primärviolett für Hover/Fokus auf dunklem Grund nur, wenn der Kontrast stimmt – sonch neutrale helle Linkfarbe + sichtbarer Fokusring.
|
||||
|
||||
---
|
||||
|
||||
## 4. Typografie
|
||||
|
||||
### 4.1 Schriftwahl
|
||||
|
||||
- **Primärschrift:** eine gut lesbare **System- oder Webschrift** mit neutral-seriösem Charakter, z. B.:
|
||||
- *Source Sans 3*, *Inter*, *Open Sans* oder **beibehaltene Arial** nach einheitlicher Skala – Entscheidung in Phase 1 an **Performance** und **Corporate-Vorgaben** binden.
|
||||
- **Überschriften:** dieselbe Familie mit klarer Gewichtsstaffelung (z. B. 600/700), keine verspielten Display-Schnitte.
|
||||
|
||||
### 4.2 Skala (Beispiel)
|
||||
|
||||
| Stufe | Verwendung | Größe (Orientierung, rem) |
|
||||
|-------|------------|---------------------------|
|
||||
| H1 | Seitentitel (nicht auf jeder Unterseite doppelt mit Logo-Text kollidieren) | `1.75–2rem` |
|
||||
| H2 | Abschnitte | `1.35–1.5rem` |
|
||||
| H3 | Unterabschnitte | `1.15–1.25rem` |
|
||||
| Body | Fließtext | `1rem`, Zeilenlänge max. ca. 65–75 Zeichen |
|
||||
| Klein | Meta, Fußnoten | `0.875rem` mit ausreichend Kontrast |
|
||||
|
||||
### 4.3 Regeln
|
||||
|
||||
- **Keine** reine Großschreibung für lange Menütexte.
|
||||
- **Zeilenabstand** für Fließtext mindestens ca. 1,5.
|
||||
- **Kontrast** von Überschriften und Text zu Hintergrund einhalten (WCAG 2.1 AA).
|
||||
|
||||
---
|
||||
|
||||
## 5. Layout und Raster
|
||||
|
||||
### 5.1 Container
|
||||
|
||||
- Maximalbreite für Lesbarkeit (z. B. `min(100%, 72rem)`) mit **symmetrischem Innenabstand**.
|
||||
- **Keine** feste `min-width` im vierstelligen Pixelbereich ohne Scroll-Alternative; stattdessen **flexibles Grid** + sinnvolle Mindestbreiten nur dort, wo nötig (Tabellen).
|
||||
|
||||
### 5.2 Breakpoints (Orientierung)
|
||||
|
||||
- **Mobil:** < 640px – eine Spalte, Navigation als klares Overlay oder ausklappbare Liste mit großen Touch-Zielen.
|
||||
- **Tablet:** 640–1024px – ggf. weiterhin eine Spalte oder kompakte Sidebar.
|
||||
- **Desktop:** > 1024px – Zwei-Spalten-Layout optional; rechte Spalte für Bilder/Termine **nicht** zwingend über volle Höhe „eingesperrt“, wenn das inhaltlich sinnvoller ist.
|
||||
|
||||
### 5.3 Weißraum
|
||||
|
||||
- Einheitliches Spacing-System (z. B. Vielfache von 4px oder 0,25rem): Abstände zwischen Blöcken, in Karten, zwischen Formularfeldern.
|
||||
|
||||
---
|
||||
|
||||
## 6. Navigation und Bedienung
|
||||
|
||||
### 6.1 Hauptnavigation
|
||||
|
||||
- **Desktop:** horizontale Leiste mit Vollfarbe EKHN-Violett; aktiver Eintrag **deutlich** (Unterstreichung, Hintergrund oder starker Kontrast – weiterhin im Violett-System).
|
||||
- **Touch:** Menüpunkte mindestens ca. **44×44 px** Klickfläche.
|
||||
- **Untermenüs:** Hover für Maus; für Tastatur **Escape** schließt; **Fokus** sichtbar im gesamten Menübaum.
|
||||
- **Mobile:** „Menü“-Button durch **Icon + Text** oder klares Label; Animationen **kurz** (< 200ms).
|
||||
|
||||
### 6.2 Orientierung
|
||||
|
||||
- Optional: **Brotkrumen** bei tieferen Seiten (Gemeindeleben → Gruppen → …), dezent unterhalb des Headers.
|
||||
- Seitentitel konsistent: eine H1 pro Seite, semantisch korrekt.
|
||||
|
||||
### 6.3 Footer
|
||||
|
||||
- Impressum/Datenschutz bleiben gut auffindbar; gleiche visuelle Gewichtung wie bisher, mit verbessertem Kontrast und Fokus.
|
||||
|
||||
---
|
||||
|
||||
## 7. Barrierefreiheit (WCAG 2.1 Level AA als Ziel)
|
||||
|
||||
- **Kontrast:** Text auf Violett/Weiß/Grau messen (Tools: axe, Lighthouse, WebAIM Contrast Checker).
|
||||
- **Tastatur:** alle interaktiven Elemente erreichbar; sichtbarer `:focus-visible`.
|
||||
- **Screenreader:** Landmarks (`header`, `nav`, `main`, `footer`), Überschriftenhierarchie, `aria-expanded` für Untermenüs, sinnvolle `alt`-Texte bei Bildern.
|
||||
- **Bewegung:** `prefers-reduced-motion` respektieren (Animationen abschwächen oder deaktivieren).
|
||||
|
||||
---
|
||||
|
||||
## 8. Komponentenbibliothek (schrittweise)
|
||||
|
||||
Einheitliche Bausteine reduzieren Streuung und erleichtern Wartung:
|
||||
|
||||
| Komponente | Anforderungen |
|
||||
|------------|----------------|
|
||||
| **Primärbutton** | Violett-Hintergrund, weißer Text, Hover, disabled-Zustand, Fokusring |
|
||||
| **Sekundärbutton** | Outline in Violett oder neutral, gleiche Höhe wie Primär |
|
||||
| **Karte** (Termine, News) | Klarer Titel, Datum, Link „weiterlesen“, ruhiger Schatten oder Rahmen |
|
||||
| **Formularfelder** | Labels sichtbar, Fehler näch am Feld, keine rein farblichen Fehlerhinweise |
|
||||
| **Tabellen** (Admin) | Zeilenwechsel, ausreichend Zellpadding, horizontales Scrollen auf schmalen Screens |
|
||||
|
||||
Technisch: zentrale **CSS-Variablen** + ggf. wiederverwendbare Vue-Komponenten oder Utility-Klassen – ohne das Projekt unnötig zu überfrachten.
|
||||
|
||||
---
|
||||
|
||||
## 9. Umsetzung in Phasen
|
||||
|
||||
### Phase 1 – Fundament (geringes Risiko, hoher Nutzen)
|
||||
|
||||
- Design-Tokens (Farben, Abstände, Schriftgrößen) in einer **globalen** Styleschicht.
|
||||
- Entfernen/Ersetzen problematischer Layout-Regeln (`min-width` Hauptspalte), **Responsive** testen.
|
||||
- Typografie-Skala und Basisabstände vereinheitlichen.
|
||||
- Kontrast Footer/Links prüfen und anpassen.
|
||||
|
||||
### Phase 2 – Navigation & Chrome
|
||||
|
||||
- Navbar optisch verfeinern (Padding, aktive Zustände, Touch) bei **unverändertem** `#9400ff` / Hover.
|
||||
- Header (Titelzeile): Schlagschatten/Lavendel **an Markensystem anbinden** oder reduzieren für seriösere Wirkung.
|
||||
- Optional Brotkrumen für tiefe Seiten.
|
||||
|
||||
### Phase 3 – Inhaltsmodule
|
||||
|
||||
- Termine, Gottesdienste, Kontakt: Kartenlayout, konsistente Datumdarstellung (`date-fns` ist bereits im Projekt).
|
||||
- Bilder: feste Aspect-Ratios oder `object-fit`, damit keine Layout-Sprünge entstehen.
|
||||
|
||||
### Phase 4 – Feinschliff
|
||||
|
||||
- Mikro-Interaktionen (Hover, Fokus) konsistent.
|
||||
- Performance: Schriftarten, Bildgrößen, Lazy Loading wo sinnvoll.
|
||||
- Finale Accessibility-Prüfung.
|
||||
|
||||
---
|
||||
|
||||
## 10. Erfolgskriterien (messbar / reviewbar)
|
||||
|
||||
- Keine horizontale Scrollbarkeit bei Standard-Viewports durch feste Mindestbreiten.
|
||||
- Lighthouse-Accessibility-Score deutlich verbessert (Ziel: **≥ 90**, wo technisch möglich).
|
||||
- **Manuelle** Tastatur- und Screenreader-Stichprobe auf Startseite, Navigation, einem Formular.
|
||||
- **Visuelles Review** mit 2–3 Stakeholdern: „wirkt seriös, klar, kirchlich passend“ – **ohne** neue Hauptfarbe neben EKHN-Violett.
|
||||
|
||||
---
|
||||
|
||||
## 11. Explizite Nicht-Ziele
|
||||
|
||||
- Kein Rebranding und kein Ersatz der Primärfarbe.
|
||||
- Kein „Gamification“-Design oder verspielte Illustrationen als Hauptstil.
|
||||
- Keine Einführung schwerer UI-Frameworks nur wegen Optik, wenn das Projekt schlank bleiben soll (abwägen mit Wartbarkeit).
|
||||
|
||||
---
|
||||
|
||||
## 12. Nächster Schritt
|
||||
|
||||
Umsetzung beginnt mit **Phase 1**: globale Tokens + Layout-Fixes + Kontrast. Dieses Dokument dient als **Referenz** für alle weiteren UI-Änderungen und sollte bei größeren Designentscheidungen aktualisiert werden.
|
||||
|
||||
---
|
||||
|
||||
*Dokument erstellt als Arbeitsgrundlage für die Modernisierung; bei Abweichungen von offiziellen EKHN-CD-Vorgaben immer die gültige kirchliche Markenrichtlinie Vorrang haben.*
|
||||
Reference in New Issue
Block a user