Egal, wie groß das Projekt ist. Mit einem Design System an der Hand ist es einfacher, es umzusetzen – vor allem in den Anfangsphasen des Projekts.

Bei Ackee konzentrieren wir uns seit geraumer Zeit auf die Kohärenz der Prozesse, und dank eines Design Systems ist unsere Arbeit transparenter und stabiler geworden. Deshalb haben wir jetzt deutlich mehr Zeit, um komplexe Probleme für unsere Kunden zu lösen. Und im Entwicklungsteam gibt es jetzt klare, einheitliche Regeln der Zusammenarbeit.

Wie spart ein Design System also Zeit, Energie und Geld?

Design System? Was ist das?

Ein Design System ist ein komplexer Satz von UI- und UX-Standards, deren Zweck es ist, Designs in wiederverwendbaren Komponenten, Muster und verbindliche Vorgehensweisen zu organisieren. Diese Standards werden aufgestellt, um die Arbeit an einem digitalen Produkt für alle am Projekt Beteiligten einfacher und transparenter zu machen.

Ein Design System ist nicht nur eine Bibliothek von Farben, Schriftarten oder Schaltflächen. Es ist die Art und Weise, wie der Designer an das Projekt herangeht, und dieser Ansatz ist jedes Mal einzigartig. Seine Einbindung ist während des gesamten Lebenszyklus des Produkts erforderlich, vom ersten Kontakt mit dem Kunden bis zum fertigen Produkt und auch während der anschließenden Zusammenarbeit.

Es kann vorkommen, dass nach der Übergabe des Projekts ein anderes Designer Team daran arbeitet – aus diesem Grund ist es so wichtig, von Anfang an ein gut vorbereitetes Design System zu haben. Es hilft sowohl dem Kunden als auch den anderen Designern, die weitere Entwicklung des Produkts stringent fortzuführen, ohne dass das Design seine Identität verliert.

Wie hilft uns das Design System?

• Das Design System beschleunigt die Arbeit von Designern und Entwicklern, weil man damit Vorgänge effizient replizieren kann. 
• Es erleichtert die anfängliche Arbeit der Designer und ermöglicht es ihnen, sich auf komplexere und wichtigere Themen zu konzentrieren.
• Dadurch, dass die Form der Zusammenarbeit jetzt definiert ist, schafft es eine einheitliche “Sprache” zwischen den Teams von Entwicklern, Designern, Projektmanagern und allen anderen Beteiligten.
• Mit einem Design System entstehen visuell einheitliche Produkte, was auch für die Entwicklung neuer Funktionen wichtig ist.
• Ein Design System ist bei uns fester Bestandteil aller internen Schulungen und wird auch für Kunden-Trainings verwendet.

Wann sollte man (nicht) mit der Erstellung eines Design Systems beginnen?

Zu Beginn wollen wir herausfinden, wie groß und wie komplex das Projekt ist, mit dem wir es zu tun haben. Dann entscheiden wir, ob es sinnvoll ist, ein Design System aufzubauen – und in welchem Umfang. Handelt es sich um ein einmaliges Projekt oder eine einmalige Veranstaltung ohne Fortsetzung, ist es nicht nötig, ein spezielles Design System zu erstellen.

Die Aufgabe der UI- und UX-Designer besteht darin, den größeren Kontext zu verstehen und nicht nur die grundlegenden technischen Aspekte zu betrachten. Vielmehr geht es darum, die Art und Weise des Projektmanagements bzw. die Zusammenarbeit aller Teams bei der Projektarbeit zu überblicken.

Deshalb ist eine gute Kommunikation mit dem Entwickler-Team notwendig, um sich über die Art und Weise zu einigen, wie das Design System aufgebaut werden soll. Mit diesem Schritt vermeiden Sie viele Probleme, die in späteren Entwicklungsphasen entstehen können. 

Ein weiterer Bestandteil des Design Systems ist übrigens das Festlegen interner Prozesse.

Schnelles Design System by Ackee

Design Systeme, die man als Inspiration im Internet findet, wurden meist für große Projekte entwickelt, für die es ein eigenes Designer-Team oder zumindest Verantwortliche gibt, die sich um dessen Pflege kümmern können – zum Beispiel für Airbnb, Apple oder Google. Diese Systeme bestehen aus ausgeklügelten und komplexen Prozessen, Regeln und weiteren Entwicklungsbestandteilen.

Bei Ackee haben wir meist nur ein bis drei Monate für das Design eines Projekts zur Verfügung. Da bleibt keine Zeit für ein so umfassendes Design System. Trotzdem ist es uns gelungen, diese übliche und sinnvolle Vorgehensweise auf unsere Projekte anzupassen und sie zu automatisieren. Wir haben eine vereinfachte Version des Design Systems in Form eines Templates aufgebaut, mit dem schnelles und effizientes Entwickeln möglich wird. 

Bedenken Sie bitte, dass ein Design System Teil eines komplexeren Prozesses ist, der auch unsere Entwicklungsprinzipien einschließt und alle Bestandteile miteinander verbindet:

