Das Design-System ist für ein IT-Unternehmen so modisch und fast ein Muss geworden wie die Verwendung von Kanban-Boards und Agile. Es gibt viele Definitionen eines Entwurfssystems: Jemand versteht darunter nur ein UI-Kit, während jemand glaubt, dass ein Entwurfssystem notwendigerweise eine Komponentenbasis im Code enthält.
Nach unserem Verständnis ist es an der Zeit, von einem UI-Kit zu einer Skizze zu wechseln, um Stile im Code anzuzeigen - unter dem Schnitt.
Wo haben wir angefangen?
Zuerst hatten wir ein Sketch-UI-Kit für jede der Plattformen - Web, iOS, Android. Wir haben auch ein Wordpress-Handbuch gestartet, das beschreibt, wie Komponenten verwendet und kombiniert werden, und erklärt, worauf der QIWI-Stil basiert. Die Verwendung eines einzigen UI-Kits und von Anleitungen beschleunigt die Arbeit von Designern und macht Produktschnittstellen auf verschiedenen Plattformen visuell konsistent.
Ein einzelnes UI-Kit wird in
QIWI Wallet ,
QIWI Piggy Bank ,
QIWI Bonus ,
QIWI Cashier und
QIWI Teamplay verwendet . Wir verwenden es auch beim Entwerfen von Schnittstellen für neue Produkte. Die Anzahl der eingeführten Produkte wächst ständig, daher war die Erstellung von Vorlagen für interne Seiten ein logischer Schritt. Vorlagen für Front-End-Seiten tragen dazu bei, die Diskrepanz bei Stilen zu verringern und Designprozesse erheblich zu beschleunigen.
In der ersten Phase haben wir ein visuelles Designsystem erhalten, auf dessen Grundlage wir jetzt ein Designsystem im Code bereitstellen können.
Was jetzt?
Wir haben diesen Sommer begonnen, das Designsystem zu füllen. Jetzt arbeiten Entwickler aus verschiedenen Teams und alle QIWI Wallet-Designer an dem Design-System.
In der Anfangsphase haben wir aktiv mit Unternehmen kommuniziert, die das Designsystem bereits erfolgreich implementiert haben. Um zu verstehen, was in das Designsystem fällt, und um die Stile zu bestimmen, halten wir regelmäßige Treffen mit dem Designteam ab.
Ein wichtiger Aspekt bei der Erstellung eines Designsystems ist die Kommunikation mit dem Entwicklungsteam. Eine der Ideen des Projekts besteht darin, eine Community von Entwicklern und Designern aus verschiedenen Teams zu schaffen, die zusammenarbeiten, um es zu erstellen und zu vervollständigen und Erfahrungen miteinander auszutauschen.
Jetzt sind wir noch auf dem Weg, der Prozess läuft, für das nächste Jahr ist geplant, die Basis der Hauptkomponenten zu füllen und gleichzeitig einzigartige Komponenten für einzelne Produkte, sowohl B2B- als auch B2C-Segmente, hinzuzufügen.
Es sind jedoch nicht alle QIWI-Produkte im Designsystem enthalten. Zum Beispiel ist das
Gewissen nicht darin enthalten - der visuelle Stil dieses Produkts ist bewusst anders.
Wie ist die Arbeit
Wenn eine neue Komponente angezeigt wird, koordinieren wir sie innerhalb des Designteams und fügen sie in das UI-Kit ein. Anschließend wird sie in Zeplin und Abstract gespeichert. Mit Abstract können Sie Layouts versionieren. Es ist eine Art Git für Designer. Aus dem UI-Kit gelangt die fertige Komponente in das Repository auf GitHub, wo Entwickler sie finden können.
Jetzt wird das Design-System gefüllt, es enthält bereits die grundlegenden Komponenten. Als nächstes folgen größere Muster und Muster + einzigartige Produktkomponenten.
Das Design-System ist für alle Teilnehmer an den Produktprozessen nützlich:
- für Unternehmen - Mit dem Design-System können neue Lösungen zweimal schneller eingeführt und Produkthypothesen getestet werden.
- Für das Team gibt es eine einzige Datenbank mit getesteten Komponenten, die die Geschwindigkeit und Qualität der Arbeit erhöht.
- für Benutzer - Hilft bei der Schaffung einer einheitlichen Benutzererfahrung in der QIWI-Produktfamilie.
Jetzt arbeiten wir daran, das Designsystem flexibel und anpassbar für neue Stile zu machen.
Eine der Hauptaufgaben besteht darin, vorhandene Produkte auf ein einziges System zu übertragen. Dies wird dazu beitragen, das Erbe in Design und Code zu beseitigen und die Produkt- und Serviceschnittstellen ständig auf dem neuesten Stand zu halten.