Die Erarbeitung eines Designsystems für digitale Produkte

Zur weiteren Recherche im Bezug auf Designsysteme arbeite ich mit dem Buch »Design Systems – A practical guide to creating design languages for digital products.« von Alla Kholmatova. Das Buch erscheint digital in zwei Hälften – eine Mitte des Jahres, die andere im September 2017. Anschließend liegt das Buch auch als Printausgabe vor.

Im Gesamten dient es als gute Grundlage, die die Umsetzung eines Designsystems in der Praxis zeigt. Mit vielen Beispielen von Unternehmen wie sipgate, TED, Airbnb oder FutureLearn wird verständlich, inwiefern sich die Erstellung der sowie die Arbeit mit Designsystemen von Team zu Team unterscheiden. Parameter wie z. B. die Team- und Projektgröße oder die generelle Arbeitsweise sind dafür entscheidend und müssen individuell gehandhabt werden.

In kleineren Teams hat der einzelne mehr Einblick und Verantwortung, in größeren müssen Verantwortlichkeiten eventuell anders verteilt werden.1 Zudem müssen die Designprinzipien für jeden verständlich sein. Das bedeutet entweder, dass im Team wirklich jeder weiß, welche Grundsätze gelten oder dass die fundamentale Gestaltungslinie eindeutig dokumentiert ist. Auch in der Anwendung der Systeme muss klar sein, ob die Regeln strikt oder eher locker eingehalten werden. Während beispielsweise bei Airbnb alles exakt festgelegt ist und die Pattern strikt angewendet werden müssen,2 sind bei dem kleineren Team von TED ein offener Umgang und mehr Flexibilität zu finde.3 Bei einer rigorosen Einhaltung der Regeln muss das Designsystem dementsprechend so gut konzipiert sein, dass die Gestaltung trotz Modularität nicht generisch wirkt.4

Bei der Dokumentation bzw. im allgemeinen Verständnis des jeweiligen Systems ist zudem das gemeinsame Sprachverständnis wichtig. So nennt sie das Beispiel eines Sequenz-Moduls.5 Dieses Modul sollte für jeden Sequenz heißen, nicht »Wizards Control« oder »Fancy Bubbles«.6 Des Weiteren sollten die Ausdrücke eindeutig so gewählt werden, dass man auch als Designer, der nicht bis in die Tiefen des Projekts involviert ist, weiß um welches Element es sich handelt. Neben dem klaren Einsatz des Elements werden Dopplungen durch Neugestaltung verhindert. Bestimmte Buttons wurden bei FutureLearn »Minions« genannt, ein großer Button heißt »Boss«7. Durch diese Benennung wird klar, dass es nur einen großen Button auf der Seite geben kann, da es nur einen Boss gibt. Diese metaphorische Benennung halte ich – insofern man für alle Elemente ähnliche Bezeichnungen finden kann – für sehr vorteilhaft. Ein weiteres Beispiel ist die »Whisperbox« sowie eine zugefügte Komponente namens »Boombox«. Schon im Wortlaut wird klar, welches der beiden zurückhaltend leise und welches prominent laut ist. Die Autorin schlägt generell vor sich vorzustellen, dass das Interface nicht visuell ist, sondern laut vorgelesen wird. Dadurch erkennt man schnell, ob man in Bezug auf die »Visual loudness scall« bereits ein Element der gleichen Lautstärke vorhanden ist.8

Kholmatova unterteilt die Pattern in zwei große Gruppen. Die funktionalen sowie die, die der Wahrnehmung zuzuordnen sind. Zur Unterscheidung kann man sich vorstellen, dass funktionale im HTML-, zweitere typischerweise im CSS-Code zu finden sind.9 Noch klarer macht sie es mit dem Beispiel eines Hauses, indem alle Möbel funktional dieselben sein können. Jeder hat etwa einen Tisch, ein Sofa oder ein Bett. Und doch macht der Stil den großen Unterschied, ob man sich in der Umgebung wohl oder sogar völlig fehl am Platz fühlt.

Insgesamt könnte ich noch unzählige weitere Absätze verfassen. Wenn man in diesem Bereich arbeitet, sind zwar einige Dinge nicht überraschend neu, dennoch fühlt es sich gut an sie zum einen gesammelt niedergeschrieben zu sehen und zum anderen einen Einblick in die Arbeit anderer zu bekommen. Vor allem die Methodik anderer Unternehmen zu verstehen, finde ich sehr spannend. Zudem gibt es natürlich trotzdem viele neue Erkenntnisse und das Buch hilft hervorragend die eigene Arbeitsweise zu analysieren und zu hinterfragen. Aus diesem Grund empfehle ich das Buch absolut jedem, der sich für Designsysteme interessiert.

Quellen
  1. Vgl. Kholmatova, Alla: »Design Systems«, Freiburg 2017, S. 144.
  2. Vgl. Ebd., S. 136.
  3. Vgl. Ebd., S. 140.
  4. Vgl. Ebd., S. 99.
  5. Vgl. Ebd., S. 29.
  6. Vgl. Ebd., Freiburg 2017, S. 30.
  7. Ebd., S. 114.
  8. Vgl. Ebd., S. 78.
  9. Vgl. Ebd., S. 27.