Moderne, digitale Desi­gnsysteme müssen skalieren können. Sie müssen sich im robusten Alltag­s­einsatz mit unbe­kannten Inhalten bewähren. Und sie müssen mit verschie­densten Rahmen­be­din­gungen und Formen der Benut­zerin­ter­aktion umgehen können. Hier immer den Überblick zu behalten, ist nicht leicht. Ein Living Styleguide unter­stützt dabei den Prozess, um das Erschei­nungsbild, das Verhalten und die verschiedenen Elemente des User Interfaces fest­zu­halten. Auch können die Vorgaben an die Typo­grafie oder Gestaltung als Kompo­nenten hinterlegt und in ihrer unter­schied­lichen Komplexität umgesetzt werden.

Dazu hat es sich bewährt mit Para­digmen wie Atomic Design oder Design Token die Elemente eines User Interfaces isoliert zu erar­beiten. Diese werden dann wie Lego-Steine zu einem Narrativ zusam­men­gesetzt. Tools wie »Storybook« helfen dabei, die Elemente zu entwickeln, zu doku­men­tieren und mit verschiedenen Arten von Tests produk­ti­ons­tauglich zu machen. Der Styleguide, der so entsteht, ist »lebendig«: Er ist direkt mit der Umsetzung verdrahtet und immer aktuell.

Das Seminar gibt Ihnen einen Einblick in die Entstehung eines digitalen Desi­gnsystems. Wir machen den Sprung vom Mock-Up zur echten Umsetzung im Medium. Dabei verwenden wir das Tool »Storybook«, um unsere UI-Elemente zu entwickeln. Wir schauen uns an, welche Möglich­keiten zur Doku­men­tation das Tool bietet, um den Anwendern des Desi­gnsystems die Arbeit zu erleichtern. Ein weiterer Fokus des Seminars liegt auf dem Design-Testing: Mit Werk­zeugen wie visuellen Tests, Edge-Case-Testings, Inter­aktions-Tests oder Acces­si­bility-Tests erreichen wir die Robustheit, die unsere UI-Elemente für die responsive Praxis mit echten Inhalten brauchen.