WebWissen: Designsysteme

Die Entwicklung digitaler Produkte oder der Relaunch einer Website sind komplexe Prozesse. Viele Menschen und Ressourcen sind beteiligt - da kann es natürlich vorkommen, dass das Design sich an der ein oder anderen Stelle „verselbstständigt“. ;-) Deswegen kommt bei uns ein Design System ins Spiel bzw. die Projekte. Es hilft dabei, den Design-Prozess zu optimieren, Fehlerquellen zu minimieren und Feedbackschleifen in der Entwicklung zu reduzieren. Wie genau das geht, zeigt Design-Stratege Michi im neuen Webwissen.

Das Look and Feel einer Marke soll immer einheitlich gestaltet sein und an allen Punkten zueinander passen. Manche globalen Elemente müssen zum Beispiel auch immer genau gleich sein. Damit hier eine gute Übersicht gegeben ist und nicht alle Beteiligten an vielen Stellen Informationen abspeichern müssen, nutzen wir Designsysteme als gemeinsames Nachschlagewerk und wichtige Ressource.

So erstellst Du ein Designsystem

Zuerst werden Screens mit dem aktuellen CD erstellt, um ein Look and Feel zu erzeugen und um den Gesamteindruck bewerten zu können. Erst nachdem einige bzw. die wichtigsten Seitentypen fertig gestaltet sind, werden die einzelnen Elemente in Komponenten heruntergebrochen. Dabei nutzen wir das Atomic Design Prinzip von Brad Frost.

Atomic Design – Eine Methode zu Erstellung von Designsystemem nach Brad Frost
Atomic Design – Eine Methode zu Erstellung von Designsystemem nach Brad Frost, die sich in fünf Ebenen unterteilt.

Dann werden die Bausteine (hier Atome, Moleküle und Organismen genannt) als Symbole in einer Layout Software (wir nutzen Sketch oder Figma) angelegt. Sie werden also als Instanzen in den Templates und Screen Designs eingebettet. Der Vorteil der Layout Software ist: Sollte sich bspw. die Buttonfarbe ändern, weil sie nicht den Accessibility-Standards entspricht, musst Du sie nur im Symbol in der Software ändern. Die Änderung wird in allen Instanzen automatisch übernommen und angepasst. Also zum Beispiel auch für unterschiedliche Websites oder Produkte. Das beschleunigt den Design Prozess erheblich, da nicht alles einzeln angefasst werden muss. Auch für Typografie kann dieses Prinzip angewandt werden. Jede Headline, Subheadline, Fließtext etc. ist als Symbol definiert und kann in den Instanzen mit dem gewünschten Text überschrieben werden. Der Container ändert sich dann automatisch, zum Beispiel in der Höhe.

Ein Designsystem für alle(s)

Das Design System kann dann von allen Design-Verantwortlichen genutzt werden, um damit einheitliche Touchpoints sicherzustellen. Als einfaches Beispiel: Ein Unternehmen hat eine oder auch mehrere Websites, eine App und Social Media Profile. Alle Produkte nutzen Buttons. Bei jedem Produkt können verschiedene Personen verantwortlich für das Design sein. Damit dieser Button in allen Produkten einheitlich erscheint, wird dieser im Design System einmalig definiert. Für den Design-Prozess kannst Du mit Deinem Team auf ein Design Tool (Adobe XD, Figma, Sketch, etc.) einigen und mit shared Libraries arbeiten. So muss nicht jedes Element neu gebaut werden, sondern kann per Drag-and-Drop aus der Library gezogen werden.

Die Pattern Library

Die Pattern Library selbst ist ein Produkt, das andere digitale Produkte mit Informationen versorgt. Wir nutzen Storybook als Tool dafür, es ist der Link zwischen Design und Frontend. In der Pattern Library werden die UI-Elemente dynamisch und „zum Leben erweckt“. Man kann Zeplin direkt an Storybook anbinden mit dem Feature „Connected Components“. In Storybook kannst Du die UI-Elemente auf Interaktivität, Verhalten, Accessibility und Responsiveness testen. Und für das Entwicklungsteam ist hier auch sehr praktisch, dass der Code aus Storybook wiederverwertet werden kann.

Beispiele einheitlich benannte UI Elemente in Storybook
Wichtig ist, dass die UI-Elemente konsistent benannt werden. Wir gruppieren und benennen zum Beispiel nach dem Atomic Design Prinzip.

Hilfreiche Design Tokens

Um die Kontrolle über dein Design System zu behalten, eignen sich Design Tokens hervorragend. Design Tokens sind Werte, die Farben, Abstände und Schrift definieren. Die Werte werden einmal zentral definiert und können von dort gepflegt werden. Wir nutzen dafür Zeplin.

Festgelegte Werte als Orientierung- Design Tokens Beispiele
Beispiele festgelegte Design Tokens in Zeplin.
Festgelegte Abstände Beispiele in Zeplin
Für Abstände nutzen wir ebenfalls ein eigens festgelegtes System mit konsistenten Werten. Auch das kann in Zeplin definiert werden.

Optimierte Typografie mit der Fluid Type Scale

Innerhalb unseres Design Systems verwenden wir außerdem die Fluid Type Scale. Hier wird einmal die kleinste Fließtext-Schriftgröße für mobile (320px) und die größte Fließtext-Schriftgröße für Desktop (1440px) definiert. Alle Schriftgrößen für Screens dazwischen werden nachher automatisch im Frontend berechnet und ausgegeben. Somit nutzt jede Screenbreite automatisch die ideale Schriftgröße. Der Aufwand in der Entwicklung ist deutlich geringer und das Ergebnis qualitativ besser, als wenn alles einzeln angefasst wird. Mehr Informationen dazu und ein hilfreiches Tool zum Berechnen der verschiedenen typografischen Elemente findest Du hier.

Bei unseren Projekten darf ein Design System nicht mehr fehlen

Das Aufsetzen eines Design Systems ist natürlich erstmal etwas Arbeit – spart ab einer gewissen Projekt und Teamgröße aber später einiges an Aufwand und macht den Design Prozess um einiges flexibler und übersichtlicher. Personen aus anderen Team können sich daran auch praktischerweise bedienen und das Design auch für Inhalte auf Social Media oder im Newsletter verwenden. Außerdem kann es jederzeit erweitert werden und sich mit digitalen Produkten und CDs mitentwickeln.

Was sind Deine Erfahrungen mit Designsystemen? Wir tauschen uns gerne mit Dir dazu in den Kommentaren oder beim nächsten #nmfka aus.

Alle Beiträge von Michael

Unsere meistgelesenen Beiträge

Vier Jahre Chromebook: Ein Erfahrungsbericht

Google Chromebook
|
Gute 25 Jahre PC-Nutzung - von Anfang an mit Windows. Dann raucht im wahrsten Sinne des Wortes mein teures und gar nicht so altes Lenovo-Notebook ab. Und ich bestelle mir einfach ein Chromebook und bin schneller weg aus der Windows-Welt, als ich es für möglich gehalten hätte. VierJahre ist das nun her - und ich habe zwischendurch immer wieder über meine Erfahrungen mit dem Chromebook berichtet.