Kontakt

Implementierung von Design Systemen

Wie digitale Design Systeme technisch umgesetzt werden.

Was ist ein Design System?

Was ist ein Design System?

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 Produktentwicklung mit Design Systemen

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 gemeinsam 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.

Eine gemeinsam Basis für Designer und Entwickler

Die Zusammenarbeit von Designern, Entwickler und weiteren Digital-Spezialisten ist bei der Realisierung digitaler Produkte essentiell. Schafft man es, dass Designer und Entwickler an einer gemeinsame Code Basis arbeiten, so hat die Trennung in Design-Tools und Entwicklungs-Tools ein Ende. Essentiell ist, das Designer Ihre eigene Arbeitsebe haben und ausgestattet mit Grundlagenkenntnissen über HTML und CSS schnell Lösungen (statt Entwürfe!) bauen können. Entwickler dagegen benötigen eine andere Arbeitsebene auf der sie Code in jeder Hinsicht fleixibel ändern können.

Unsere Component-Library bildet genau diese Anforderungen ab. Wir haben diese so strukturiert, dass die kollaboratives Arbeiten von Designern und Entwicklern nicht nur möglich, sondern vorgesehen ist.

Die Code-Ebene und die Integration in bekannte und vorhandene Prozesse wird dafür ergänzt durch zwei zentrale Tools:

  1. Pattern Lab und
  2. Storybook

Sie wollen ein Design System technisch umsetzen?

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