Designsystem: Was es ist, warum und wie man es erstellt

Das Thema Designsysteme scheint bereits von allen Seiten betrachtet worden zu sein: Es gibt viele Artikel, Beiträge, Berichte und andere Materialien dazu Erstellen eines Designsystems. Dennoch hat jeder, der mit diesem Begriff in Berührung kommt, viele Fragen. Wir werden versuchen, die wichtigsten im Detail zu beantworten:

• Was ist ein Designsystem?
• Wofür ist das?

Was ist ein Designsystem?

Ein Designsystem ist eine Struktur, die visuelle Komponenten, eine Codebibliothek und Nutzungsrichtlinien umfasst.

Angehende Designer machen oft den Fehler, das Konzept zu vereinfachen, indem sie ein Designsystem nur als ein UI-Kit betrachten – ein Dokument, das grafische Oberflächenelemente, Typografie und Farben enthält.

Das Designsystem besteht aus drei Ebenen:

A UI-Kit ist die visuelle Sprache eines Produkts, für das ein Designsystem erstellt wird. Dies sind Farben, Schriftarten, Symbole, Schaltflächen, Aufzählungszeichen, Kippschalter, Schieberegler, Bilder, Animationen. Die Elemente variieren und hängen von den Besonderheiten des digitalen Produkts ab. Sie alle tragen dazu bei, den sichtbaren Teil der Benutzeroberfläche zu erstellen, mit dem der Benutzer interagiert.

Das Framework ist eine Codebibliothek, die für jedes dieser Elemente geschrieben wird, sowie Plugins für Animationen, Tags und Beschriftungen für die Navigation.

Richtlinien sind eine Reihe von Vorlagen und Regeln für die Verwendung von Elementen, die den Arbeitsprozess organisieren. Dank Richtlinien wird nicht ein Designer in einfache Aufgaben eingebunden, sondern ein Entwickler sofort.

Die Richtlinien legen beispielsweise die Parameter eines Popup-Fensters auf einer Website fest: Einzüge vom Text, die Position und Größe des Titels und des Textkörpers, einen Platz für eine Schaltfläche und wie das Fenster mit weniger oder aussehen wird mehr Text.

Arten von Designsystemen

Es gibt keine einheitliche Klassifizierung, aber Experten unterscheiden zwei Arten von Designsystemen – Open und Closed Source.

In Open-Source-Systemen kann jedes Unternehmen Materialien verwenden und sie für seine Projekte anpassen – Schaltflächenfarben, Schriftarten und Symbole ändern. Zum Beispiel in Ant Design, Human Interface Guidelines und Material Design-Systemen.

Closed-Source-Designsysteme werden normalerweise für ein bestimmtes Unternehmen oder Produkt erstellt. Hierbei handelt es sich entweder um vollständig geschlossene Materialien, die nur den Mitarbeitern zugänglich sind, oder um teilweise offene Materialien.

So erstellen Sie ein Designsystem

Die Entwicklung von Designsystemen basiert auf den Prinzipien des Atomic Design. Atomic Design ist eine Technik, die fünf Ebenen von Designelementen umfasst: Atome, Moleküle, Organismen, Muster und Seiten.

Struktur des Designsystems:

• Atome sind die kleinsten Komponenten: Schaltflächen, Symbole, Eingabefelder und Schriftarten.
• Moleküle sind eine Kombination aus mehreren einfachen Elementen: zwei Schaltflächen, einem Titel und einer Eingabezeile, einer Benachrichtigungsleiste, einem Kontrollkästchen und Text.
• Organismen sind vollständige Komponenten: Site-Header, Autorisierungsformular, Produktkarten und Benachrichtigungsbanner.
• Template – Seitenlayouts ohne Inhalt: Menü, Erscheinungsbild der Website.
• Seiten sind mit Inhalten gefüllte Seiten.

Der allgemeine Algorithmus sieht folgendermaßen aus:

• Wählen Sie Farben und Schriftarten aus, legen Sie modulare Raster fest und wählen Sie Animationen, Bilder und Töne aus.
• Erstellen Sie grundlegende Schnittstellenelemente.
• Kombinationen und Layouts von Designelementen.
• Erstellen Sie eine Liste von Elementen zusammen mit den Regeln. Geben Sie in der Richtlinie an, um welches Element es sich handelt, wo es eingesetzt wird und welche Aufgaben es löst.

Typischerweise werden Designsysteme nicht von Grund auf erstellt, sondern basieren auf bereits entwickeltem Material: UI-Kits, Richtlinien oder Markenbüchern.

Warum brauchen Sie ein Designsystem?

Wie bei jedem IT-Produkt ist es wichtig, die Frage zu beantworten: „Wozu dient ein Designsystem?“ Oder, wie einige Kollegen in der Werkstatt sagen: „Na und?“

Die Antwort auf diese Frage wird Ihnen helfen, den Wert des Produkts zu verstehen. Ein Teil davon lässt sich bereits aus dem erkennen, was wir oben beschrieben haben. Aber lassen Sie uns es aufschlüsseln und einen tieferen Blick darauf werfen.

Automation

Die Automatisierung bietet den offensichtlichsten Vorteil. Ein Designsystem hilft Ihnen, Abläufe zu automatisieren, sodass Sie Zeit für andere Aufgaben haben.

Iterativität

Die Möglichkeit, Änderungen an Designsystemelementen zu übernehmen und automatisch anzuwenden, ist ein wertvolles Werkzeug für ein Produktteam. Sie können an einem Ort schnell kosmetische oder sogar große Änderungen vornehmen. Auf diese Weise können Sie das Produkt jederzeit verbessern.

Konsistenz

Konsistenz besagt, dass die Objekte und Entitäten in einem Produkt, die dieselbe Funktion erfüllen, Einheit und Ähnlichkeit anstreben sollten.

Wenn wir vergleichbare Funktionen in einem Produkt verwenden, werden sie vertraut und praktisch: Wir verstehen instinktiv, wie die Schaltfläche funktioniert und aussieht und wo sie positioniert ist.

Wir hoffen, dass jeder aus dem Artikel etwas Wertvolles gelernt hat. Und wir waren wieder einmal davon überzeugt, dass die Arbeit an einem Artikel Wissen strukturiert und zu weiteren Studien motiviert.