Zum Inhalt springen
Tags:
AlleGeneralAgileDesignDevelopment

Oops, zu "" haben wir keine Artikel.

Aber bewirb Dich doch einfach, wenn Du uns mehr davon erzählen möchtest! 🚀

    Search by

    Design System 101 – Was ist ein Design System?

    Von Mischa

    July 21, 2021

    2 min read

    In den letzten Jahren ist die Größe und Komplexität von Apps und Websites stark angestiegen. Hunderte von Seiten oder Screens sind daher keine Seltenheit mehr. Teams setzen daher vermehrt auf Design Systems um ihre Designs pflegbar und skalierbar zu machen.

    Definition

    Es gibt unterschiedliche Definitionen darüber was ein Design System ausmacht. Im Kern kann man sich aber folgende merken: Ein Design System ist eine Sammlung von Regeln um mit wiederverwendbaren Components und Pattern neue Designs zu erstellen.

    Bestandteile eines Design Systems

    Ein Design System kann viele unterschiedliche Bestandteile beinhalten. Am häufigsten besteht dieses in der Basis aus: Style Guide, Component Library und Pattern Library.

    Style Guide

    Ein Style Guide besteht aus mehreren Teilen, welche meistens der Brand Guide (Farben, Typographie, Logos, Abstände ...) und Editorial Guide (Voice of Tone und sprachliche Empfehlungen) sind.

    Damit nicht irgendwelche Farben oder Abstände innerhalb unserer Designs verwendet werden, ist es nötig eine bestimmte Auswahl in Sets zusammenzufassen. Die einzelnen Elemente der Sets werden Design Token genannt.

    Beispiel: Wir definieren in einer Tabelle die Farben für Primär, Sekundär, Danger, Succes, Warning und Info. Diese können wir dann in unseren Components verwenden.

    Style Guide

    Component Library

    Die Component Library stellt im vornherein bestimmte, wiederverwendbare UI Elemente zur Verfügung, welche die im Style Guide definierten Design Token verwenden.

    Häufig wird eine Website für die Component Library entwickelt, in der Designer und Developer mit den Components interagieren, sowie weitere Informationen wie Name, Beschreibung, Code Snippet, States, Beispiele usw. erhalten können.

    Dieser Bestandteil eines Design Systems wird von vielen mit einem Design System assoziiert.

    Beispiel: Die Farben des Style Guides können wir nun wunderbar verwenden um unterschiedliche Input und Button Varianten zu erstellen. Diese beiden Elemente machen aber noch kein fertiges Formular aus.

    Component Library

    Pattern Library

    Für viele hört ein Design System schon bei der Component Library auf, da einige Pattern dort bereits definiert oder erst im Development Prozess entwickelt werden.

    Der größte Unterschied zwischen den beiden Libraries ist jedoch folgender: Eine Component Library stellt individuelle UI Elemente zur Verfügung, eine Pattern Library kombiniert diese um daraus Layouts zu erstellen.

    Diese Gruppen (Pattern) können Content Strukturen, Layouts und/oder Templates sein.

    Beispiel: Die zuvor erstellten Components können wir nun in unterschiedlicher Reihenfolge arrangieren um z.B. ein Kontakt- oder Registrierungsformular zu kreieren. Beide Formulare nutzen hierbei die selben Elemente, jedoch sind diese anders angeordnet um den jeweiligen Zweck zu erfüllen.

    Contact and Signup Form

    Fazit

    Ein Design System besitzt viele Bestandteile die in Kombination und mit der richtigen Implementierung einen optimierten Workflow und konsistente Ergebnissen zur Folge hat. Material (Google) und Spectrum (Adobe) sind sehr gute Beispiele für funktionierende Design Systems.

    Jedoch ist die Pflege und stetige Weiterentwicklung sehr zeitintensiv und kann bei schlechter Umsetzung sogar bremsen. So ist ein Design System auch nicht für jedes Projekt eine geeignete Lösung.

    Wann es Sinn ergibt ein Design System zu verwenden und wann nicht, diskutieren wir in einem anderen Artikel.

    Geschrieben von

    Mischa (UX Engineer)

    Kreativer Kopf und Design System Lead dessen Lieblingsspruch “Ich liebe Diskussionen über schlechte UX und langweilige UI” ist.
    ← Vorheriger Post
    • Über uns
    • Jobs
    • Impressum
    • Rechtliche Hinweise
    ©2021 DEMV Systems GmbH