yourpart3/docs/UI_REDESIGN_PLAN.md

UI Redesign Plan

Status

• Prioritaet 1 ist umgesetzt.
• Prioritaet 2 ist umgesetzt.
• Phase 3 ist abgeschlossen.
• Phase 4 ist abgeschlossen.
• Phase 5 ist abgeschlossen.
• Das Redesign ist damit insgesamt abgeschlossen.
• Optionaler technischer Nachlauf:
• weiterer Performance-Feinschliff rund um den separaten three-Chunk

Ziel

Das Frontend von YourPart soll visuell und strukturell modernisiert werden, ohne die bestehende Funktionsbreite zu verlieren. Der Fokus liegt auf einem klareren Designsystem, besserer Informationshierarchie, konsistenter Navigation, responsiver Nutzung und einer deutlich hochwertigeren Wahrnehmung auf Startseite, Community-Bereichen und Spiele-/Lernseiten.

Ausgangslage

Aktueller Stand aus dem Code:

• Globale Styles in frontend/src/assets/styles.scss nutzen ein sehr einfaches Basisset mit Arial, wenigen Tokens und kaum skalierbarer Designsystem-Logik.
• AppHeader.vue, AppNavigation.vue und AppFooter.vue sind funktional, aber visuell eher wie ein klassisches Webportal aufgebaut.
• Farben, Abstaende, Border-Radius, Buttons und Typografie wirken nicht konsistent genug fuer ein modernes Produktbild.
• Navigation und Fensterleiste sind stark desktop-zentriert und sollten auf mobile Nutzung und klare Priorisierung neu gedacht werden.
• Die Landing- und Content-Bereiche haben unterschiedliche visuelle Sprachen statt eines durchgaengigen Systems.

Ziele des Redesigns

• Moderner, eigenstaendiger Look statt generischer Standard-UI.
• Einheitliches Designsystem mit Tokens fuer Farben, Typografie, Spacing, Schatten, Radius und States.
• Saubere responsive Struktur fuer Desktop, Tablet und Mobile.
• Bessere Orientierung in Community, Blog, Vokabeltrainer und Falukant.
• Hoeherer wahrgenommener Qualitaetsstandard bei gleicher oder besserer Performance.
• Reduktion visueller Altlasten, Inline-Anmutung und inkonsistenter Bedienelemente.

Nicht-Ziele

• Kein kompletter Funktionsumbau im ersten Schritt.
• Keine grossflaechige Backend-Aenderung.
• Kein unkontrolliertes Ersetzen aller bestehenden Komponenten auf einmal.

Prioritaet 1: Fundament schaffen

1. Designsystem definieren

• Neue Design-Tokens in einer zentralen Schicht aufbauen:
• Farben mit klarer Primar-, Sekundar-, Surface- und Statuslogik.
• Typografiesystem mit moderner Schriftfamilie, Skalierung und konsistenten Headline-/Body-Stilen.
• Spacing-System, Radius-System und Schatten-System standardisieren.
• Zustandsdefinitionen fuer Hover, Focus, Active, Disabled.

2. Globale Styling-Basis modernisieren

• frontend/src/assets/styles.scss in ein wartbares Fundament ueberfuehren.
• Einheitliche Defaults fuer body, a, button, Inputs, Listen, Headlines und Fokus-Stati.
• Gemeinsame Utility-Klassen nur dort einfuehren, wo sie echten Wiederverwendungswert haben.
• Barrierefreiheit von Kontrasten und Fokus-Indikatoren direkt mitdenken.

3. Layout-Architektur festziehen

• Feste Regeln fuer Header, Navigation, Content-Flaeche, Footer und Dialog-Layer definieren.
• Maximale Content-Breiten und Raster fuer Marketing-, Dashboard- und Formularseiten festlegen.
• Dialoge, Window-Bar und Overlay-Logik visuell harmonisieren.

Prioritaet 2: Kernnavigation neu gestalten

4. Header ueberarbeiten

