Design-Systeme mit TYPO3 entwickeln

Das Thema Design-Systeme ist aktuell in aller Munde. Kein Wunder: Insbesondere bei größeren Unternehmen gibt es den Wunsch, mit einem einheitlichen Look&Feel nach außen aufzutreten.

Denn der Status Quo ist häufig ein anderer: Vor Jahren wurden vielleicht einmal Farben und Schriftschnitte festgelegt und auf deren Basis ein Website-Layout erstellt. Seitdem ist jedoch viel passiert: Die Unternehmensseite hat sich weiterentwickelt, vielleicht hat sogar die zuständige Agentur gewechselt. Unter Garantie gibt es einzelne Abteilungen, die neben der Unternehmensseite ihre eigenen Microsites aufgesetzt haben. Mit etwas Glück stimmen die Farben und Schriftschnitte zumindest einigermaßen überein, ein einheitlicher optischer Stil ist häufig jedoch nicht vorhanden.

Design-Systeme im Entwicklungsprozess

Design-Systeme können dieses Problem lösen. Sie definieren nicht nur Farben und Schriften, sogenannte Design Tokens, sondern auch kleinere und größere Bestandteile von Webseiten, sogenannte Komponenten (z. B. das Aussehen eines Buttons oder einer mobilen Navigation).

Doch selbst das beste Design-System löst keines der genannten Probleme, wenn es nicht sinnvoll und tief in den Entwicklungsprozess von Webseiten integriert werden kann. Denn die eigentliche Herausforderung wird ja nicht verschwinden: Internetauftritte entwickeln sich weiter – und das sollen sie ja auch, genau das unterscheidet sie von analogen Print-Produkten.

Wir bei sitegeist setzen sowohl bei unseren Neos- als auch bei unseren TYPO3-Projekten auf die Vorteile von Design-Systemen. Hierzu haben wir für beide Content-Management-Systeme die passenden technischen Tools erfunden und entwickeln diese ständig als Open-Source-Software weiter.

Design-Systeme mit TYPO3

Im TYPO3-Bereich setzen wir mittlerweile seit mehreren Jahren auf einen komponentenbasierte Entwicklungsprozess. Die technische Basis hierfür schafft unsere Open-Source-Extension Fluid Components. Sie ermöglicht es uns, Website-Layouts in wiederverwendbare Bestandteile zu zerlegen, die dann flexibel miteinander kombiniert werden können.

Gleichzeitig werden diese Komponenten in einem Living Styleguide präsentiert, der die Basis für eine nachhaltige Weiterentwicklung und Verbesserung der Website schafft. Hier kommt unser Fluid Styleguide zum Einsatz, der auf Fluid Components aufsetzt und optimal auf die Plattform TYPO3 abgestimmt ist. Veralten kann der Living Styleguide im Gegensatz zu normalen Styleguides nie: Er greift auf die gleichen Komponenten zurück wie die Website selbst.

Auch wenn Komponenten und Styleguide für den Einsatz mit TYPO3 optimiert sind: Eine Einbahnstraße sind sie dadurch nicht. Der Living Styleguide ermöglicht es uns, das darin entwickelte Design-System einfach auf mehrere verschiedene Systeme anzuwenden, also beispielsweise auch auf Systeme abseits von TYPO3.

Alle technischen Details zu unseren Entwicklungstools stellen wir auf einer eigenen Produktseite im Detail vor. Hier gibt es auch eine Live-Demo, die den Living Styleguide in der Praxis zeigt:

Tools aus der Praxis

Beim SPIEGEL-Verlag haben wir durch den Aufbau eines Living Styleguides eine zukunftsweisende Architektur geschaffen, auf der in den nächsten Jahren dutzende Websites aufgebaut werden können. Gleichzeitig konnten wir externe IT-Systeme wie das Talent-Management-System Umantis ohne großen Aufwand mit einem Design versehen, das sich nahtlos in das Corporate Design der SPIEGEL-Gruppe einfügt.

Das Zusammenspiel aus Komponenten und Living Styleguide wurde in zahlreichen Kundenprojekten erprobt und hat sich bewährt. Unsere Entwicklungstools lösen deshalb auch keine theoretischen Probleme, sondern decken den konkreten Bedarf in echten Webprojekten ab.

Design-Systeme sind zurecht ein aktuell viel diskutiertes Thema. Wenn sie richtig eingesetzt und tief in die Arbeitsprozesse integriert werden, schaffen sie eine Flexibilität und Zukunftsfähigkeit, die früher so nicht möglich war. Wir bei sitegeist haben die nötige Erfahrung, das technische Know-How und die passenden Tools, um unsere Kunden beim Aufbau eines Design-Systems zu beraten und zu unterstützen.