Kleine menschliche Figuren, die die Benutzeroberfläche eines Mobiltelefons bauen

Was ist ein Design System?

Ein Design System ist kein Style Guide, keine Designbibliothek für ein bestimmtes Programm oder ein Nachschlagewerk für Entwickler. Nein! Ein Design System verkörpert alle diese Punkte und noch viel mehr.
Es sollte die einzig wahre und zentrale Quelle sein, die alle Elemente einer Marke umfasst. Ausgehend von dieser kann ein Team dann Produkte gestalten, realisieren und entwickeln.
Diese Quelle beinhaltet folgendes:

  • Identität – z.B. Farben, Schriften, Bilder
  • Prinzipien – z.B. Markenwerte, Ziele, Visionen
  • Best Practices – z.B. Prozesse, Tools, UX Design Grundlagen

Aus diesen Punkten werden dann Komponenten und Regeln abgeleitet, auf die wiederum im Design- und Entwicklungsprozess zugegriffen werden kann.

Ein Design System ist also eine Sammlung an Nachschlagewerken, die aufeinander aufbauen und die mit der Realisierung von Produkten und durch die fortschreitende Technik ständig weiterentwickelt werden. Sie ist zentral abgelegt (digital) und für alle beteiligten Personen zugänglich.

Was ist ein Design System, Auflistung der Punkte

Was unterscheidet ein Design System von einem Style Guide?

Der Style Guide ist ein Teil eines Design Systems. Wie es der Name schon sagt, definiert er den Stil einer Marke, also Farben, Schriften, Icons usw. und den Umgang damit. Der Style Guide basiert auf den Werten, der Vision und der Mission einer Marke. Aus dem Style Guide wiederum werden in einem nächsten Schritt Komponenten und Patterns abgeleitet.

Früher war es die gängige Praxis, einen Style Guide primär für Printprodukte zu erstellen und wenn nötig ein kleines Kapitel den digitalen Produkten zu widmen. Dies lies beim Entwickeln viel Raum für Interpretationen offen.


Welchen Nutzen bringt ein Design System?

Ein Design System hat das Ziel den Graben zwischen Print- und digitalen Produkten mit einer gemeinsamen Sprache zu schliessen. Denn wenn wir bei dieser Analogie bleiben, so definiert der Style Guide das Alphabet, die Komponenten die Wörter und die Patterns die Aneinanderreihung von Wörtern zu Sätzen. Das System gibt ausserdem die Grammatik, also die Regeln zur Anwendung der Sprache vor.

Diese Regeln können mehr oder weniger strikt definiert werden. Manche Firmen erstellen Design Guides, bei denen jedes kleinste Detail genaustens erfasst und beschrieben wird. Andere hingegen definieren eine Art Spielwiese mit gegebenen Eckpfeilern, zwischen denen sich das Designteam frei bewegen kann. Hier gilt es, den richtigen Mittelweg zu finden.


Braucht Ihr Unternehmen ein Design System?

Jein. Je nach Grösse und Wachstum Ihres Unternehmens kann es durchaus Sinn machen, in ein Design System zu investieren. Auch Startups profitieren von einer frühzeitigen Anwendung eines Design Systems. Produkte können so einfacher skaliert und dem Wachstum der Firma angepasst werden.

Es gilt jedoch zu beachten, dass ein Design System gepflegt werden muss. Grosse Unternehmen wie IBM, Airbnb oder Uber behandeln ihre Design Systeme als eigene Produkte und verfügen über ganze Teams, die für deren Unterhalt zuständig sind.

IBM Carbon Design System

Für kleinere Betriebe macht dieser Aufwand keinen Sinn. Trotzdem ist es wichtig, die Identität, die Prinzipien und die Best Practices Ihrer Marke zu definieren. Nur so kann eine einheitliche und positive Wahrnehmung Ihrer Marke von Kunden wie auch von Ihren Mitarbeitern erreicht werden.

Beispiele von Designsystemen:

Google Material Design
Shopify Polaris
IBM Carbon Design System
Apple Human Interface Guidelines

Der passende Umfang für Ihr Unternehmen

Bei Artd Webdesign GmbH bedienen wir uns den umfassenden Prinzipien von Design Systemen und brechen diese auf Ihre individuellen Bedürfnisse herunter. So entwickeln wir aus vorhandenen Brand Guidelines neue Komponenten und Regeln, die uns helfen, den Kern Ihrer Marke bei der Entwicklung einer neuen Website beizubehalten und nach aussen zu transportieren.

Oder wir helfen Ihnen, das Erscheinungsbild Ihrer Marke von Grund auf neu aufzubauen.

Artd Webdesign Design System

Quellen:

Bild "Design Systeme"
Bild "IBM Carbon Design System"