17/4/2024
Designsystem aus der Sicht eines Entwicklers
Warum Designsysteme wichtig sind, um das Aussehen mehrerer Apps zu standardisieren.
Wie die Verwendung von Tailwind CSS und Figma die Zusammenarbeit zwischen Designern und Entwicklern verbesserte.
Die Herausforderungen, Konsistenz und Flexibilität in einem Designsystem in Einklang zu bringen.
Die Vorteile der Implementierung eines Designsystems, wie verbesserte Zusammenarbeit, Effizienz und Produktkonsistenz.
Die Bedeutung der Verwendung eines Designsystems in realen Projekten für sofortiges Feedback und Verbesserungen.
Einführung
Designsysteme werden in der Softwareentwicklung immer beliebter. Als Entwickler fand ich die Arbeit mit Designsystemen sowohl herausfordernd als auch lohnend. Dieser Artikel teilt meine Erfahrungen. Bitte beachten Sie, dass dies keine Einführung in Designsysteme ist. Ziehen Sie dazu die folgenden Ressourcen in Betracht:
Geschichte
Ich beginne mit einer Geschichte über die Implementierung eines Designsystems für einen Kunden. Besonderer Dank geht an Laurens, der von Anfang an eine wichtige Rolle gespielt hat und auch seine Gedanken zur Verfügung gestellt hat.
Warum ein Designsystem?
Wir haben uns auf Designsysteme konzentriert, als wir das Erscheinungsbild mehrerer Apps in einer Organisation standardisieren mussten. Beides Designer und Entwickler (auch Kunden) sahen die Notwendigkeit. Designer begannen, voreingestellte Komponenten und Muster zu verwenden, um ihre Arbeit zu rationalisieren.
Prozess
Wir hatten die Gelegenheit, unser Designsystem mit einem neuen zu testen App wir haben uns entwickelt. Dies förderte eine engere Zusammenarbeit zwischen Designern und Entwicklern. Wir haben das Tailwind CSS-Framework verwendet, das die Arbeit aller vereinfacht hat. Wir haben unsere Designs auf Figma gestützt, das als unsere Quelle der Wahrheit diente. Dieser Ansatz gab Designern Flexibilität, stellte Entwickler aber manchmal vor Herausforderungen, wenn sich Designs änderten.
Es war entscheidend, sowohl Designer als auch Entwickler von Anfang an einzubeziehen. Entwickler schlugen oft kleinere Designanpassungen vor, um die Implementierung zu erleichtern, und die Designer mussten auf unerwartete Benutzeroberflächenprobleme reagieren.
Herausforderungen
Ein Designsystem muss ein Gleichgewicht zwischen Konsistenz und Flexibilität herstellen. Wir haben eine Vue-Bibliothek erstellt, da wir hauptsächlich Vue verwenden, aber bald brauchten wir eine CSS-Bibliothek für andere Kontexte.
Erfolge
Der Schlüssel zu unserer Designbibliothek lag darin, sie in realen Projekten zu verwenden. Dadurch erhielten wir sofort Feedback und es war einfacher, das Projekt gegenüber Interessenvertretern aus der Wirtschaft zu rechtfertigen. Wenn ich Ihnen also einen Rat geben sollte — fangen Sie sofort an, Ihr Designsystem zu verwenden.
Gelernte Lektionen
Die Implementierung eines Designsystems verbesserte die Zusammenarbeit und lieferte sofortiges Feedback. Es verfeinerte unsere Komponenten und machte sie sowohl ästhetisch ansprechend als auch funktionell. Kein eigenes Team für neue Komponenten zu haben, bedeutete zusätzliche Arbeit für Entwickler in verschiedenen Teams. Dieser Ansatz erhöhte jedoch die Effizienz, da wir von Kollegen entwickelte Komponenten wiederverwenden und selbst zur Bibliothek beitragen konnten.
Die Komponenten mussten isoliert testbar und wiederverwendbar sein, was die Codequalität und Zugänglichkeit verbesserte. Je mehr Apps das Designsystem implementierten, desto besser wurde die Produktkonsistenz. Diese Vertrautheit trug dazu bei, die Identität unserer Marke bei allen Produkten zu stärken.
Darüber hinaus förderte es eine bessere Teamarbeit und Kommunikation zwischen den Teams, da verschiedene Teams dieselben Komponenten verwenden mussten. Dies verbesserte den Wissensaustausch zwischen Teams, Designern, Entwicklern und Produktbesitzern.
Im Laufe der Zeit haben Produktivität und Geschwindigkeit zugenommen. Für die Implementierung, für die möglicherweise viele Mitarbeiter erforderlich waren, können jetzt dank gemeinsam genutzter Komponenten weniger Aufgaben erledigt werden.
Fazit
In Zukunft werden Designsysteme an Bedeutung gewinnen. Neue Technologien wie KI werden ihre Verwendung vereinfachen. Hier sind einige klare Vorteile:
- Produktübergreifende Konsistenz: Designsysteme helfen dabei, dass Ihre Benutzeroberflächen auf verschiedenen Plattformen gleich bleiben. Dies hilft Benutzern, Ihre Marke wiederzuerkennen, und verbessert ihr Erlebnis.
- ICHGesteigerte Effizienz: Die wiederholte Verwendung derselben Komponenten reduziert die Entwicklungszeit und ermöglicht es den Teams, sich auf wichtigere Aufgaben zu konzentrieren. Das beschleunigt Ihre Projekte.
- Verbesserte Zusammenarbeit: Designsysteme helfen Designern und Entwicklern, besser zusammenzuarbeiten. Sie kommunizieren klarer und benötigen weniger Änderungen.
Nur damit Sie nicht glauben, dass Designsysteme nur Einhörner und Regenbögen sind, erfordert die Einrichtung eines Systems viel Zeit und Planung, bringt einige Flexibilitätsherausforderungen mit sich und es wird immer einen zusätzlichen Wartungsaufwand geben.
Die Einführung eines Designsystems erfordert einige Investitionen, aber die Vorteile in Bezug auf Geschwindigkeit und Qualität sind es wert.
Ich möchte von Ihren Erfahrungen mit Designsystemen hören. Welche guten Dinge oder Herausforderungen sind Ihnen aufgefallen? Du kannst mir eine Nachricht schicken Lukasz Polok | LinkedIn oder Ukash (@lukaspoloki)/X (twitter.com)
oder kommentiere, wo immer du diesen Beitrag siehst. Lasst uns voneinander lernen.
.svg){kind=icon}
Lukasz ist ein Softwareentwickler mit einem Test- und Support-Hintergrund. Seine vielfältige Erfahrung hilft ihm dabei, bessere Benutzererlebnisse zu schaffen. Außerhalb der Arbeit lernt er gerne neue Dinge und macht gerne Musik.
.png)
.jpg)
