Freelance · Design Systems

AppWise hat für die IU ein effizientes Design System in Figma entwickelt, welches Entwicklern und Designern täglich die Arbeit vereinfacht.

Vorschaubild für die Zusammenarbeit mit der IU

Projekttyp

Freelance · Design Systems

ProjektJahr

2022

Projekt URL

Projektdetails

Als freiberuflicher Interface Designer und Webflow Spezialist helfe ich vorwiegend KMUs bei der Strategie, dem Design und der Entwicklung ihrer Webseite. Darüber hinaus konnte ich mir durch diverse Corporate-Projekte einen Expertenstatus im Bereich Design Systems mit Figma erarbeiten.

Die Ausgangslage vor der Zusammenarbeit mit der IU war eine umfangreiche Design Library, welche durch chaotische Struktur allerdings kaum effizient genutzt werden konnte. Die einzelnen Komponenten wurden grundlegend nach dem von Brad Frost definierten Atomic Design strukturiert, jedoch ohne einheitliches Format oder Benennungs-Konventionen. Dies hatte zur Folge, dass Komponenten nicht systematisiert gefunden werden konnten, sodass Designprozesse mit hohem Zeitaufwand verbunden waren. Durch die fegenden Struktur und Unübersichtlichkeit existierten ebenfalls wie Duplikate und veraltete Versionen, welches vor allem für neue Designer zu Verwirrung in der Einarbeitung führte.

Das Ziel des Projektes war es daher eine Struktur für die Library zu entwickeln, welche zum einen eine bessere Übersichtlichkeit bietet und zum anderen langfristig skaliert werden kann.

Dafür wurden zunächst alle vorhandenen Komponenten sortiert, gruppiert und in einem Einheitsformat neu aufgearbeitet. In diesem Prozessschritt wurden außerdem Duplikate und veraltete Version identifiziert und anschließend gelöscht bzw. archiviert.

Um zukünftig schnell und einfach bestehende Komponenten zu finden und neue hinzuzufügen, wurde die Library in zwei wesentliche Bestandteile gegliedert: 

Foundations & Atoms beinhalten Design Guidlines (Farben, Font-Hierarchie, etc.) und Design Komponenten, welche sich selten ändern (Buttons, Links, Form Blocks, etc.).

Molecules & Organisms beinhalten Komponenten und Layouts, welche regelmäßig angepasst und erweitert werden.

Abschließend wurde ein Einheitsprozess für die Entwicklung neuer Komponenten entwickelt, um eine einheitliche Struktur auch innerhalb neuer Designs zu garantieren. Die IU profitiert durch das neue Design System von effizienten Designprozessen und geringem Aufwand bei der Einarbeitung neuer Designer.