Fallstudie 01 / 05 · Website-Demos · interne Design-Abstimmung
Sechs Designrichtungen für die Firmenwebsite, erzeugt aus einer zweisprachigen Inhaltsquelle
Ein statischer Node-Generator setzt jede Richtung aus den gemeinsamen Inhalten, einem Komponenten-Baukasten und einem kleinen Rezept pro Demo zu einer vollständigen, durchklickbaren Website zusammen, auf Deutsch und in einer englischen Entwurfsübersetzung. Die Führungskraft kann sie am echten Text und an allen acht Seiten vergleichen statt an Platzhaltern. Die englischen Texte warten noch auf die Prüfung durch den Arbeitgeber. Ich habe den Auftrag festgelegt und die Galerie veröffentlicht; sie ist öffentlich, wird aber von Suchmaschinen nicht indexiert.
Die Führungskraft wollte Designrichtungen für die Firmenwebsite am echten Inhalt und an allen acht Seiten vergleichen, nicht an Platzhaltern: Startseite, Leistungen, Projekte, Unternehmen, Karriere, Kontakt, Impressum und Datenschutz. Eine Richtung musste also eine komplette Website sein, standardmäßig auf Deutsch mit einem Schalter für Englisch und mit einem Video in Endlosschleife im Hero-Bereich.
Der Auftrag änderte sich innerhalb von etwa zwei Wochen mehrfach, und die Firmenfarben kamen in einem einzigen Commit in jede Demo. Änderungen mussten mit wenig Aufwand möglich sein. Eine Inhaltsquelle, ein gemeinsamer Komponenten-Baukasten und ein kleines Rezept pro Demo machen aus einer neuen Richtung oder einer globalen Änderung eine kleine Anpassung, und automatische Prüfungen stoppen einen kaputten Link oder eine fehlende Übersetzung, bevor sie online gehen.
Die Führungskraft, die eine Richtung auswählt, und die Prüfenden, die den Link haben. Die Galerie ist öffentlich, wird aber von Suchmaschinen nicht indexiert.
Nichts: statische Dateien auf GitHub Pages, kein Backend, keine Cookies und keine Analyse, es gibt also auch keine Besucherzahlen.
eine Datei pro Sprache
8 pro Sprachfassung
36 pro Sprachfassung
wiederkehrende Einträge
eine CSS-Datei pro Demo
6, eines pro Richtung
36 in 8 Slots
Vereinfacht: 7 von 12 Objekten. Weggelassen: Website-Metadaten, Seitenkürzel (Slugs), Videoclips, Fotos und das Slot-Register. Die 96 Ausgabeseiten (6 Rezepte × 2 Sprachfassungen × 8 Seiten) werden erzeugt, nicht gespeichert.
Der Build scheitert, wenn ein Schlüssel nur in einer Sprache existiert: je 424 Schlüssel.
Ein Rezept in JSON und eine Theme-Datei mit Farben und Schriften genügen; Inhalt und Baukasten bleiben unverändert.
Die 96 Seiten werden erzeugt, nicht gespeichert, und jede einzelne durchläuft das Prüfprogramm, bevor sie veröffentlicht wird.
Der gesamte Text liegt in zwei Sprachdateien mit identischen Schlüsseln; Seitenumfang und Reihenfolge der Abschnitte sind im Code festgelegt. Wer prüft, vergleicht Design statt Text, und die beiden Dateien können nicht auseinanderlaufen. Abwägung: Jede Demo hat dieselben Seiten in derselben Reihenfolge.
Eine Demo besteht aus einem kleinen Rezept und einer Theme-Datei; der Baukasten enthält acht austauschbare Komponenten als einfache Funktionen, die HTML liefern. Neue Richtungen und globale Änderungen werden zu kleinen Anpassungen. Abwägung: Alle Demos teilen sich ein Markup-Gerüst und unterscheiden sich nur so weit, wie Varianten und Stile es erlauben.
Node schreibt schlichtes HTML für jede Demo, Sprache und Seite, mit relativen Links, sodass die Seite unter einem GitHub-Pages-Unterpfad und lokal funktioniert. GitHub Actions führt Tests, Build und Prüfprogramm aus, bevor es veröffentlicht. Abwägung: Es gibt kein CMS und kein Backend, die Demo-Formulare senden also nichts, und die Playwright-Layoutprüfungen laufen nur lokal.
Einblendungen, Parallaxe und Seitenübergänge laufen nur, wenn keine reduzierte Bewegung eingestellt ist; eine Demo wählt zusätzlich eine filmische Stufe. Ohne Skripte, mit reduzierter Bewegung und beim Drucken bleiben alle Inhalte sichtbar. Abwägung: mehr Laufzeitcode zu pflegen, und Seitenübergänge gibt es nur in neueren Versionen von Chrome und Safari.
Sechs Designrichtungen sind online und liegen der Führungskraft zur Prüfung vor, in einer öffentlichen Galerie, die seit Oktober 2026 besteht. Gebaut wurden sie im Oktober 2026, in 109 Commits innerhalb von 15 Tagen, und veröffentlicht wird nur, wenn alle 119 Tests und das Prüfprogramm bestehen. Stand: interne Design-Abstimmung.
Live-Demo öffnen