Implementierung von Design Systemen

Ein Design System ist eine eine Sammlung von Pattern und Regeln, mit der Gestaltungsregeln über Touchpoints hinweg abgebildet werden können. Damit lösen Design Systeme meist ältere Konzepte wie simple Styleguides oder die noch älteren Design-Manuals als Referenz bei der Gestaltung digitaler Touchpoints ab. Ein Design System ist zwar umfassender, bildet jedoch meist auch viel mehr Siitautionen und Anwendungen ab. Daher kann ein Design System als "Single Point of Truth" bei der Umsetzung digitaler Medien verwendet werden. Auch ein Design System muss jedoch technisch umgesetzt und bereitgestellt werden, damit es verwendet werden kann.

Digitale Produkte stellen Organisationen vor neue Herausforderungen. Denn digital Produkte sind längst keine einzelenen Anwendungen mehr. Es sind eine Vielzahl an Websites, Apps und anderen digitalen Touchpoints, die gesteuert durch Prozesse auf Basis verschiedenenr Softwarelösungen zusammengesetzt werden. Diese Touchpoints ´benötigen Gestaltung. Jeder für sich und über Touchpoints hinweg.
Einfache Styleguides sind da nützlich, stoßen jedoch an ihre Grenzen. An Ihre Stelle tritt das Design System und damit die gemeinsame Designsprache.

Designsysteme im ganz generischen Sinn können mit verschiedenen Tools erstellt werden (z.B. Frontify, InVision, Sktech oder Figma)

Für die Umsetzung und Erweiterung von Design Systemen braucht es zudem Anwendungen und Abläufe, die sich in die Prozesse von Entwicklern und Designern beim Bau oder der Erweiterung digitalen Plattform und Anwendungen einfügen.

Das richtige Tooling unterstützt Designer und Developer bei der Arbeit an einer gemeinsamen Code Basis, einer sog. Komponenten-Bibliotheken. Damit hat die Trennung zwischen Design- und Entwicklungs-Tools endlich ein Ende. Dabei ist darauf zu achten, dass Designer Ihre eigene Arbeitsebene haben. Verfügen die Gestalter über Grundkenntnisse in HTML und CSS können sie sogar schnell Lösungen erstellen - anstelle von Entwürfen! Entwickler dagegen benötigen eine Arbeitsebene auf der sie Code in jeder Hinsicht flexibel ändern und bearbeiten können.

Unsere selbst entwickelte Component-Library, namens kickstartDS, bildet genau diese Anforderungen ab. Wir haben kickstartDS so strukturiert, dass sie kollaboratives Arbeiten von Designern und Entwicklern nicht nur möglich macht, sondern per default vorgesehen ist.

kickstartDS befähigt Teams, User-Interface-Komponenten effizienter zu gestalten, umzusetzen und zu organisieren. Durch die Storybook-Integration wird sichergestellt, dass jede Komponente die Ansprüche an Ihr Frontend erfüllt.