• frontend/src/components/AppHeader.vue neu strukturieren.
• Logo, Produktidentitaet, Systemstatus und optionaler Utility-Bereich klarer anordnen.
• Die derzeitige Werbeflaeche kritisch pruefen und nur behalten, wenn sie produktseitig wirklich gewollt ist.
• Statusindikatoren moderner, diskreter und semantisch staerker gestalten.

5. Hauptnavigation neu denken

• frontend/src/components/AppNavigation.vue vereinfachen und priorisieren.
• Mehrstufige Menues visuell und interaction-seitig robuster aufbauen.
• Mobile Navigation als eigenes Muster mit Drawer/Sheet oder kompaktem Menuekonzept planen.
• Wichtige Bereiche zuerst sichtbar machen, seltene Admin- oder Tiefenfunktionen entlasten.
• Forum, Freunde und Vokabeltrainer-Untermenues gestalterisch besser lesbar machen.

6. Footer und Fensterleiste modernisieren

• frontend/src/components/AppFooter.vue als funktionale Systemleiste neu fassen.
• Geoeffnete Dialoge, statische Links und Systemaktionen visuell sauber trennen.
• Footer nicht nur als Restflaeche behandeln, sondern in das Gesamtsystem integrieren.

Prioritaet 3: Visuelle Produktidentitaet schaerfen

7. Startseite neu positionieren

• Startseite in zwei Modi denken:
• Nicht eingeloggt: klare Landingpage mit Nutzen, Produktbereichen, Vertrauen und Handlungsaufforderungen.
• Eingeloggt: dashboard-artiger Einstieg mit hoher Informationsdichte, aber klarer Ordnung.
• Die bisherige Startseite braucht eine deutlich staerkere visuelle Hierarchie und bessere Inhaltsblöcke.

8. Einheitliche Oberflaechen fuer Kernbereiche

• Community-/Social-Bereiche: ruhiger, strukturierter, content-orientierter.
• Blogs: lesefreundlicher, mehr Editorial-Charakter.
• Vokabeltrainer: lernorientiert, klar, fokussiert.
• Falukant: spielweltbezogen, aber nicht altmodisch; eigene Atmosphaere innerhalb des Systems.
• Minispiele: kompakter, energischer, aber im selben visuellen Dach.

9. Komponentenbibliothek aufraeumen

• Buttons, Tabs, Cards, Inputs, Dialogtitel, Listen, Badges und Status-Chips vereinheitlichen.
• Bestehende Komponenten auf Dopplungen und Stilbrueche pruefen.
• Komponenten nach Rollen statt nach Einzelseiten standardisieren.

Prioritaet 4: Responsivitaet und UX-Qualitaet

10. Mobile First nachziehen

• Brechpunkte und Layout-Verhalten klar festlegen.
• Navigation, Dialoge, Tabellen, Formulare und Dashboard-Bloecke fuer kleine Screens neu validieren.
• Hover-abhaengige Interaktionen fuer Touch-Nutzung absichern.

11. Bewegungen und visuelles Feedback

• Subtile, hochwertige Motion fuer Menues, Dialoge, Hover-Stati und Seitenwechsel einbauen.
• Keine generischen Effekte; Animationen muessen Orientierung verbessern.

12. Accessibility und Lesbarkeit

• Tastaturbedienung in Navigation und Dialogen pruefen.
• Farbkontraste, Fokus-Ringe und Textgroessen ueberarbeiten.
• Inhaltsstruktur mit klaren Headline-Ebenen und besserer Lesefuehrung absichern.

Umsetzung in Phasen

Phase 1: Audit und visuelle Richtung

• Bestehende Screens inventarisieren.
• Wiederkehrende UI-Muster erfassen.
• Zielrichtung fuer Markenbild definieren: warm, modern, eigenstaendig, leicht spielerisch.
• Moodboard bzw. 2-3 Stilrouten festlegen.

Phase 2: Designsystem und Shell

