Design-Systeme – ein Überblick

UX-Designer achten auf beste User Experience, also die Erfahrung, die der Benutzer mit dem jeweiligen Produkt macht. Das UI, also das User Interface, spielt dabei natürlich eine zentrale Rolle, denn darüber kommuniziert das Produkt mit dem Benutzer. Weiter sind aber noch Code-Entwickler beteiligt, um die Oberfläche im Hintergrund mit Leben zu füllen – und ein Kunde wartet in der Regel auch noch auf das Projekt. Wie diese verschiedenen Gruppen einfacher zusammenarbeiten, lesen Sie hier. 

Das Wichtigste in Kürze 

• Design-Systeme vereinfachen Co-Working stark. 
• Zur schnelleren Bearbeitung werden Bibliothek genutzt. 
• Viel obligatorische Arbeit wie Exporte wird abgenommen. 

Die größten Design-Systeme 

Natürlich gibt es mittlerweile einige Systeme, die alle auch ihre Aufgabe erledigen. Unter den Entwicklern haben sich aber eine Hand voll herauskristallisiert, die nicht nur die Pflicht, sondern auch die Kür bestens erledigen. 

Sketch 

Der meistgenutzte Vertreter der UX/UI-Tools ist Sketch. Es lässt sich intuitiv und effizient nutzen, und die Einarbeitung dauert in der Regel nicht länger als einen Tag. Es bietet eine schlanke Oberfläche und alles Wichtige, was für die UI-Gestaltung notwendig ist. Die Bildbearbeitung selbst überlässt es lieber anderen Programmen wie Photoshop, was aber auch genau seinem Zweck entspricht. Zwar ist eine kleinere Bildbearbeitung möglich, liegt aber nicht im Fokus. 

• Mit wenigen Klicks lassen sich multiple Artboards erstellen, um ein Design für die verschiedenen Endgeräte zu entwickeln. 
• Sie können ebenso Grids und Layouts definieren, die Sie einfach auf andere Artboards übertragen und so schneller und effizienter arbeiten. 
• Außerdem sind alle Formen und Schriften vektorbasiert, damit sie sich einfach an die UI anpassen können. 

Für Sketch stehen auch viele Plugins zur Verfügung, mit denen Sie das Programm speziell auf Ihre Bedürfnisse und Prozesse anpassen können. So vergeht weniger Zeit vom Plan bis zur Umsetzung. 

Figma 

Figma ist komplett online-basiert und erleichtert so die Zusammenarbeit von verschiedenen Personen stark. Gerade wenn verschiedene Designer an einem bestimmten Bereich eines Projekts arbeiten, kommt es immer wieder vor, dass jeder für sich ein tolles Ergebnis hat. Werden die Ergebnisse aber zusammengeführt, ergeben sich immer Unstimmigkeiten, die dann durch mühselige Kleinarbeiten angepasst werden müssen. 

Figma wurde von Designern für Designer entwickelt, und diesen Hintergrund werden Sie stark bei der Arbeit bemerken. Die Oberfläche ist ähnlich wie in anderen Tools aufgebaut, so dass eine große Einarbeitung entfällt. Die Buttons und Shortcuts ähneln sich so sehr, dass Umsteiger von Sketch oder Keynote intuitiv arbeiten können. 

Im Vordergrund steht hier das einfache Co-Working. Keiner beeinflusst den anderen, wenn Sie ein Element einer Kollegin oder eines Kollegen brauchen, scrollen Sie einfach an die entsprechende Stelle und kopieren es. 

Alle Personen, die nicht am Design beteiligt sind, können sich jederzeit über den Stand erkundigen. Da alles online verfügbar ist, müssen sich Manager, Kunden etc. einfach einloggen und sehen das Ergebnis. Das ständige PDFs oder PNGs erstellen und versenden, alles auf dem aktuellsten Stand halten, entfällt. Als Designer können Sie sich einfach auf Ihre Arbeit konzentrieren. 

Adobe XD 

Mit Adobe XD sollte ein Angriff auf etablierte Designtools wie Sketch unternommen werden. Das hat zwar nur mäßig funktioniert, da Sketch immer noch unangefochtener Champion ist – schlecht macht XD seine Sache jedoch nicht. 

❗ Gut zu wissen: Adobe XD wurde komplett neu geschrieben, anstatt immer wieder geflickt zu werden. Dank neuester Unterbau-Technologie bemerkt man auch sinnvolle Neuerungen wie Split-Screen auf Macs und eine wesentlich höhere Geschwindigkeit. Viele Änderungen übernimmt Adobe aus der Community, denn sie sind tatsächlich immer mit einem Ohr am Kunden. Das steigert die Beliebtheit natürlich enorm, denn so werden wirklich Features von Profis vorgeschlagen.

Auch XD arbeitet mit vektor-basierten Ansichten, die sich per copy&paste aus Illustrator holen lassen. Diese eingefügten Designs lassen sich dann in verschiedene Mockups direkt einfügen, so dass Sie einen realistischeren Blick auf das Produkt bekommen. So können Sie Ihr Produkt bereits in der ersten Entwicklungsphase direkt auf verschiedenen Smartphone- oder Tablet-Browsern „darstellen“ um ein besseres Gefühl zu bekommen.

Sie können bestimmte Elemente einfach für Entwickler freigeben, wie Größe, Farbe und Schriftart. Diese können sich die Elemente dann kopieren und für ihre Zwecke nutzen. So arbeiten alle Beteiligten immer mit den gleichen Daten.

Über die einfache Funktion „Design freigeben“ erstellen Sie dann das fertige Ergebnis und schicken es in die Adobe-Cloud, damit sich andere Beteiligte und natürlich auch der Kunde, den Stand der Dinge ansehen kann. Diese Funktion ist sehr praktisch, da Sie wie bei Figma, nicht immer wieder Ihren Arbeitsstand exportieren müssen (das können Sie auch weiterhin, in Einzelabschnitten oder als Ganzes), um ihn dann zu verteilen. Senden Sie einfach den Link an den richtigen Empfänger und teilen Sie Ihr Ergebnis schneller und vollständig.

Fazit

Design-Systeme erleichtern den Arbeitsalltag aller Beteiligten und alle können sich mehr auf ihr eigentliches Tagesgeschäft konzentrieren. Sie nehmen Ihnen zeitintensive und obligatorische Arbeit wie mühsame Exporte, Zusammenstellung von Präsentationen oder Abgleiche zwischen verschiedenen Designständen in unterschiedlichen Oberflächen desselben Produkts ab. Wenn Sie also bisher ohne Design-System arbeiten, sollten Sie ihnen definitiv eine Chance geben.