Designsysteme

Episode 01: Ordnung ist das halbe Leben.

Da wir unsere Designs nie dem Zufall überlassen und uns keine Fehler erlauben, arbeiten wir stets mit so genannten Design-Systemen. Diese Design-Systeme kann man sich als lebendes Dokument vorstellen, welches, basierend auf grundlegenden Elementen und Richtlinien, immer weiter ausgebaut werden kann und soll. Sie sind eine Kombination aus Styleguide und Parteien Library für unsere Entwickler. Die von den Designern erstellten Komponenten und Elemente werden von den Entwicklern gecodet und verknüpft. Die Arbeit von Designern und Entwicklern läuft hier Hand in Hand, in einem einzigen Dokument – True Source – dem Design-System…

Das Design-System soll eine, über verschiedene Applikationen, stimmige UI- und UX- Erfahrung sein.

Schon mal das Sprichwort „zu viele Köche verderben den Brei“ gehört? Wir bei Syndikat sind keine einfachen Köche, wir sind Sterne- und Michelin-Köche, die dir gemeinsam den aller besten Brei zaubern – und das alles dank der einfachsten Zutat… Richtig erraten – das Design System.

Jeder kennt die Situation, Kollege A erstellt einen gerundeten Button 2px runder, als den, den der Kollege B schon erstellt hatte – offensichtlich, weil sie kein gemeinsames Konstrukt haben. Durch dieses Problem, dass jeder Beteiligte individuell kleine Abweichungen derselben Komponente erstellt und skaliert, kann man sich gut vorstellen und nachvollziehen, dass es früher oder später in einem riesigen Durcheinander von ähnlichen aber nicht gleichen Komponenten endet. Dieses Problem kann man jedoch beheben, indem man, sobald man sich auf die fundamentalen Bausteine geeinigt hat, die Komponenten transparent in einem separaten Dokument, dem Design-System, ablegt.

Falls es nun einer Änderung am jeweiligen Design bedarf, ist es ein Kinderspiel in dieses Master-Dokument zu gehen und dort die ursprüngliche Komponente zu ändern. Die von den Entwicklern erstellte Verknüpfung sorgt dann automatisch dafür, dass die Komponenten sich nach einer Aktualisierung durch alle Projekte hindurch ändern. Somit beschert einem ein Design-System also nicht nur Klarheit und Struktur, sondern es spart auch immens viel Zeit, die für andere Tasks genutzt werden kann.

Grundlegende Elemente

Nachdem nun klar ist, wie ein solches Design-System funktioniert, ist es wichtig die grundlegenden Elemente eines Design-Systems klar zu definieren – inzwischen müsste ja klar sein, dass der wichtigste Teil zu Beginn des Design-Systems ansteht.

Zu den grundlegenden Elementen gehören:

Farbe

Es sollte eine bis drei Farben geben, welche hierarchisch in Primary und Sekundär Farben für interaktive Elemente abgestimmt werden. Verschiedene Abstufungen dieser Farben sorgen dann auch für mehr Flexibilität im Design. Ein wichtiger Hinweis ist hier, dass Farben wie Rot und Grün mit Bedacht für Interaktions-Elemente verwendet werden sollten, da Rot zum Beispiel oft als Signal und Grün als Bestätigung interpretiert wird.

Typografie

Die Auswahl der richtigen Schrift sollte auf einer Zielgruppen-Analyse basieren und unbedingt das Unternehmen widerspiegeln. Für das Design-System sind ein bis zwei verschiedene Schriftarten zu empfehlen, wobei eine davon die primäre sein sollte. Eine Schriftart reicht in vielen Fällen jedoch auch schon vollkommen aus, da man die Möglichkeit hat, mit verschiedenen Schriftgrößen und verschiedenen Schriftschnitten zu arbeiten, wie zum Beispiel Bold, Regular oder Light.

Abstände

Abstände wirken am besten, wenn man auch hier ein klares System verwendet und sich individuell darauf bezieht. Zu empfehlen ist hier ein 4er Raster, welches je nach Bedarf skaliert wird. So sollte man zum Beispiel einen Abstand, von 10px auf 8px oder 12px rücken.

Bildsprache

Unter der Bildsprache versteht man Illustration, Icons und Fotografien. Bei den Icons ist es hilfreich, sich auf die zuvor festgelegte Schrift zu beziehen. Benutzt man also eine sehr dünne Schrift funktionieren Icons mit einer Kontur besser als Icons, die gefüllt sind. Auch hier ist es wichtig darauf zu achten, dass man verschiedene Stile nicht miteinander vermischt. Man sollte sich von vornherein für einen entscheiden.

Basierend auf diesen Elementen wird das Design-System erstellt. So ergibt die Kombination aus der Primary Farbe, 14pt Schrift in Versalien und einem Icon, den primären Icon Button, bei dem je nach Bedarf der Text und das Icon individuell verändert werden kann. Komponenten können ab einem bestimmten Punkt mit anderen Komponenten zusammen neue Komponenten ergeben… Aber ok, genug erzählt! Du merkst schon, ein Design-System ist sehr komplex und man kann es nur jedem ans Herz legen: Benutzt Design-Systeme und vereinheitlicht eure Designelemente - Denn „Zeit ist Geld“.

Over and out, HM