Design System

Im Digitalen Zeitalter funktionieren diese CD-Manuals noch viel weniger. Dies aus verschiedenen Gründen.

New Workflow

CD-Manuals werden am Ende eines CD-Prozesses erstellt. Sie manifestieren das Endresultat, statt eine integrale und skalierbare Anwendungshilfe zu bleiben.

Teamwork

Das Design wurde ein Teil eines vielschichtigen in sich fliessenden Arbeitsprozesses. Wo endet Design und beginnt die Frontend-Programmierung und wie spielt das Backend mit? Ein ganzes Team oder mehrere Teams müssen zusammenarbeiten können.

Skalierbarkeit

Um adäquat auf die responsiven Inhalte, Komponenten, Weiterentwicklungen sowie Viewports zu reagieren wird ein Designsystem Modular aufgebaut.

Building Blocks (Atome)

Die Einzelnen Bestandteile aus Design und Technik werden definiert. Es spiegelt die Basis eines klassischen CD-Manuals.

Schrift, Farbe, Icons, Bilder, Buttons, etc.

Pattern Library (Module)

Aus den Atomen werden Module, Komponenten, Templates etc. erstellt. Daraus können ganze Webseiten zusammengebaut oder Ableitungen für Neuentwicklungen gefunden werden.

Rules (Principles)

Die Regeln aus Design, Animation, der technischen Implementation wie auch Regeln für die Editoren (Autoren) werden definiert.

Style Guide

Der Style Guide ist die Beschreibung, wie das Design System gebraucht und weitergebaut werden soll. Es fokussiert auf den Workflow für den Unterhalt und nicht das Produkt.

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. Dies ermöglicht es nachhaltig und teamübergreifend zu bleiben.

Orchestrieren

Wir müssen lernen, als Dirigent*in das Gestaltungsorchester zu leiten. Wir erstellen die visuellen Prinzipien und Regeln nicht das eigentliche Design.

Anatomie

Webseiten sind auf einer klaren Anatomie aufgebaut. Design Systeme bauen auf der gleichen Logik weiter.

Diese Module, Komponenten (Elemente) müssen individuell wie auch miteinander stimmig bleiben.

Responsiveness

Wir können nicht alle Viewport-Grössen und Seitentypen gestalten. Wir sind gezwungen Schemen zu erarbeiten, welche modular und responsive sind.

So werden nur die wichtigsten Seiten und Module gestaltet und danach als Templates und Komponenten in der Pattern Library abgelegt.

Teamwork

Webarbeit ist Teamarbeit. Jedes Projektteam hat ihren eignen Workflow. Die Anwendung innerhalb des Projektteams bleibt aber individuell. Ein Design System geht auf diesen Workflow ein.

Design Systeme müssen bei Projektbeginn in den Arbeitsprozess einfliessen. Dies bedeutet einen grösseren Initial-Aufwand. Dafür erhält man:

Skalierbarkeit

Die Modularität ermöglicht es vom MVP (minimal viable product) zur multifunktionaler Webseite zu wachsen.

Konsistenz

Ein Design System ermöglicht durch seine Struktur eine bessere Konsistenz von Design und Code über alle Anwendungen hinweg. Die Konsistenz liegt auch in der Sprache innerhalb der Teams über Namen, Module etc.

Gleichzeitigkeit

Design Systeme erlauben parallel von allen Arbeitsbereichen her zu arbeiten. Alle Füttern gemeinsam das System und wenden es an.

Geschwindigkeit

Ein funktionierendes Design System kann wie Bootstrap als Design-Library für Entwickler eingesetzt werden und ermöglicht ein deutlich schneller Umsetzung von Projekten.

Mir persönlich gefallen die Design-System-Webseiten, welche einem auf einer Metaebene abholen und nicht direkt mit den Building Blocks oder Pattern Library anfangen.