Designsystem: Was ist das und wofür braucht man es?

Stellen Sie sich dieses Horror-Szenario vor: Auf Ihrer Website passt hinten und vorne nichts mehr zusammen. Im Verlauf der Jahre haben verschiedene Personen die Seite aktualisiert und je nach Gefühl und Augenmaß gearbeitet. So kommt es, dass die Gesamterscheinung nicht einheitlich wirkt, auch wenn nur eine Farbe und zwei Schriften eingesetzt werden. Buttons sind manchmal etwas größer, manchmal etwas kleiner oder haben einen Schatten, einmal wird die dicke Variante der Schrift verwendet, einmal die dünne usw. Auch wenn Sie es vielleicht nicht sofort genau benennen können, merken Sie, dass die Website nicht wie aus einem Guss wirkt. Und das wird dann zum Problem, wenn die mangelnde Konsistenz Ihre Glaubwürdigkeit bei Usern und Kunden sinken lässt.

Zur News-Übersicht

by seoCon

Genau da kommen Designsysteme ins Spiel. Spätestens bei einem Website-Relaunch zahlt es sich aus, sich mit diesem Thema auseinander zu setzen. Doch was ist das genau? Dieser Blog-Artikel soll Ihnen Klarheit verschaffen. Erstmal hier die Definition zum Begriff „Designsystem“…

Definition

„Ein Designsystem ist ein strukturiertes Framework, das eine Sammlung von wiederverwendbaren Komponenten, Richtlinien, Standards und Prinzipien für das Design und die Entwicklung digitaler Produkte bereitstellt. Es dient als einheitliche Quelle der Wahrheit, um Konsistenz und Effizienz in der Gestaltung und Entwicklung von Benutzeroberflächen zu gewährleisten.“

Okay, und was heißt das in der Praxis? Viele kennen bereits die Begriffe „Corporate Design“ und „Corporate Identity“, also die Gestaltung aller Kommunikationsmittel einer Marke oder eines Unternehmens. Diese meist visuellen Überlegungen werden üblicherweise in einem Brand-Manual dokumentiert. Man kann sagen, dass Brand-Manuals und Designsysteme darauf abzielen, Konsistenz zu gewährleisten, aber unterschiedliche Schwerpunkte und Zielgruppen haben. Ein Brand-Manual definiert die visuelle und kommunikative Identität einer Marke und enthält ihre Informationen (z. B. Werte, Mission, Vision, …) zur Verwendung des Logos und zu Farb,- Schrift- und Bildwahl. Währenddessen stellt ein Designsystem umfassende Richtlinien für die Gestaltung und Entwicklung digitaler Produkte bereit. Das heißt, der eigentliche Fokus liegt auf Interaktionsmustern und Code-Bibliotheken für User-Interface-Elemente. Im Designsystem treffen Design und Entwicklung aufeinander.

Zu beachten...

Wichtig ist, dass das Designsystem immer am neusten Stand ist, damit AnwenderInnen keinesfalls auf veraltete Informationen zugreifen. Die Pflege eines Designsystems bedeutet zwar einen gewissen Aufwand, dafür wird Einheitlichkeit und Konsistenz gewährleistet. Werden Vorgaben und Richtlinien global und übersichtlich definiert, können AnwenderInnen im Vergleich effizienter und effektiver arbeiten, als wenn Informationen verstreut und versioniert gespeichert werden. Ein weiterer Vorteil ist, dass es langfristig betrachtet auch Inspiration oder ein Anhaltspunkt für verwandte Projekte und Kampagnen sein kann.

Tools für die Verwendung von Designsystemen​

Für die Erstellung und das Management von Designsystemen gibt es zahlreiche Tools mit unterschiedlichem Funktionsumfang. In Design-Programmen wie Figma oder Adobe XD können Komponenten und Variablen (z. B Farbcodes) in einer Library gespeichert werden, auf die dann das gesamte Team zugreifen kann. Viele Firmen, die besonders komplexe digitale Produkte anbieten, erstellen für ihr Designsystem eine eigene Website. Hier sind diverse Automationen möglich, zum Beispiel die Synchronisation zwischen Design-Programm, Design-System und dem Produkt an sich. Für kleinere Softwares oder Projekte mit geringerem Umfang reicht oft eine abgesteckte Variante eines Designsystems. Ganz nach dem Motto „The best design system software is one that your team can manage“, geht es in erster Linie darum, eine passende Dokumentation für alle beteiligten Personen zur Verfügung zu stellen.

Empfehlungen

