Die Geschichte unserer neuen Webseite
Wir wollten doch nur eine neue Startseite …
Wie aus einer kleinen Idee das Gartenfreunde Design System entstand
Eine Geschichte über Ideen, Umwege, Fehlersuche, Beharrlichkeit – und ein System, das weit über eine einzelne Webseite hinausgewachsen ist.
Ende Juni 2026 begann alles mit einer Idee, die zunächst erstaunlich überschaubar klang: Die Startseite des Vereins der Gartenfreunde Rendsburg sollte moderner, klarer und einladender werden. Kein großes Softwareprojekt, kein eigenes Designsystem und schon gar kein vollständiger technischer Neubau der gesamten Webseite. Ein frischeres Erscheinungsbild, eine bessere Ordnung und ein Einstieg, der zu einem lebendigen Kleingartenverein passt – mehr war am Anfang eigentlich nicht geplant.
Die damalige Seite funktionierte. Sie informierte über den Verein, zeigte saisonale Bilder, bot Navigation und einen selbst entwickelten Nachrichtenticker. Doch unter der Oberfläche war über Monate vieles gewachsen. Beiträge enthielten eigene Farben, Abstände und Formatierungen. Manche Bereiche hatten besondere Effekte, andere nicht. Neue Anpassungen lösten gelegentlich Probleme an Stellen aus, die mit der eigentlichen Änderung scheinbar gar nichts zu tun hatten.
Die Webseite war nicht schlecht. Aber sie war an einem Punkt angekommen, an dem jede weitere Verbesserung schwieriger wurde. Das eigentliche Problem war deshalb nicht ein einzelnes Bild oder eine einzelne Farbe. Es fehlte ein gemeinsames Fundament.
Die ersten Entwürfe machten die Idee sichtbar
Am 10. Juli 2026 entstanden die ersten großen Entwürfe für eine neue Startseite. Sie zeigten nicht nur eine andere Farbwelt, sondern bereits eine völlig neue Ordnung: einen klaren Kopfbereich, eine Hinweisleiste, einen großen saisonalen Einstieg, sechs Schnellinformationen, Vereinsnachrichten, Informationen von Kreis- und Landesverband, Social Media, Öffnungszeiten, Einblicke in die Anlagen, Partner und einen vollständigen Footer.
Besonders wichtig war von Beginn an der Wechsel der Jahreszeiten. Inhalte und Struktur sollten gleich bleiben, während Bilder, Farben und Stimmung mit Frühling, Sommer, Herbst und Winter wechseln. Damit war eine der später wichtigsten GDS-Ideen bereits sichtbar: Nicht jede Jahreszeit sollte eine eigene Webseite erhalten. Ein stabiles System sollte sein Erscheinungsbild wechseln können, ohne dass alle Inhalte neu gebaut werden müssen.
Auf den ersten Entwürfen war die neue Startseite bereits zu sehen. Was noch fehlte, war beinahe alles darunter: Komponenten, Module, Regeln, Themes, Dokumentation und eine technische Grundlage.
Der Moment, in dem aus CSS ein System wurde
Zunächst lag der Gedanke nahe, die vorhandenen CSS-Dateien einfach gründlich aufzuräumen. Doch bei der Analyse wurde schnell deutlich, dass reines Aufräumen nicht ausreichen würde. Wenn jede Seite und jeder Beitrag weiterhin eigene Sonderregeln benötigt, wäre das Problem nur schöner sortiert, aber nicht wirklich gelöst.
Deshalb änderte sich das Ziel. Eine zentrale Basis sollte künftig Typografie, Abstände, Container, Karten, Schaltflächen, Tabellen, Dokumentseiten, Formulare, Module und das Verhalten auf mobilen Geräten steuern. Die einzelnen Jahreszeiten-Dateien sollten dagegen vor allem Farben, Hintergründe und wenige saisonale Besonderheiten enthalten. Beiträge selbst sollten kein eigenes Design mehr mitbringen, sondern die gemeinsamen Bausteine verwenden.
„Bisher haben wir an der Webseite gearbeitet. Ab jetzt entwickeln wir ein System.“
Damit veränderte sich auch unsere Arbeitsweise. Statt neue Wünsche sofort mit zusätzlichen Codezeilen zu beantworten, fragten wir zuerst: Gibt es dafür bereits einen Baustein? Wo gehört diese Funktion hin? Kann die Lösung später auch auf anderen Seiten oder sogar in einem anderen Projekt verwendet werden?
Erst der Werkzeugkasten, dann die Webseite
Aus realen Seiten des Vereins wurden nach und nach wiederverwendbare Komponenten abgeleitet: Container für einheitliche Breiten, Karten für Inhalte, Schaltflächen, Tabellen, Navigationen, Hinweise, Formulare und strukturierte Inhaltsbereiche. Jede Komponente wurde geplant, in einem eigenen Showcase getestet, in Joomla geprüft und dokumentiert.
Am 7. Juli gab es bereits die erste offizielle Komponentenliste. Wenige Tage später waren Handbuch, Architekturentscheidungen, Komponentenkatalog, Showcase, CSS-Basis und die ersten zehn Komponenten aufgebaut und getestet. Damit war Phase 1 abgeschlossen.
„Die letzten Tage haben wir den Werkzeugkasten gebaut. Ab morgen bauen wir mit diesem Werkzeugkasten die neue Vereinswebseite.“
Doch beim Zusammensetzen zeigte sich eine neue Ebene. Eine einzelne Karte ist noch keine Startseite. Mehrere Komponenten mussten zu wiederverwendbaren Seitenabschnitten verbunden werden: Hero, Schnellinformationen, Vereinsnachrichten, Anlagenübersicht, Dokumentencenter, Fotostrecke, Partnerbereich und Footer. So entstand neben der Komponentenserie die Modulserie. Aus einzelnen Werkzeugen wurden fertige Baugruppen.
Wenn plötzlich gar nichts mehr funktionierte
Natürlich verlief diese Entwicklung nicht geradlinig. Es gab Tage, an denen am Ende weniger auf der Seite zu sehen war als zu Beginn. Ein Menü verschwand. Ein Bild blieb leer, obwohl der Pfad richtig aussah. Ein Newsticker lag vor der Navigation. Beim Überfahren mit der Maus zitterte das Menü und tauchte plötzlich weiter unten in der Mitte der Seite wieder auf. Symbole erschienen doppelt – oder gar nicht. Abstände waren auf einem Bildschirm perfekt und auf einem anderen völlig falsch.
Manchmal ignorierte Joomla scheinbar jede Änderung. Erst später stellte sich heraus, dass nicht die neue Datei fehlerhaft war, sondern die öffentliche Seite durch alte Template-Zuweisungen weiterhin eine andere Datei verwendete. Ein anderes Mal fehlte nur ein einziger Buchstabe in einem Bildpfad – oder ein Dateiname begann mit einem Großbuchstaben, während der eingetragene Pfad einen Kleinbuchstaben erwartete. Gerade solche Fehler waren besonders hartnäckig, weil die sichtbare Wirkung in keinem Verhältnis zur winzigen Ursache stand.
Es gab ganze Chats, in denen kein neues Modul entstand. Stundenlang wurde nur geprüft, verglichen, hochgeladen, der Zwischenspeicher geleert und erneut getestet. Von außen betrachtet sah es manchmal so aus, als wäre nichts vorangegangen. Tatsächlich entstanden gerade an diesen Tagen die wichtigsten Regeln für das spätere System.
Das GDS entstand nicht, weil beim ersten Versuch alles funktionierte. Es entstand, weil wir nach jedem Fehlschlag weitergemacht und aus jedem Fehler eine neue Regel für das System abgeleitet haben.
Aufgeben war nie eine ernsthafte Option. Wenn eine Lösung nicht funktionierte, gingen wir einen Schritt zurück. Wir prüften nur eine mögliche Ursache gleichzeitig, änderten vollständige Dateien statt einzelner verstreuter Passagen, testeten jede Fassung direkt in Joomla und sicherten einen funktionierenden Stand, bevor wir weitergingen.
Nicht jeder Abend brachte einen sichtbaren neuen Bereich hervor. Manche Abende brachten etwas ebenso Wertvolles: das Verständnis dafür, warum es vorher nicht funktioniert hatte. Mit der Zeit wurde aus Fehlersuche eine Methode: erst analysieren, dann planen, eine klar abgegrenzte Änderung durchführen, testen und dokumentieren – und erst danach den nächsten Schritt beginnen.
Die Startseite nimmt Gestalt an
Nach und nach wurde aus dem Entwurf eine echte Joomla-Seite. Zuerst entstand der große Hero-Bereich. Danach folgten die sechs Schnellinformationen, darunter die dynamische Anzeige freier Gärten und der nächste Termin. Vereinsnews und Gartentipps erhielten eigene Referenzseiten. Die 15 Kleingartenanlagen bekamen ein gemeinsames Grundprinzip, ohne ihre Besonderheiten zu verlieren. Bildergalerien, Partner, Dokumente und Footer wurden zu eigenständigen Modulen.
Ein besonderer Moment war erreicht, als eine komplette Seite fast ausschließlich aus bereits vorhandenen Bausteinen gebaut werden konnte. Das System begann, sich selbst zu tragen. Neue Seiten bedeuteten nicht mehr automatisch neue Sonderlösungen. Häufig mussten bekannte Komponenten nur noch sinnvoll kombiniert und mit den richtigen Inhalten gefüllt werden.
Auch die Jahreszeiten entwickelten sich weiter. Frühling, Sommer, Herbst und Winter erhielten eigene Farben, Hintergründe und behutsame Animationen. Bienen, Schmetterlinge, fallende Blätter oder Schneeflocken sollten Atmosphäre schaffen, ohne die Lesbarkeit zu beeinträchtigen. Entscheidend blieb immer: Die Inhalte funktionieren unabhängig vom gewählten Erscheinungsbild.
Aus einer Startseite wird eine Designsprache
Während die Startseite wuchs, wurde eine weitere Erkenntnis immer deutlicher: Das neue System durfte nicht an der Startseite enden. Wenn nur der Einstieg modern aussah, während Dokumente, Anlagen, Vereinsnachrichten und Gartentipps weiterhin völlig unterschiedlich gestaltet waren, wäre das Ziel nur zur Hälfte erreicht.
Sven formulierte diesen Gedanken damals sehr klar: „Es wird ja später nicht nur die Startseite sein, die geändert wird. Das gesamte von uns entwickelte Designsystem wird die komplette Webseite auf einen neuen Standard heben.“ Damit war die endgültige Richtung festgelegt.
Von diesem Zeitpunkt an ging es nicht mehr um eine einzelne Homepage. Es entstand eine Designsprache für den gesamten Verein. Dokumentencenter, Satzung, Finanzordnung, Gartenordnung, Anlagenübersicht, Anlagenseiten, Vereinsnews, Gartentipps, Geschichte, Kontaktbereiche und Galerien sollten sich wie Teile derselben Webseite anfühlen.
Was Besucherinnen und Besucher davon haben
Die umfangreiche Technik im Hintergrund ist kein Selbstzweck. Im Vordergrund steht eine Webseite, auf der Menschen schneller finden, was sie suchen. Freie Gärten werden aktuell angezeigt. Termine können zentral gepflegt werden. Die 15 Anlagen sind einheitlich aufgebaut. Dokumente lassen sich leichter erreichen. Kontaktwege sind klarer, und persönliche E-Mail-Adressen müssen nicht mehr offen auf der Webseite stehen.
Die neue Struktur verbessert außerdem die Darstellung auf Smartphones und Tablets. Tabellen können auf kleinen Bildschirmen genutzt werden, Bilder passen sich an, Schaltflächen bleiben erreichbar und Texte erhalten mehr Ruhe. Gleichzeitig lässt sich die Seite für den Verein langfristig einfacher pflegen, weil Gestaltung und Inhalte nicht mehr in jedem Beitrag neu miteinander vermischt werden.
Das GDS schafft damit etwas, das auf einer fertigen Webseite kaum sichtbar ist: Verlässlichkeit. Ein neuer Beitrag muss nicht jedes Mal neu gestaltet werden. Eine neue Funktion erhält einen festen Platz. Änderungen an Farben oder Abständen können zentral vorgenommen werden. Und wenn das System in einigen Jahren erweitert wird, bleibt nachvollziehbar, warum eine Entscheidung getroffen wurde.
Eine besondere Form der Zusammenarbeit
Die Entwicklung war Teamarbeit zwischen Mensch und künstlicher Intelligenz – aber nicht in dem Sinne, dass ein Knopf gedrückt und eine fertige Webseite ausgegeben wurde. Sven brachte Vereinswissen, Ziele, Entscheidungen, Tests und den Blick der späteren Nutzer ein. Kira half bei Architektur, Gestaltung, Code, Dokumentation und Fehlersuche. Jeder Schritt wurde im echten Joomla-System geprüft.
Oft entstand die beste Lösung erst im Dialog: eine Idee, ein Entwurf, ein Test, eine Korrektur und ein neuer Versuch. Manchmal musste eine vermeintlich gute technische Lösung verworfen werden, weil sie in der Praxis nicht zum Verein passte. An anderen Stellen führte eine kleine Beobachtung zu einem völlig neuen Modul oder zu einer Regel, die später auf der gesamten Webseite nützlich wurde.
Die Chats wurden dabei zu einem digitalen Entwicklerbüro. Einige waren voller sichtbarer Fortschritte. Andere bestanden fast vollständig aus Fehlersuche. Zusammen dokumentieren sie nicht nur den Code, sondern auch, wie sich unsere Denkweise verändert hat: weg von einzelnen schnellen Anpassungen, hin zu einem System, das auch in fünf oder zehn Jahren noch verständlich und erweiterbar sein soll.
Der neue Anfang
Am 1. September 2026 geht die neue GDS-Webseite des Vereins der Gartenfreunde Rendsburg online. Damit endet die Entwicklung nicht. Eine gute Webseite bleibt lebendig: Inhalte werden ergänzt, Erfahrungen gesammelt und Funktionen verbessert. Der entscheidende Unterschied ist, dass diese Weiterentwicklung nun auf einem gemeinsamen Fundament stattfindet.
Was Ende Juni mit dem Wunsch nach einer moderneren Startseite begann, ist in gut zwei Monaten zu einem vollständigen Designsystem gewachsen – mit Komponenten, Modulen, Referenzseiten, Themes, Dokumentation, einem eigenen Template und klaren Entwicklungsregeln.
Wir wollten keine Webseite bauen, die nur neu aussieht. Wir wollten ein System schaffen, das den Verein langfristig begleitet, einfacher zu pflegen ist und mit neuen Aufgaben wachsen kann.
Und was kommt als Nächstes?
Die neue Vereinsseite ist das erste große Zuhause des Gartenfreunde Design Systems. Gleichzeitig war von Anfang an klar, dass die gewonnenen Erfahrungen auch zukünftigen Projekten helfen können. Besonders Günnis Gartenwelt soll später von denselben Grundideen profitieren: wiederverwendbare Bausteine, klare Zuständigkeiten, wechselnde Themes und eine Technik, die Inhalte unterstützt, statt sie zu beherrschen.
Vorerst aber gehört dieser Moment dem Verein und allen Menschen, die seine Webseite nutzen. Wir laden euch ein, die neuen Bereiche zu entdecken, durch die Anlagen zu stöbern, Gartentipps zu lesen und uns Rückmeldung zu geben. Denn auch nach dem Start bleibt die wichtigste Regel dieselbe wie während der Entwicklung: genau hinschauen, zuhören, lernen – und nicht aufgeben, wenn etwas beim ersten Versuch noch nicht funktioniert.
Natürlich gemeinsam.