Kontakt

Die Zeit ist reif für Designsysteme

Gründe, warum Du und Dein Unternehmen ein Designsystem für das nächste digitale Projekt nutzen solltest

Heutzutage sind Webseiten und damit Webanwendungen fester Bestandteil unseres täglichen Lebens. Egal, was wir benötigen, es gibt eine App oder einen digitalen Service dafür: sei es für Einkäufe, Banking, Versicherungen, bürokratische Angelegenheiten oder medizinische Dienste. Im Laufe der letzten Jahrzehnte hat sich die Nutzung des Internets stark gewandelt und damit auch die Entwicklung von Webanwendungen.

Besonders wichtig sind heutzutage das User Interface (UI) und die User Experience (UX) von Webseiten. Unternehmen legen großen Wert darauf, wie ihre Website gestaltet ist und wie Benutzer mit ihr interagieren.

Vor einigen Jahren, als das Internet noch nicht so weit verbreitet war, waren das UI und die UX von Webseiten nicht so entscheidend wie heute. Unternehmen konzentrierten sich mehr darauf, dass ihre Website funktionierte, anstatt wie sie aussah.

Doch mit der Verbreitung des Internets begannen Unternehmen immer aufwändigere Anwendungen mit ansprechenden UIs und guten UX-Designs zu entwickeln. Benutzer gewöhnten sich nach und nach daran und immer mehr Unternehmen folgten diesem Trend, um mit der steigenden Nachfrage Schritt zu halten. Heutzutage würden Apps mit einer schlechten Benutzeroberfläche von den Nutzern ignoriert werden, da sie an Apps mit einfachen, intuitiven Schnittstellen gewöhnt sind.

Infolgedessen haben Unternehmen verschiedene "Strategien" entwickelt, um die Entwicklung von Webanwendungen zu vereinfachen und zu verbessern. Ein entscheidender Durchbruch kann dabei die Einführung eines Designsystems sein.

 

Was genau ist eigentlich ein Designsystem?

Es gibt viele Definitionen dafür, aber eine davon gefällt mir besonders gut, weil sie meiner Meinung nach den Kernpunkt direkt auf den Punkt bringt:

Ein Designsystem ist ein umfassendes Set an Regeln, Richtlinien, Komponenten, Stilen und Prinzipien, das von einem Unternehmen oder einer Organisation entwickelt wird, um eine konsistente und effiziente Gestaltung von Produkten oder Dienstleistungen zu gewährleisten. Es dient als umfassende Referenz für Designer, Entwickler und andere Stakeholder, um ein einheitliches Erscheinungsbild und Verhalten über verschiedene Anwendungen, Plattformen oder Medien hinweg zu erreichen.

Ein Designsystem beinhaltet auch weitere Elemente wie Farbpaletten, Ikonen-Bibliotheken und typografische Stile. Alles kleinsten Designentscheidungen, die man heute als Design Token bezeichnet. Dadurch kann ein Entwickler die Komponenten auf vielfältige Weise kombinieren und nahezu mühelos konsistente Anwendungen erstellen.

Die wesentlichen Vorteile eines digitalen Designsystems sind:

  • Konsistenz: Einheitliches Erscheinungsbild und Verhalten über verschiedene Anwendungen hinweg.
  • Effizienz: Wiederverwendung von Komponenten und reduzierter Zeitaufwand für die Entwicklung neuer Funktionen.
  • Skalierbarkeit: Leichtes Hinzufügen neuer Funktionen und Anpassung an sich ändernde Anforderungen.
  • Zusammenarbeit: Einfache Zusammenarbeit zwischen verschiedenen Teams und Standorten durch klare Standards und gemeinsame Ressourcen.
  • Benutzerfreundlichkeit: Verbesserte User Experience durch intuitive Interaktion und ansprechendes Design.

 

Studie von Team GroupUI, dem Volkswagen Designsystem

Designsysteme steigern die Produktivität

In einem Vortrag stellten Mitwirkende des Designsystem-Teams der Volkswagen Gruppe Ihre Effizenzsteigerung bei der Nutzung von Designsystem vor.

Die abgebildeten Folien veranschaulichen sehr gut, wie der kollaborative Ansatz bei Nutzung eines Designsystems hilft, Entwicklungsaufwände zu senken und den Fokus auf die eigentliche Produktentwicklung und deren UX zu verlagern.