Wir wissen nun, was ein Designsystem ist und welche Argumente für den Einsatz sprechen. Als nächstes möchten wir ein paar Empfehlungen aussprechen, welche Elemente ein Designkonzept unserer Meinung nach unbedingt beinhalten muss. Eine häufige Metapher zur Gliederung der Inhalte von Design-Elementen kommt aus der Chemie: Man beginnt mit den grundlegendsten Elementen, den Atomen, und kombiniert daraus Moleküle. Mehrere Moleküle bilden einen Organismus usw. Für DesignerInnen entsprechen Atome den kleinsten Einheiten, welche alleinstehend noch recht abstrakt wirken z. B. ein Button, ein Inputfeld oder ein Beschreibungstext. Kombiniert man diese Elemente, werden sie zu sinnvollen Molekülen, z. B. ein Inputfeld mit Label und Submit-Button. Ist dieses Molekül Teil eines Größeren, z. B. einer Navigationsleiste, spricht man von einem Organismus. Im nächsten Schritt können Organismen zu ganzen Templates kombiniert werden, die den Grundaufbau einer Webseite visualisieren. Die letzte Instanz, die eigentliche finale Seite, wäre ein konkret mit Content befülltes Template. Der Vorteil dieser Methode ist, dass man die anfängliche Überforderung umgehen kann, indem man sich von Einfachen zu Komplexen handelt und die Aufgabenstellung in kleinere Einzelteile zerlegt. Für Interessierte, die tiefer in das Thema „Atomic Design“ einsteigen wollen, empfiehlt sich folgender Artikel: https://atomicdesign.bradfrost.com/chapter-2/

Designsystem Checkliste

So, nun geht es aber zur Sache. Die folgende Checkliste basiert auf Erfahrungswerten der letzten Website-Projekte, die wir umsetzten durften und beinhaltet alle wichtigen Elemente, die für ein Designkonzept eines Website-Relaunches notwendig sind:

  • Logo plus diverse Varianten (Graustufen, Schwarz-Weiß, Invertiert, Farbvarianten etc.)
  • Farbdefinitionen und deren Anwendungsgebiete (Basis-, Akzent-, Hauptfarben)
  • Schriftdefinitionen, mindestens von H1 bis H6, nicht zu vergessen: Listen, Links, Bildunterschriften etc.
  • Buttons und Links plus diverse Varianten z. B. Hinsichtlich Farbe, Größe, Priorität
  • Bildstil (Bildsprache bzw. Vorgaben zur Bearbeitung)
  • Grafische Elemente wie Formen oder Linien, aber auch Abstände oder Ecken-Abrundungen
  • Icons
  • Zeitangaben (Datum und Uhrzeit)
  • Sonstige Steuerungselemente z. B. Slider-Pfeile, floating Buttons, Filter-Optionen, …
  • Kommunikationshinweise wie Progress-Bars, Alerts, Status-Icons, …
  • Navigationsleiste (üblicherweise horizontal am Beginn der Website, es gibt aber auch seitliche Navigationen.)
  • Footer
  • Call-To-Action Elemente
  • Häufige Layouts wie Bild-Text Kombinationen
  • Container wie z. B. Cards, Listen
  • Input- bzw. Auswahlfelder wie Date-Picker, Chips, Radio-Buttons, Checkboxen, und klassische Text-Eingabe-Felder

Hinweise

Bei der Gestaltung von interaktiven Komponenten ist zu beachten, dass diese auch unterschiedliche Zustände haben können. DesignerInnen müssen also überlegen, wie die focused-, selected-, hover-, und activated-Varianten aussehen könnten und sollten dies auch im Designkonzept dokumentieren.

Werden Entscheidungen rund um die Gestaltung dieser Komponenten dokumentiert und für alle beteiligten Personen freigegeben, wird Ihre nächste Website bestimmt ein voller Erfolg. Mit einem Designsystem sorgen Sie für Konsistenz, was grundlegend ist, um bei potentiellen KundInnen zu punkten. Ein qualitativ hochwertiges Endprodukt wirkt glaubwürdiger und erleichtert außerdem den gesamten Prozess bzw. die Zusammenarbeit aller internen Usergruppen.

Wenn Sie ein Designsystem erstellen wollen, oder noch Fragen zur Theorie auftauchen, scheuen Sie nicht, uns zu kontaktieren!

Weitere Artikel, die Sie interessieren könnten…

Nehmen Sie gerne mit uns Kontakt auf

Starten Sie Ihre Erfolgsgeschichte im Web mit einer Anfrage bei seoCon. Jetzt kontaktieren!

Kontakt

+41 44 563 1922

Kontakt zur Top Online Marketing Agentur