Konzeption und Realisierung eines digitalen Design System
Die Entwicklung von Websites und Anwendungen setzt heute fast immer ein digitales Interface voraus, mit dem der Endnutzer interagiert. Eine große Herausforderung bei der Entwicklung von Interfaces ist, dass Strukturen und Styling in verschiedenen Teilen eines Interfaces und über die Interfaces verschiedener Produkte hinweg immer wieder wiederholt werden. Dies führt zu Fehlern, Korrekturen und ineffizienten Prozessen. Digitale Design Systeme (die manchmal auch als Pattern Libraries oder Component Libraries bezeichnet werden) machen durch wiederverwendbare Strukturen eine viel effizientere Entwicklung möglich, die gleichzeitig, automatisch bessere und konsistentere Ergebnisse erzeugt.
Wir wollen in diesem Seminar ganz konkret betrachten in welchen Schritten ein Design System inkrementell aufgebaut und in der eigenen Entwicklung verwendet werden kann. Von Design Tokens als atomaren Design Entscheidungen, über Komponenten und ihre Tokens und Optionen hin bis zu Anwendungen die auf der Basis solcher Komponenten entwickelt werden.
Inhalte:
- Was beinhaltet ein Design System?
- Design Token
- Komponenten-Definitionen
- Nutzungshinweise / Dokumentation
- Wie setzt man ein solches Design System um?
- Analyse Status Quo: Inventarisierung
- Identifikation von Kern-Komponenten
- Aufsetzen von Design Tokens
- Anlegen einer Komponenten-Bibliothek
- Aufsetzen von Storybook
- Verwendung der Komponenten-Bibliothek in einer Anwendung
- Wie sorgt man für anhaltenden, nachhaltigen Erfolg?
Vorgehen:
Wir starten mit einer kurzen Einführung in die Thematik, um dann möglichst schnell alleine oder in kleinen Gruppen mit einem Demo-Projekt zu starten. Anhand dieses kleinen Demo-Projekts gehen wir zusammen den beschriebenen Prozess der Erstellung eines Design System prototypisch gemeinsam durch, um die üblichen Fragen und Herausforderungen ganz praktisch zu erleben.
Als Abschluss, nach dieser praktischen Phase, besprechen wir die Ergebnisse und Erkenntnisse und klären entstandene Fragen in einem offenen Austausch.
Final gibt es noch einen Ausblick darauf wie ein Design System auch langfristig erfolgreich wird!
Photo by Balázs Kétyi on Unsplash
Jonas Ulrich beschäftigt sich seit fast 20 Jahren mit der Erstellung von Websites und Frontends, und ist seit 2008 als Entwicklungsleiter in Online-Agenturen tätig. Als Mitgründer und CTO von kickstartDS ist er in Deutschland einer der erfahrensten Köpfe für die Erstellung von Design Systemen und Komponentenbibliotheken. Nebem diesem zentralen Thema beschäftigen ihn Website- und App-Interfaces, Single Page Apps und der Ansatz der Web Components sowohl im Kontext der Standardisierung und Gesamtentwicklung des Webs, als auch in konkreten Projekten in denen Web Components (mit verschiedenen Features) bereits heute zum Einsatz kommen.