Designsystem
Ein Designsystem verwaltet skalierbares Design, verbessert die Konsistenz von Webseiten und vereinfacht zukünftige Projekte durch wiederverwendbare Komponenten.
Projektübersicht
In diesem Projekt leitete ich die Entwicklung eines umfassenden Designs für die Marke unseres Kunden, was den Designprozess optimierte und Konsistenz über alle Plattformen hinweg sicherte. Durch die Schaffung wiederverwendbarer UI-Komponenten und klarer Richtlinien ermöglichte ich unserem Team effizienteres Arbeiten bei gleichzeitiger Wahrung der visuellen Identität. Das Designsystem dient nun als Grundlage für zukünftige Projekte und fördert Skalierbarkeit und Zusammenarbeit.
In diesem Projekt leitete ich die Entwicklung eines umfassenden Designs für die Marke unseres Kunden, was den Designprozess optimierte und Konsistenz über alle Plattformen hinweg sicherte. Durch die Schaffung wiederverwendbarer UI-Komponenten und klarer Richtlinien ermöglichte ich unserem Team effizienteres Arbeiten bei gleichzeitiger Wahrung der visuellen Identität. Das Designsystem dient nun als Grundlage für zukünftige Projekte und fördert Skalierbarkeit und Zusammenarbeit.
Ziel
Analysis
Wettbewerbsanalyse
Freizeit
Komponenten
Variablen
Stile
Grid System
Fundament
Beschreibung
Als einzelner Designer hatte ich nur begrenzt Zeit, ein Designsystem zu entwickeln, da andere UX/UI-Projekte meine Aufmerksamkeit erforderten. Für mein erstes vollständiges System und die Strukturierung meiner Projektdateien habe ich Marken wie Chakra UI, Shopify, Apple und andere recherchiert.
Als einzelner Designer hatte ich nur begrenzt Zeit, ein Designsystem zu entwickeln, da andere UX/UI-Projekte meine Aufmerksamkeit erforderten. Für mein erstes vollständiges System und die Strukturierung meiner Projektdateien habe ich Marken wie Chakra UI, Shopify, Apple und andere recherchiert.
Solide Basis schaffen
Alte Komponenten neu erstellen
Neue Variablen/Styles entwickeln
Bibliothek bei Bedarf aktualisieren
Designsystem für jedes neue Projekt wiederverwenden
Das Designsystem muss flexibel und skalierbar sein
Grundlagen abschließen
Systemaktualisierung muss einfach und klar sein
Baue eine solide Grundlage
Alte Komponenten neu erstellen
Neue Variablen / Stile entwickeln
Bibliothek bei Bedarf aktualisieren
Designsystem für jedes neue Projekt verwenden
Designsystem muss flexibel und skalierbar sein
Grundlage abschließen
Systemaktualisierung muss einfach und klar sein
Das Fundament legen
Eine Grundlage umfasst Raster, Typografie, Farbe und Logoverwendung. Das Basissystem dieses Designs war das Checkout-Projekt, in dem ich alle Elemente und Widgets in Komponenten mit anpassbaren Variablen verwandelte, wie Schaltflächen, Symbole, Eingabefelder, Kontrollkästchen und mehr.
Eine Grundlage umfasst Raster, Typografie, Farbe und Logoverwendung. Das Basissystem dieses Designs war das Checkout-Projekt, in dem ich alle Elemente und Widgets in Komponenten mit anpassbaren Variablen verwandelte, wie Schaltflächen, Symbole, Eingabefelder, Kontrollkästchen und mehr.
Vorteile
Einzige Informationsquelle
Designsystem dient als zentrales Repository für Komponenten, Muster und Stile
Designsystem dient als zentrales Repository für Komponenten, Muster und Stile
Skalierbare Neugestaltungen
Ermöglicht effizientes Management von Designänderungen in mehreren Projekten
Ermöglicht effizientes Management von Designänderungen in mehreren Projekten
Fokus auf Komplexität
Ermöglicht es Designressourcen, sich auf komplexe Probleme statt auf kleine visuelle Anpassungen zu konzentrieren, um Konsistenz in Aussehen und Funktion zu gewährleisten.
Ermöglicht es Designressourcen, sich auf komplexe Probleme statt auf kleine visuelle Anpassungen zu konzentrieren, um Konsistenz in Aussehen und Funktion zu gewährleisten.
Schnelle Replikation
Ermöglicht schnelle Design-Nachbildung mit fertigen Komponenten und Elementen
Ermöglicht schnelle Design-Nachbildung mit fertigen Komponenten und Elementen
Vermeidet Wiederholungen
Reduziert den Bedarf, das Rad neu zu erfinden, und sorgt für einheitliche Designs.
Reduziert den Bedarf, das Rad neu zu erfinden, und sorgt für einheitliche Designs.
Missverständnisse vermeiden
Verringert den Verlust wertvoller Design- und Entwicklungszeit durch Missverständnisse
Verringert den Verlust wertvoller Design- und Entwicklungszeit durch Missverständnisse
Komponentenbau
Ich habe flexible, wiederverwendbare Komponenten mit mehreren Variablen für schnelle Anpassung und Effizienz erstellt. Jede Komponente wurde so gestaltet, dass Elemente leicht ausgetauscht werden können, um den Projektanforderungen gerecht zu werden. Zudem habe ich komplexere Komponenten auf dieser Basis gebaut, um die Skalierbarkeit des Systems zu sichern.
Ich habe flexible, wiederverwendbare Komponenten mit mehreren Variablen für schnelle Anpassung und Effizienz erstellt. Jede Komponente wurde so gestaltet, dass Elemente leicht ausgetauscht werden können, um den Projektanforderungen gerecht zu werden. Zudem habe ich komplexere Komponenten auf dieser Basis gebaut, um die Skalierbarkeit des Systems zu sichern.
Mit der Entwicklung des Systems integrierte unser Team alle Komponenten in Storybook und schuf so eine Live-Bibliothek. Für responsives Design fügte ich verschiedene Komponentengrößen für unterschiedliche Breakpoints hinzu, um nahtlose Anpassung und größere Flexibilität sicherzustellen.
Mit der Entwicklung des Systems integrierte unser Team alle Komponenten in Storybook und schuf so eine Live-Bibliothek. Für responsives Design fügte ich verschiedene Komponentengrößen für unterschiedliche Breakpoints hinzu, um nahtlose Anpassung und größere Flexibilität sicherzustellen.
Herausforderungen und Lösungen
Meine größte Herausforderung beim Aufbau des Designsystems trat in der Anfangsphase auf. Ich entwickelte alle Komponenten basierend auf dem "Checkout"-Projekt mit der Schriftart "Brandon Grotesque", die wir wegen ihrer Lesbarkeit für unsere Hauptnutzer (ältere Frauen) ausgewählt hatten. Unsere vorherige Schriftart "Lato" war schwer zu lesen. Die gerundeten Ecken und die hohe x-Höhe von "Brandon Grotesque" verbessern die Lesbarkeit und passen zur Marke des Kunden. Doch nach der Implementierung der neuen Schrift in allen Komponenten und ihrer Verwendung in der Checkout-Erfahrung erhielten wir unerwartet Widerstand von einigen Stakeholdern. Die Lösung war daher, alle Komponenten mit einer neuen Schrift namens "TT Norms Pro" zu aktualisieren.
Meine größte Herausforderung beim Aufbau des Designsystems trat in der Anfangsphase auf. Ich entwickelte alle Komponenten basierend auf dem "Checkout"-Projekt mit der Schriftart "Brandon Grotesque", die wir wegen ihrer Lesbarkeit für unsere Hauptnutzer (ältere Frauen) ausgewählt hatten. Unsere vorherige Schriftart "Lato" war schwer zu lesen. Die gerundeten Ecken und die hohe x-Höhe von "Brandon Grotesque" verbessern die Lesbarkeit und passen zur Marke des Kunden. Doch nach der Implementierung der neuen Schrift in allen Komponenten und ihrer Verwendung in der Checkout-Erfahrung erhielten wir unerwartet Widerstand von einigen Stakeholdern. Die Lösung war daher, alle Komponenten mit einer neuen Schrift namens "TT Norms Pro" zu aktualisieren.
Messbares Ergebnis
Das Designsystem umfasst Folgendes:
40 neue wiederverwendbare Komponenten für mehr Design-Effizienz
100+ einheitliche Stile, inklusive Typografie und Farbgestaltung mit einem Rastersystem für fünf Breakpoints, für ein responsives Design
Alle Komponenten folgen einem 4px-Rastersystem für visuelle Harmonie
Die meisten Komponenten sind in Storybook integriert, für schnellen Entwicklerzugang und nahtlose Projektintegration
Prozessgeschwindigkeit des Projekts wurde erhöht
Logische Struktur ermöglicht einfache Erweiterung mit neuen Design-Widgets bei Bedarf
40 neue wiederverwendbare Komponenten zur Steigerung der Design-Effizienz
Über 100 einheitliche Stile, einschließlich Typografie und Farbsystem für fünf Breakpoints, um ein responsives Design zu gewährleisten
Alle Komponenten folgen einem einheitlichen 4px-Rastersystem für visuelle Harmonie
Die meisten Komponenten sind in Storybook integriert für schnellen Zugriff und nahtlose Projektintegration
Die Projektdurchführung wurde beschleunigt
Logische Struktur, die eine einfache Erweiterung mit neuen Design-Widgets ermöglicht
Zum Mitnehmen
Der Aufbau unseres Designsystems von Grund auf half, meinen Designprozess erheblich zu straffen und betonte die Wichtigkeit von Struktur und Flexibilität. Ich lernte, zukünftige Bedürfnisse für ein skalierbares System zu berücksichtigen. Es war befriedigend zu sehen, wie Entwickler Komponenten leicht über Storybook integrierten, was meinen Einfluss zeigte. Zudem bestätigte die Anpassung an die Herausforderung, alle Komponenten mit der neuen Schriftart "TT Norms Pro" neu zu gestalten, die Notwendigkeit von Flexibilität im Design.
Der Aufbau unseres Designsystems von Grund auf half, meinen Designprozess erheblich zu straffen und betonte die Wichtigkeit von Struktur und Flexibilität. Ich lernte, zukünftige Bedürfnisse für ein skalierbares System zu berücksichtigen. Es war befriedigend zu sehen, wie Entwickler Komponenten leicht über Storybook integrierten, was meinen Einfluss zeigte. Zudem bestätigte die Anpassung an die Herausforderung, alle Komponenten mit der neuen Schriftart "TT Norms Pro" neu zu gestalten, die Notwendigkeit von Flexibilität im Design.
See More Case Studies
See More Case Studies
See More Case Studies
See More Case Studies
Thanks For Watching
© Tiziana Bucher 2025. All Rights Reserved
Thanks For Watching
© Tiziana Bucher 2025. All Rights Reserved
Thanks For Watching
© Tiziana Bucher 2025. All Rights Reserved
Thanks For Watching
© Tiziana Bucher 2025. All Rights Reserved