• Tokens und globale Styles erstellen.
• Header, Navigation, Footer und Content-Layout neu bauen.
• Dialog- und Formular-Basis angleichen.

Phase 3: Startseite und Kernseiten

• Home, Blog-Liste, Blog-Detail und ein zentraler Community-Bereich ueberarbeiten.
• Danach Vokabeltrainer-Landing/Kernseiten.
• Danach Falukant- und Minigame-Einstiege.

Aktueller Stand:

• abgeschlossen
• umgesetzt fuer Home, Blogs, zentrale Social-/Community-Flaechen, Vokabeltrainer-Kernseiten, Kalender und zentrale Falukant-Einstiege
• Restpunkte in tieferen Vokabel-, Minigame-, Settings- und Admin-Ansichten sind nachgezogen

Phase 4: Tiefere Produktbereiche

• Sekundaere Ansichten und Admin-Bereiche nachziehen.
• Visuelle Altlasten in Randbereichen bereinigen.

Aktueller Stand:

• abgeschlossen
• zentrale Produktbereiche, tiefere Community-/Vokabel-/Kalender-Ansichten sowie zentrale Falukant-Einstiege und Dialog-Basis sind modernisiert
• verbleibende Rand- und Spezialansichten aus Settings, Admin und Minigames sind visuell angeglichen

Phase 5: QA und Verfeinerung

• Responsive Review.
• Accessibility Review.
• Performance-Pruefung auf unnötige visuelle Last.
• Konsistenz-Check ueber das gesamte Produkt.

Aktueller Stand:

• abgeschlossen
• globale Bewegungsreduktion, verbesserte Fokusfuehrung und Tastaturzugang in der Hauptnavigation umgesetzt
• Build-Chunking verbessert; Haupt-Chunk bereits reduziert
• 3D-Runtime in Character3D auf Lazy-Loading umgestellt; verbleibende Warnung betrifft den separaten three-Chunk selbst

Empfohlene technische Arbeitspakete

Paket A: Design Tokens

• Neue CSS-Variablenstruktur aufbauen.
• Alte Farbwerte und Ad-hoc-Stile schrittweise ersetzen.

Paket B: App Shell

• AppHeader.vue
• AppNavigation.vue
• AppFooter.vue
• App.vue
• frontend/src/assets/styles.scss

Paket C: Content-Komponenten

• Gemeinsame Card-, Section-, Button- und Dialogmuster erstellen oder konsolidieren.
• Stark genutzte Widgets und Listen zuerst migrieren.

Paket D: Seitenweise Migration

• Startseite
• Blogs
• Community
• Vokabeltrainer
• Falukant
• Minispiele

Reihenfolge fuer die Umsetzung

1. Designrichtung und Token-System festlegen.
2. App-Shell modernisieren.
3. Startseite und oeffentliche Einstiege erneuern.
4. Kern-Komponentenbibliothek vereinheitlichen.
5. Hauptbereiche seitenweise migrieren.
6. Mobile, Accessibility und Feinschliff abschliessen.

Risiken

• Ein rein visuelles Redesign ohne Systembasis fuehrt wieder zu inkonsistenten Einzelpatches.
• Navigation und Dialog-Logik sind funktional verflochten; dort braucht es saubere schrittweise Migration.
• Falukant und Community haben unterschiedliche Produktcharaktere; die Klammer muss bewusst gestaltet werden.
• Zu viele parallele Einzelumbauten wuerden das Styling kurzfristig uneinheitlicher machen.

Empfehlung

Das Redesign sollte nicht als einzelne Seitenkosmetik umgesetzt werden, sondern als kontrollierte Migration mit Designsystem zuerst. Der erste konkrete Umsetzungsschritt sollte daher ein kleines, aber verbindliches UI-Fundament sein: neue Tokens, neue Typografie, neue App-Shell und eine modernisierte Startseite. Danach koennen die restlichen Bereiche kontrolliert nachgezogen werden.