Designsysteme

Unsere Leistung: Der Prozess zu einer einheitlich modernen Designsprache

Der Atomic Design Ansatz von Brad Frost liefert diva-e die Basis für die Entwicklung des Designsystems, aber stellt nur einen Teil des umfassenden Aufbaus der komplexen Gestaltung dar. Davon ausgehend erarbeiten die Designexperten die grundlegenden Guidelines und Bausteine für das gesamte System. Im Laufe des Projekts formiert sich daraus ein immer größeres Designsystem zu einer Einheit. Durch das kleinteilige Entwickeln der einzelnen Bestandteile werden inhaltliche und konzeptionelle Fehler minimiert und die Struktur des neu entstehenden Produkts ist direkt erkennbar. Das agile und skalierbare Designsystem ermöglicht es, neue Anforderungen schnell zu berücksichtigen und mühelos in den weiteren Prozess zu integrieren.

Die Methode scheint zunächst sehr komplex zu sein, ist jedoch für größere Projekte unabdingbar. Für die Erstellung von kleineren Designaufgaben nutzen die Experten von diva-e jedoch weiterhin andere Techniken. Der zu Beginn hohe Aufwand beim Einsatz eines Designsystems verringert sich im Laufe des Projekts, denn neue Ableger mit unterschiedlichen - wenn auch einheitlichen - Styles können ohne Mehrarbeit erstellt werden. Die Kunden profitieren also am Ende von der Kosteneffizienz des Designsystems.

Unsere Tools: Wiederverwendung, leichte Pflege und einfache Erweiterung

diva-e nutzt für das Design-System eine Pattern Library, die unabhängig von den verschiedenen Tools nutzbar ist. Die Pattern Library dient als umfassende Bibliothek und als Baukasten für das gesamte System - egal, ob mit Open Source PatternLab.io, einer Eigenentwicklung wie der diva-e blueprint oder einem Brand Manager wie Frontify gearbeitet wird. Für den gestalterischen Aufbau einer solchen Library verwendet diva-e die Designtools Sketch und Figma. Um einen ersten Eindruck interaktiv zu visualisieren, werden für die Prototypen-Entwicklung übliche Tools wie Framer X, inVision oder Principle eingesetzt.

Die Arbeitsschritte im Designsystems können für verschiedenste Einsatzmöglichkeiten wiederverwendet werden. Das gilt nicht nur für den Designprozess bei der Modul- und Template-Gestaltung, sondern auch für die Entwickler in der Programmierung von Code Snippets. Darüber hinaus ist das moderne Designsystem lebendiger als ein klassischer Styleguide im Word- oder PDF-Format, der vielleicht ausgedruckt in irgendeiner Schublade verstaubt. Als Living Styleguide ist ein Designsystem digital und online für alle jederzeit verfügbar.

Diskussion, Austausch und Feedback

Für ein funktionierendes und erfolgreiches Designsystem braucht es die Integration des gesamten Teams. Dabei muss ein einfacher Zugriff für alle Beteiligten - Kunde, Dienstleister oder Agentur - gewährleistet sein. Insbesondere neuen Teammitgliedern wird hierdurch das Onboarding erleichtert. Ein Designsystem ist ein guter Einstieg und Orientierungspunkt für neue Designer und Entwickler, da sie auf einen Blick eine Referenz über alle verfügbaren Elemente und Definitionen vorfinden.

Je nach verwendetem Tool sollte es eine Kommentar-Funktion geben, denn ein solches Kollaborationswerkzeug stellt eine lückenlose Dokumentation und einen Austausch aller Personen sicher. Zudem liefert es eine Transparenz über den aktuellen Entwicklungsstand und ermöglicht ein direktes und schnelles Feedback aller Beteiligten.

Ihr Ergebnis: Unser Design für Ihren Erfolg

Unser diva-e Designsystem ist ein nachhaltiges Werkzeug für Ihre Produkte und Marken und steigert die Flexibilität Ihrer Projekte und zukünftigen Anwendungen. Als zeitgemäßes und verbindliches Brandportal bildet es sämtliche Gestaltungsinhalte und Designinformationen ab.

Ihre Vorteile im Überblick:

• agil und skalierbar durch modularen Ansatz bei stets hoher Qualität

• aktuell, lebendig, leicht zu pflegen und konsistent vom Code bis hin zum Design

• ermöglicht schnellere Umsetzung von weiteren Projekten und MVPs

• fördert die transparente und teamübergreifende Zusammenarbeit