Quelle: Volkswagen GroupUI via Youtube

 

Studie von Sparkbox, einer spezialisierten Designsystem Agentur aus den USA

Designsysteme verbessern die Effizienz der Entwickler und zu führen einer konsistenteren Gestaltung

In dieser Studie testete das Sparkbox-Team acht Entwickler, die ein Formular zunächst von Grund auf und anschließend mit dem bekannten Designsystem von IBM, dem Carbon Design System, erstellten.

Die Ergebnisse zeigten, dass die Verwendung von zum Beispiel Carbon die Umsetzung eines Formulars um beeindruckende 47% beschleunigte im Vergleich zur Erstellung ohne Designsystem (2 Stunden gegenüber 4,5 Stunden).

Quelle: https://sparkbox.com 

Diese beiden Studien beweisen eindrucksvoll, dass der Einsatz eines Designsystems bei der Entwicklung umfangreicher Webanwendungen erheblich Zeit und Kosten einsparen kann und Inkonsistenzen vermeidet.

Sie wollen ein Design System technisch umsetzen?

Wir unterstützen Sie bei Prozessen, Tools und Software.

Die Vorteile von Designsystemen im Überblick

Struktur und Konsistenz

Designsysteme verleihen Ihrem Produkt eine einheitliche Gestaltung. Durch die Verwendung wiederverwendbarer Komponenten müssen Entwickler den Code nicht jedes Mal neu schreiben, was Fehler und Inkonsistenzen vermeidet. Jedes Element folgt einem einheitlichen Stil, was zu einer herausragenden Benutzeroberfläche führt.

 

Effizientes Programmieren mit hoher Qualität

Durch vorgefertigte Komponenten sparen Sie Programmierzeit, da Sie nicht immer wieder von Grund auf neu erstellen müssen. Sie können vorhandene Komponenten einfach zusammensetzen, um Ihre Seiten zu erstellen. Dadurch können Entwickler sich auf komplexere Probleme konzentrieren und vermeiden hastige Entwicklung und mögliche Fehler.

 

Steigerung des Unternehmenswerts

