Der LfdA-Styleguide: Ansicht von verschiedenen Buttondesigns bei unserem Kunden Sutorbank
Ansicht einer fertigen Seite aus Einzelelementen mit dem LfdA-Styleguide
Wozu benutzt man ein Design System
Bei einem "Design System" wird das Design in einzelne Komponenten unterteilt. Die Komponenten können später flexibel zu Modulen und diese zu Seiten zusammengesetzt werden.
Wir unterscheiden dabei Atome, Moleküle und Seitenvorlagen. Atome sind kleinste Bausteine, wie z. B. Buttons, Textformatierungen, Listen und Bilder. Moleküle sind zusammengesetzte Inhaltselemente aus mehreren Atomen, z. B. ein News-Teaser mit Bild, Überschrift, Teaser-Text und Link oder ein "Text-Media-Element". Diese Inhaltselemente können später im CMS gepflegt werden.
Aus den Molekülen können Vorlagen für Seiten zusammengesetzt werden. Am wichtigsten sind dabei die Homepage und eine Standard-Folgeseite. Oft gibt es noch spezielle Seite wie z. B. FAQs, Suchergebnisse, Download-Bereiche usw.
Das Design System dient als Basis für die Entwicklung mit einem Content-Management-System. Im Grunde erzeugt die Software CSS und JavaScript sowie eine HTML-Volage für die Backend-Entwickler.
Der Workflow mit einem Design System
Der Workflow mit unserer Software unterscheidet sich insbesondere im Punkt der technischen Umsetzung des Designs. Die Vorteile liegen darin, dass Kunden das technisch umgesetzte Design betrachten und abnehmen können. An dieser Stelle wird das Design nicht mehr berührt, was die sogenannte Integration des Designs ins CMS beschleunigt.
- Ein Designer erstellt das Design mit Sketch, Adobe XD oder einer Grafiksoftware.
- Der Frontend-Entwickler analysiert das Design und zerlegt es in wiederkehrende Patterns (Muster).
- Der Frontend-Entwickler baut HTML, CSS und JavaScript für die Komponenten.
- Der Kunde erhält mit dem Design System Sicht auf das tatsächliche Design der späteren Website: Im Webbrowser und responsive für Mobilgeräte. In diesem Schritt können Korrekturen vorgenommen werden.
- Der Backend-Entwickler nutzt das HTML, CSS und JavaScript des Design Systems als Vorlage für die CMS-Templates.
Der Arbeitsprozess mit einem Design System
Ein Design System selbst in Ihrer Firma nutzen…
Der Software zum Entwickeln eines Design Systems ist unter dem Namen Pangolin.js Open-Source verfügbar.
Die Dokumentation finden Sie unter pangolinjs.org.
Das Tool ist immer dann geeignet, wenn Sie Website-Designs strukturiert in ein Frontend überführen möchten. Die Software ist für Frontend-Entwickler in Internetagenturen interessant.