# 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.*