Design System Management

Ein Werkzeug

Um Design Systeme als Arbeitswerkzeuge nutzbar zu machen, müssen sie verschiedene Grundaspekte beinhalten.

Single Source of Truth

Damit ein Design System funktioniert, muss es Online sein und als einzige Quelle von Richtlinien dienen. Editierbarkeit muss passend zum Unternehmen geregelt werden.

Element Snippets

Nebst den visuellen Abbildungen und der Beschreibung von Elementen, sollte der dazugehörige Code wie auch allfällige Designfiles verfügbar sein, um direkt damit zu arbeiten. Sind Animationen, Effekte oder Abfolgen vorhanden sind diese ebenso zu zeigen.

Overview & Guidelines

Die Struktur von Atomen, Elementen, Modulen, Komponenten und Templates sollte sich logisch abgebildet finden. Terminologie wie Abhängigkeiten sollten klar geregelt sein. Wer, wann und wie Anpassungen und Ergänzungen macht, sollte verständlich und sauber beschrieben sein.

Agnostic

Ein Design System sollte unwissend über die Anwendung bleiben. Also es sollte keine Rolle spielen mit welchem Design-Tool, welcher JS-Library oder Framework gearbeitet wird. Der Fokus steht auf den Spielregeln der Gestaltung und des Brands selbst. Dies ermöglicht es nachhaltig und teamübergreifend zu bleiben.

Element Snippet visuell erklärt. Die verschiedenen Bereiche, die pro Element in einem Design System abgebildet werden sollen.
@ Webdesign Essentials

Online-DSM-Tools

InVision: Design System Manager

UX-Pin: Design System

Frontify: Brand Management

Patternlab: Design System Builder

Vertiefe dich ins ganze Kapitel

Design System