Loading...
Design System
Work in Progress

Design System

Modular. Responsive. Kollaborativ. Die logische Konsequenz der digitalen Transformation unserer Gesellschaft. Ein Design System hilft, der Komplexität des Digitalisierungsprozesses besser zu begegnen.
Referenzpunkt

Corporate Design Manual

In der analogen Welt dienten statische Corporate Design Manuals als Gestaltungsgrundlage für den einheitlichen Markenauftritt.

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.

Workflow Grafik, welche zeigt, das Design System ins Zentrum des Arbeitsprozesses nimmt und alle Teammitglieder von Informations-Architekten über Design, Frontend bis Backend mitarbeiten können.
© Webdesign Essentials
Workflow Grafik, welche zeigt, das Design System ins Zentrum des Arbeitsprozesses nimmt und alle Teammitglieder von Informations-Architekten über Design, Frontend bis Backend mitarbeiten können.
1

Design System Inspirations

Style Guides.io

Designerlynx

Der Aufbau

Design System Struktur

Ein Design System baut auf folgenden Komponenten auf.

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.

Aufteilung der verschiedenen Aspekte einer Design-System-Struktur.
© Webdesign Essentials
Aufteilung der verschiedenen Aspekte einer Design-System-Struktur.
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. 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
Element Snippet visuell erklärt. Die verschiedenen Bereiche, die pro Element in einem Design System abgebildet werden sollen.
4

Online-DSM-Tools

InVision: Design System Manager

UX-Pin: Design System

Frontify: Brand Management

Patternlab: Design System Builder

Als Designer*in

Der Umgang

Designer*innen müssen umdenken um besser an Design Systemen arbeiten zu können.

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.

© Coding Tech - Brad Frost Keynote - Always Good to watch and read!
Darum in Design Systemen denken

Benefits

Warum lohnt es sich all diesen Aufwand zu betreiben?

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.

© InVision - DSM Ad
5
Lernen von den Grossen

Design System Inspiration

Design Systeme sind vielschichtig und den Umgang damit zu lernen ist nicht einfach.

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.

7

Design System Websites

Google: Material Design

IBM: Living Language

Microsoft: Fluent Design System

Salesforce: Lightning Design System

Shopify: Polaris

Trello: Nacho

Atlassian: Design

Apple: Human Interface Guidelines

In Design Systemen denken hilft der Komplexität gerecht zu werden.

Für Designer*innen ist es ein Umdenken. Weg von der Detailversessenheit einer Printproduktion, hin zu einer Design Orchestrierung. Vom Leadsänger zum Dirigent.

Design Approaches

Viele Design-Begriffe sind von temporärer Natur und werden unterschiedlich ausgelegt.