11 KiB
11 KiB
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: 1000pxin 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:
#ffffffoder 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 (
#1a1a1abis#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-widthim 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-expandedfür Untermenüs, sinnvollealt-Texte bei Bildern. - Bewegung:
prefers-reduced-motionrespektieren (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-widthHauptspalte), 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-fnsist 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.