Design-System – Konsistenz schafft Vertrauen
Im zweiten Teil werden wir die wichtigsten Bausteine zur Erstellung eines konsistenten Design-Systems etwas genauer unter die Lupe nehmen und zeigen auf wie sich die im Styleguide definierten Elemente zu Komponenten und Mustern zusammenbauen lassen.
Lukas Fischer
Founder & Product Visionary
In unserem Blog-Post «Design-System als Basis für eine skalierende, digitale Kreativität» haben wir das Prinzip und den grundsätzlichen Aufbau eines Design-Systems behandelt. Nun befassen wir uns mit den wichtigsten Bestandteilen für die konsistente Gestaltung von digitalen Produkten.
«The details are not in the details. They make the design.»
Charles Eames
Liste der wichtigsten Design-System-Bestandteile
Farben
Die konsequente Verwendung von Farben gibt Vertrautheit und ist eines der wichtigsten Elemente der Markenidentität. Neben der Definition der Primär- und Sekundärfarben sollten dabei auch Farbschattierungen, Highlight-Farben oder die zulässigen Farbkombinationen berücksichtigt werden.
Bei der Erstellung der Farbharmonien ist es wichtig, auch immer das Thema Accessibility im Hinterkopf zu behalten. Mit dem Tool Contrast Checker lässt sich dies beispielsweise testen.
Typografie
Eine gute Typografie ist der Schlüssel zur Erreichung eines einheitlichen Erscheinungsbildes über mehrere Produkte und Designs hinweg. Typografie soll gleichzeitig schön und funktional gestaltet sein. Die Leser sollten sich in erster Linie auf den Text konzentrieren und in diesen eintauchen können. Neben der Schriftfamilie ist die Wahl der Schriftgrösse, Zeilenabstand und die Textbreite wichtig.
Mittels unterschiedlichen Schriftgrössen lässt sich eine visuelle Hierarchie gestalten. Genau wie die Noten in einem Musikstück dürfen sich die Schriftgrössen an Harmonien bzw. Proportionen halten um einen vertikalen Rhythmus zu erreichen.
Die Anzahl der verwendeten Schriftfamilien und Grössen sollte begrenzt sein. Meist genügen bereits zwei unterschiedliche Schriftarten bzw. Schriftschnitte – eine für Titel und eine für den Lauftext.
Illustrationen & Icons
In vielen Produkten ist die Verwendung von Icons sehr verbreitet. Entsprechend sollte der Iconografie grossen Werte einberaumt und Stil, Einsatz und Regeln zur Verwendung der Icons beschrieben werden.
Abstände, Proportionen und Rastersystem
Weissraum ist für ein gutes Design mindestens genau so wichtig wie der Inhalt. Diese Mentalität darf sich auch im Design-System widerspiegeln. Die Berücksichtigung von Proportionen und die Definition der Grössenverhältnissen unter den unterschiedlichen Elementen sind nützlich zur Gestaltung eines ausgewogenen Layouts. Gleichmässige Abstände über das ganze Produkt hinweg erzeugen ein Gefühl von Ausgewogenheit. Alle diese Überlegungen münden schliesslich in die Erstellung eines Modularen Rastersystems.
In der Kunst und Architektur wird die Technik der Unterteilung der zu gestaltenden Elemente in Raster bereits seit langer Zeit genutzt. So forcierte beispielsweise der Schweizer Typograf Josef Müller-Brockmann in den 1950er-Jahren den Einsatz von typografischen Rastern.
Rastersysteme sind die unsichtbaren Helfer, die das Fundament für das Layout bilden und sich auch im Responsive Design einsetzen lassen.
Am Beispiel des Mailchimp Grid Systems lässt sich der Aufbau und Einsatz eines Rastersystems gut exemplarisch aufzeigen.
«Form folgt Funktion – das ist oft missverstanden worden. Form und Funktion sollten Eins sein, verbunden in einer spirituellen Einheit.»
Frank Lloyd Wright
Komponenten und Muster
Aus den oben erwähnten Bausteine können nun Komponenten zusammengebaut werden. Vereinfacht gesagt, geht es nur noch darum die Farben, Schriften, Icons und Proportionen zu verwenden und neu zu kombinieren. Die Komponenten lassen sich zu Mustern (Design Patterns) zusammenfassen, aus welchen sich die einzelnen Oberflächen bzw. Seitenlayouts des digitalen Produkts bauen lassen. Auch die unterschiedlichen Zustände und Interaktionen sind visualisiert und beschrieben. Do’s & Dont’s bei der Zusammenstellung der einzelnen Elementen sind ebenfalls sehr hilfreich.
Die Komponenten-Bibliothek von Audi bietet beispielsweise einen ausgezeichneten Überblick. Für jede Komponente gibt es Design- und Anwendungs-Beispiele inklusive Erklärungen. Die dazugehörigen Code-Snippets mit dem Source-Code sowie eine Library für den Designer für den Einsatz im gängigen Layout-Tool stehen ebenfalls bereit.
Fazit
Wie im ersten Teil erwähnt, sollte ein gutes Design-System auch über Designprinzipien verfügen. Sie helfen dem Designer bei der Entscheidungsfindung. Bei der Definition aller der oben genannten Bestandteile ist es wichtig, stets alle Ausgabekanäle im Auge zu behalten.
Style Guide