• Ein gründliches Verständnis der Bedürfnisse des Kunden und der Nutzer
• Das Erstellen eines Wireframe-Prototyps für das Produkt
• Das Erstellen eines Design Systems
• Kommunikation und Übergabe zwischen allen beteiligten Teams
• Kontrolle der implementierten Lösung

Atomic Design vs. Ackee Atomic

Sehr häufig wird das Atomic Design System verwendet. Es hat eine klar definierte Logik für den Aufbau von Design Systemen. Es besteht aus Atomen, Molekülen, Organismen, Mustern und Seiten - was sich schon nach einer ganzen Menge anhört, oder?

Die Definition eines solchen Systems erfordert viele (redundante) Schritte. Die Struktur ist so komplex, dass es oft nicht sinnvoll oder gar unmöglich ist, sie zu verwenden. Allein die Auswahl der Elemente, die wir verwenden möchten, würde uns sehr viel Zeit kosten. Ebenso die anschließende Präsentation dieses “Systemmonsters” bei den Entwicklern – ganz zu schweigen von seiner Anwendung – wäre viel zu langwierig und damit zu teuer.

Deshalb haben wir bei Ackee nur die wesentlichen Bestandteile ausgewählt. Daraus haben wir ein Template erstellt, das wir für jedes Projekt verwenden. Dieses Template haben wir in enger Zusammenarbeit mit den Entwickler-Teams aufgebaut – mit dem Frontend Team, den Projektmanagern und allen anderen Teams. 

Das ursprüngliche Atomic Design haben wir um zwei Abschnitte gekürzt und daraus Ackee Atomic (AA) mit der folgenden Struktur erstellt: Token, Komponenten und Layout. Für kurzfristige Projekte ist das alles, was wir brauchen. Daraus können wir natürlich jederzeit auch ein Design System für größere Projekte mit langfristiger, kontinuierlicher Entwicklung aufbauen.

Token: Grundbausteine des Design Systems

Ganz gleich, welche Design Software wir verwenden – im Template haben wir festgelegt, wie die Komponenten organisiert und benannt werden. So übergibt jeder Designer seine Arbeit immer in der gleichen bekannten und vertrauten Struktur an das Entwickler-Team.

Diese Token sind die Basis jedes Design Systems. Ihre Logik bleibt immer gleich:

• Farben und deren Hierarchie
• Textstile
• Namenskonventionen für Komponenten und deren Zustände
• Exportierbare Assets wie Logos, Fonts, Farben, Icons und Bilder
• Exportierbares App Icon
• Vorlage für Google Play und AppStore-Screenshots

Das Erstellen der Token geschieht zu dem frühen Moment im Designprozess, in dem bei Entwicklern und Designern immer Chaos herrscht. Bei uns geht es dabei oft um Farben und Textstile. Es ist wichtig, diese gut vorbereitet zu haben für den Fall, dass wir später die Farben im gesamten System ändern müssen.

Falls der Kunde später möchte, dass die App einen dark Mode erhält, können wir dies dank der vordefinierten Farben im Design System mit ein paar Klicks erledigen. Andernfalls müssten wir das Projekt komplett neu starten, was viel Zeit und Arbeit sowohl auf Seiten des Designs als auch der Entwicklung erfordern würde. 

Je nach Bedarf können wir auch die Layout Elevation, die Rundung der Ecken und andere Teile des Designs hinzufügen, die selbst keine Komponenten sind, sondern als Bausteine für sie dienen.

Bei Komponenten, die sich aus bereits definierten Token zusammensetzen, haben wir meist freie Hand - jeder weiß, wie man eine Schaltfläche, ein Textfeld oder ein modales Fenster gestaltet. Ein gewöhnlicher Button zum Beispiel besteht aus Tokens wie Hintergrundfarbe und Textstil mit Farbe und Eckenradius. Das ergibt eine spezifische Komponente, die wir dem Artboard "Komponenten" hinzufügen können, wo wir auch ihre verschiedenen Zustände definieren. Dabei ist es wichtig, die vordefinierte Struktur der Artboards und die Benennungskonvention einzuhalten.

Design System: mehr als eine Nasenlänge voraus

Mit unserem Design System haben wir die Komplexität von Design um etwa 70 Prozent reduziert. Dadurch ist es viel einfacher, jungen Designern, Entwicklern und neuen Kollegen zu erklären, wie wir arbeiten. Eine einheitliche Kommunikation und gemeinsame Prozesse zwischen den Teams helfen dabei, Fragen wie "Wo soll ich nach Icons suchen, wenn ihr mir keinen Link dafür geschickt habt?", "Wie sieht eine Fehlermeldung aus?" oder "Gibt es definierte Textstile?" zu vermeiden und vieles mehr…

Das Design System ist ein integraler Bestandteil der meisten unserer Projekte. Unsere Arbeit besteht nicht nur aus der Übergabe der fertigen Designs. Es geht auch darum, Prozesse zu schaffen, die diese Übergabe einfacher und reibungsloser gestalten. Deshalb ist es wichtig, diese Prozesse zu automatisieren, sie zu pflegen und immer ein paar Schritte vorauszudenken. Mit einem solchen Design System im Hinterkopf können wir unglaublich viel Zeit sparen.