Viele Kunden fragen sich, was ein Designsystem von einer Identität oder CI unterscheidet. Die kurze Antwort: Ein Designsystem enthält zusätzliche Regeln und flexible Anwendungsbeispiele, die euer Design fit für die Zukunft machen.
Wenn ihr über ein eine Corporate Identity (CI) nachdenkt, kommen euch sicher schnell einige Elemente in den Sinn: Ein Logo, eine oder mehrere Schriften, eine Farbauswahl und passende Layouts. Das sind die klassischen Elemente eines Markendesigns und gehören zu jedem Branding-Projekt dazu.
Ein Designsystem geht noch einen Schritt weiter. Statt statischer Elemente legt es eine Logik fest, wie die einzelnen Bestandteile kombiniert erweitert werden können. Ein robustes Designsystem erlaubt es Designern, die Identität anschließend auf verschiedene Bildschirmgrößen und alle denkbaren Anwendungsbereiche zu erweitern.
Woher der Begriff stammt
Die Idee einen Designsystems ist noch relativ neu, sie entstammt einem Buch über User Interfaces des Autors Brad Frost. In „Atomic Design” hatte Frost zum Umdenken über den Designprozess aufgefordert. Er kritisierte, dass Designer oftmals vom Ende her denken und zu oft für fertige Endanwendungen gestaltet, anstatt zunächst die Bestandteile eines Designs zu definieren, also Buttons, Textfelder, usw. Frost argumentierte, dass zunächst die kleinsten, „atomaren” Bestandteile eines Designs festgelegt werden sollten. So wird ein Design insgesamt kohärenter und flexibler — ohne statisch und langweilig zu sein.
Die Ideen aus „Atomic Design” sind über die Jahre zu einem Credo der Gestaltungswelt geworden. Statt in statischen Designs denkt ein moderner Designer in Systemen, Hierarchieren und Elementen, wie Schriftgrößen, Farben und Farbvariationen oder interaktiven Bestandteilen. Dadurch erschaffen sie eine Logik, mit dem eure Designs auf Geräten aller Art funktionieren und wiedererkennbar sind.
Letzteres ist natürlich im Zusammenhang mit Marken und Identitäten besonders wichtig — schließlich geht es drum, einprägsam und wiedererkennbar zu sein. Aus dem gleichen Grund haben verschiedene internationale Konzerne in den vergangenen Jahren in Designsysteme investiert, zu den bekanntesten Beispielen gehören das Designsystem von Porsche, IBMs Carbon Design oder das Uber Design System.
Wer ein Designsystem braucht
Ob ein Designsystem für euch Sinn ergibt, kommt ganz auf euer Projekt an:
- Wenn es ein kleines bis mittelgroßes Projekt ist, wie z.B. eine Landing Page oder eine einmalige Kampagne, dann könnt ihr vermutlich mit einem statischen Design leben, das nicht alle Eventualitäten abdeckt.
- Wenn es um ein größeres oder längerfristiges Projekt geht, wie z.B. eine Marke oder eine auf einer Marke basierende Website, dann ist ein Designsystem auf alle Fälle hilfreich. Es schafft nicht nur ein Fundament für euer Projekt sondern sorgt auf dafür, dass es in Zukunft mit euch wachsen und angepasst werden kann — entweder von einer Designagentur oder von eurem eigenen Team.
Wir sind überzeugt, dass ein Designsystem bei der Gestaltung einer Marke extrem hilfreich ist. Mit seinen Regeln und seiner Logik sorgt es nicht nur für Konsistenz, es ist auch für zukünftige Anwendungen gemacht, die ihr vielleicht noch nicht auf dem Schirm habt. Selbst wenn ihr kein Großkonzern wie Porsche oder IBM seid, ist ein entsprechend kleineres Designsystem eine Investition in die Zukunft.
Wie funktioniert es?
Ein Designsystem enthält alle Elemente einer Markenidentität und verschiedene Anwendungsbereiche. Das sind z.B.:
- Logo: Aufbau, Anwendung und Varianten. Wie das Logo aussieht, wenn es einfarbig oder auf hellen und dunklen Untergründen gesetzt werden soll.
- Typografie: Schriften und Schriftgrößen auf verschiedenen Hierarchieebenen. Wie sich die Schrift auf unterschiedlichen Bildschrimgrößen verhält bzw. welche Typo für kurze oder lange Texte verwendet werden soll. Mit dabei: Varianten in der Systemschrift für Kontexte, wenn eure Markenschrift nicht verfügbar ist.
- Farben: Eine Farbpalette mit wienerkennbaren Namen in RGB/CMYK/Pantone, sowie Farbvarianten und -schattierungen. Kann Informationen über Signalfarben oder Farbverläufe enthalten, sowie wann und wie diese angewendet werden.
- Illustrationen und Icons (Falls das Design sie enthält): Wie diese Elemente aufgebaut sind, was sie vereint und wie diese angepasst werden können.
- Fotografie (Falls das Design sie enthält): Regeln zur Komposition, Motiven, Farben und zur Bildbearbeitung. Kann Informationen über Quellen wie Stock-Foto-Datenbanken enthalten.
- Kompositionen und Layouts: Wie die o.g. Designelemente angewendet, kombiniert und variiert werden. Enthält Informationen über die Skalierbarkeit, Anwendung in Layouts, und in Ausnahmefällen.
Was wir für euch tun können
Bei studio~humm bieten wir Designsystem in zwei Formen an:
- Als PDF-Markenleitfaden, der alle Designelemente und Regel enthält bzw. darlegt;
- Als Figma-Design Library, welche die Elemente in der Software definert und festgelegt hat, so dass ihr oder euer Designteam direkt damit arbeiten könnt.
Wenn es schnell gehen soll oder das Budget für ein volles Designsystem zu klein ist, bieten wir zudem einen kurzen Designsprint, bei dem wir ein „minimum viable branding” erarbeiten. Wie der Name schon sagt, ist das ein deutlich reduziertes Designsystem, was aber zumindest den Grundstein für eure Marke oder Website legen kann, um in Zukunft erweitert zu werden.