UI-Inventar für ein Design System

Was in der Vorlage steckt

Bevor ihr über ein Design System entscheidet, zählt ihr, was eure Website heute tatsächlich verwendet. Die Datei hat fünf Blätter:

• Anleitung: die Schritte und welche Seiten ihr am besten erfasst

• Farben: jede Farbe mit Fundstelle, Zweck, Entscheidung, ob sie bleibt, und einem Namen im System

• Schriften: Schriftart, Größe, Stärke und Fundstelle, zugeordnet zu wenigen Soll-Stilen wie „Überschrift 1“ oder „Text klein“

• Bauteile: gefundene Varianten von Buttons, Karten, Kopfbereichen, Formularen und weiteren Bauteilen, dazu das Soll

• Auswertung: Bestand, Soll und was wegfallen kann, dazu sechs Signale und ein Vorschlag für die passende Stufe

Die drei Stufen sind Styleguide, Bauteil-Bibliothek im Website-System und vollständiges Design System. Das Beispiel mit erfundenen Werten findet 31 Bauteil-Varianten, von denen 21 wegfallen können.

So nutzt ihr die Vorlage

Nehmt fünf Seiten: Startseite, eine Leistungsseite, eine Landingpage, die Karriereseite und einen Blogbeitrag. Das reicht meist, um die Spannweite zu sehen. Farben und Schriften lest ihr mit den Entwicklerwerkzeugen des Browsers oder einem Farbwähler aus. Entscheidet für jede Farbe und jeden Stil, ob sie bleiben, und legt für jedes Bauteil fest, wie viele Varianten ihr braucht.

Die Signale in der Auswertung sind ein Vorschlag von uns, abgeleitet aus Nielsen Norman Group, Figma und Brad Frost. Eine belegte Schwelle, ab der sich ein Design System lohnt, gibt es nicht. Die Datei ist kostenlos, ohne Anmeldung und nutzt keine Makros.

Häufige Fragen

Ab wann lohnt sich ein eigenes Design System?

Wenn mehrere Teams oder Agenturen über Jahre an mehreren digitalen Angeboten bauen. Für eine einzelne Unternehmenswebsite reicht meist ein Styleguide mit einer gepflegten Bauteil-Bibliothek im Website-System.

Wie lange dauert die Bestandsaufnahme?

Nach unserer Einschätzung einen Nachmittag bis wenige Tage, je nach Größe der Website.

Reicht eine Figma-Datei als Design System?

Für einen Styleguide und als Grundlage für eine Bauteil-Bibliothek ja. Ein vollständiges Design System lebt aber auch im Code oder im Website-System. Eine Figma-Bibliothek, die niemand in die Website überträgt, schafft keine einheitlichen Seiten.