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.

Corporate Design Manual

Referenzpunkt

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

Design System Struktur

Der Aufbau

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.

Ein Werkzeug

Design System Management

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.

Der Umgang

Als Designer*in

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.

Benefits

Darum in Design Systemen denken

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

Design System Inspiration

Lernen von den Grossen

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.

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.

Scroll Snap
On
Off