Eine Studie von McKinsey & Company bestätigt die Korrelation zwischen Design und Geschäftswert. Unternehmen, die auf Design setzen, erzielen im Vergleich zu anderen Unternehmen einen um 50% höheren Umsatz und einen um 32% höheren Total Shareholder Return. (Quelle: https://www.mckinsey.com/business-functions/mckinsey-design/our-insights/the-business-value-of-design)

 

Gute und gründliche Dokumentation

Ein Designsystem bietet eine sorgfältige Dokumentation des Systems. Sie ist für ein Designsystem unerlässlich und ermöglicht eine einfache Einarbeitung neuer Teammitglieder, fördert Konsistenz und Einheitlichkeit bei der Nutzung der Komponenten, erleichtert die Skalierbarkeit und Wartung des Systems, ermöglicht den Wissensaustausch im Team und erleichtert die Kommunikation mit Stakeholdern. Eine klare Dokumentation sorgt dafür, dass das Designsystem effektiv genutzt wird und ermöglicht einen reibungslosen Betrieb.

 

Wahrung der Brand-Personality

Unternehmen, die bei der Entwicklung verschiedener Apps keine konsistenten Styleguides einhalten, laufen Gefahr, inkonsistente Produkte zu haben. Durch die Einhaltung eines einheitlichen Stils können Kunden die Apps leicht mit der Marke in Verbindung bringen. Große Unternehmen wie Google, Apple und Microsoft folgen einem kohärenten Designstil für ihre Apps. Dadurch können Kunden die Apps anhand des Stils erkennen und sich in der Benutzung leichter zurechtfinden. Einheitliche Styleguides ermöglichen es Kunden auch, verschiedene Apps einer Marke zuzuordnen.

 

Die Verwendung eines Designsystems bietet zahlreiche Vorteile, von einer konsistenten Gestaltung und Effizienz bei der Entwicklung bis hin zur Steigerung des Unternehmenswerts und der Wahrung der Markenpersönlichkeit. Es ermöglicht eine bessere Strukturierung und effizientes Programmieren, fördert die Einheitlichkeit und erleichtert die Orientierung für Kunden. Zusätzlich bietet es viele Lernmöglichkeiten.

Namhafte Designsysteme großer Organisationen

Lass Dich von den großen inspirieren!

Ein gut durchdachtes Designsystem signalisiert Professionalität, Sorgfalt und Aufmerksamkeit für Details. Dies schafft Vertrauen bei den Kunden und Partnern eines Unternehmens, da es den Eindruck vermittelt, dass das Unternehmen auf einem hohen Qualitätsniveau arbeitet. Eine Organisation mit einem gut etablierten Designsystem hebt sich von der Konkurrenz ab. Es zeigt, dass das Unternehmen über eine solide Grundlage für seine digitale Präsenz verfügt und in der Lage ist, innovative und ansprechende Lösungen anzubieten. Dadurch kann es seine Positionierung am Markt stärken und seine Professionalität unterstreichen.

Designsysteme helfen, das Image eines Unternehmens zu stärken, indem sie eine professionelle, benutzerfreundliche und konsistente digitale Erfahrung bieten. Sie vermitteln den Eindruck von Professionalität, Glaubwürdigkeit und Effizienz, was sich positiv auf das Image und die Wahrnehmung des Unternehmens auswirkt.

Seit der Einführung des Konzepts von Designsystemen haben viele bekannte Unternehmen ihr eigenes Designsystem entwickelt. Hier sind einige Beispiele:

Google führte 2014 Material Design ein, sein Designsystem für Android. Es hilft Entwicklern bei der Erstellung von Anwendungen für Android, iOS und das Web. Seit der Einführung wird es stetig ausgebaut und weiterentwickelt. https://material.io/

IBM entwickelte Carbon, ein open source-Designsystem auf der Grundlage der IBM Design Language. Es aus funktionierendem Code, Design-Tools und -Ressourcen, Richtlinien für die Benutzeroberfläche und einer lebendigen Community. Es soll bei der Erstellung komplexer Designsysteme helfen. Carbon ist für React, Svelte, Vue.js und Web Components verfügbar. https://www.carbondesignsystem.com/

Das Salesforce Lightning Design System enthält Ressourcen und Beispiele zur Erstellung von User Interfaces, die den Lightning-Prinzipien, der Designsprache und den Best Practices entsprechen. Anstatt sich auf Pixel-Perfektionismus zu konzentrieren, können sich Entwickler auf die Anwendungslogik fokussieren, während sich Designer auf die UX, Interaktionen und Abläufe konzentrieren können. https://www.lightningdesignsystem.com/

Darüber hinaus gibt es noch viele sehenswerte Beispiele, die öffentlich zugänglich sind. Eine ausführliche Liste findet sich z.B. hier: https://github.com/alexpate/awesome-design-systems

Beispiele helfen, aber erstelle Dein eigenes Designsystem!

Lass dich von all den tollen, plakativen Beispielen inspirieren, aber gestalte dein eigenes Designsystem. Es gibt ein paar Bibliotheken, die dir dabei helfen können, dein eigenes Designsystem zu erstellen. Anstatt vorgefertigte Designsysteme anzupassen, findest du es vielleicht einfacher oder unkomplizierter, praktisch bei Null anzufangen und auf Bibliotheken zurückzugreifen, die dir beim Einstieg helfen.

Für genau diesen Einsatz haben wir kickstartDS entwickelt!

kickstartDS ist ein Open Source Starterkit für digitale Designsysteme. Es ist dafür geschaffen, dass man all die modernen Konzepte, die hinter all den namhaften Beispielen stehen, einfach adaptieren und passgenau für die eigenen Bedürfnisse zurechtschneiden kann.

Für Entwickler ist kickstartDS so die perfekte Basis um ein digitales Designsystem zu implementieren. Das Frontend bringt für Entwickler neben den Komponenten ein passendes Tooling auf Basis offener Standards mit, welches für eine hervorragende Developer Experience (DX) und höchste Effektivität bei der Entwicklung sorgt.

Das war’s!

Oder ist es erst Dein Anfang?

Lass dich von all diesen Beispielen inspirieren, um schließlich ein eigenes, individuelles Designsystem zu entwickeln, das deinen spezifischen Anforderungen und Vorlieben entspricht oder denen Deiner Organisation.

Du interessierst dich für ein Design System?

Wir unterstützen dich und dein Design- & Digitalteam bei der Implementation, Prozessen, Tools und Software.