Wir machen Sie auf eine Übersetzung der Geschichte über die Schaffung des Designsystems aufmerksam, die vom Designer der Societe Generale erzählt wurde.
Die derzeitige Zunahme von Artikeln zu Designsystemen hat uns dazu inspiriert, mehr darüber zu erzählen, woran wir bei Societe Generale arbeiten. Wir haben lange Zeit mit unserem Designsystem experimentiert und als Designer, der sich intensiv mit technischen Details befasst, betrachte ich dies persönlich als eine enorme Leistung in meiner Karriere.
Da das Designsystem eine Sprache ist, mit der Designer und Entwickler harmonisch zusammenarbeiten können, habe ich dieses Material zusammen mit meinem Kollegen Fabien Zibi, unserem Hauptentwickler, gesammelt. Wir werden über den Lebenszyklus unseres Systemdesigns sprechen und die Erfahrung einer fruchtbaren Zusammenarbeit teilen, in der Hoffnung, dass dies Menschen hilft und inspiriert, die sich gerade auf diese Reise begeben.
Wie wir uns im Laufe der Jahre entwickelt haben
Bei Societe Generale entwickeln wir seit 2014 unseren Systemansatz. Zu dieser Zeit haben wir mit bereits entwickelten Prototyping-Ressourcen und bereits codierten Komponenten für statisches HTML begonnen, um den Prozess der Synchronisierung digitaler Technologien in SG Markets-Produkten, unserem B2B-Finanzdienstleistungsmarkt, zu starten.
Dies ermöglichte es uns, das Verhalten unserer Benutzer mit typischen Finanzschnittstellen zu verstehen und festzustellen, welche Arten von Komponenten und welche Arten von Design am effektivsten waren. Regelmäßige Überprüfungen in den nächsten Jahren haben es uns ermöglicht, unsere Vision klarer zu machen.
Ab 2017 haben wir einen tiefergehenden Prozess der Arbeit mit dem Designsystem begonnen. Die Definition von Grundprinzipien und Richtlinien half uns, das System zu vereinheitlichen, und die intensive Aktualisierung aller unserer Komponenten führte zu einem viel einfacheren Entwurfsprozess. Das gesamte Designteam hat zu dieser Arbeit beigetragen!
Die wachsende Zusammenarbeit zwischen Designern und Entwicklern in Verbindung mit unserer Strategie, frühzeitige Projekte anzuziehen, hat uns später zuversichtlich gemacht, dass unser Designsystem von verschiedenen Entwicklungsgruppen allgemein akzeptiert wird. Dies führte zur Veröffentlichung eines vollständig skalierbaren Systemdesigns, das an die Bedürfnisse von B2B und B2E (Business Worker) angepasst ist und dessen spezielles Ökosystem derzeit von mehr als 750 digitalen Projekten auf der ganzen Welt verwendet wird.
Aber lassen Sie uns zum Anfang zurückkehren, um mehr über die verschiedenen Phasen zu erfahren, die wir durchlaufen haben, und um uns kurz mit unseren Werkzeugen vertraut zu machen, die wir im Arbeitsalltag verwendet haben.
Ausgangspunkt: Auf der Vergangenheit aufbauen
Das Erstellen eines Systemdesigns ist eine Sache, und die Einführung eines solchen Systems im gesamten Unternehmen ist eine andere. Um dies zu tun, müssen Sie darüber nachdenken, was bereit ist und in welchem Umfang Sie es verwenden können.
Als die ersten SG Markets-Dienste entwickelt wurden, haben wir Bootstrap 3 verwendet. Der Vorteil war die Nutzung der Open-Source-Community - wir wollten weder ein Rad noch ein Fahrrad selbst erfinden.
Die weitere Verwendung von Bootstrap als zentrale Technologie des Entwurfssystems schien ein besonders natürlicher Fortschritt zu sein - insbesondere nach der Veröffentlichung von Bootstrap 4, das uns standardmäßig eine Bibliothek mit grundlegenden Komponenten, SCSS-Variablen und zahlreichen behobenen Problemen zur Verfügung stellte.
Unser erster Schritt war zu verstehen, wie die neue Bibliothek funktioniert. Wir haben eine Tabelle mit mehr als tausend SCSS-Variablen erstellt, mit deren Hilfe wir schnell identifizieren konnten, welche Teile geändert werden mussten, um mit der Konfiguration von Bootstrap zu beginnen.
Dann haben wir Variablen für unsere spezifischen Bedürfnisse hinzugefügt. Das Ergebnis war "SG" Bootstrap 4 ("SGBS4"), das mit unserer eigenen künstlerischen Ausrichtung auf vorhandene Komponenten bereit war, unsere Hauptstruktur zu werden. Die bestehende Verwendung von Bootstrap 3 im gesamten Unternehmen machte es einfach, auf ein neues System aufzurüsten.
Einführung in die Grundlagen
Mit einer vereinbarten technischen Grundlage haben wir unsere grundlegenden Richtlinien für die künstlerische Ausrichtung auf der Grundlage der klaren Prinzipien erstellt, die dem gesamten Konzept unseres Entwurfssystems zugrunde liegen.
TypografieTypografie macht in den meisten Fällen 90% des Inhalts der Website aus. Deshalb haben wir die Typografie in den Mittelpunkt unseres Systemdesigns gestellt.
RaumFür harmonische Layouts und eine gute Inhaltshierarchie legen wir ein geschätztes Verhältnis zwischen Rand, Einzug und Abstand fest.
SchattenUnsere Wahl wurde durch den
internationalen Grafikstil und die Essenz der Finanzbranche inspiriert.
In den frühen Phasen des Systemdesigns wurde der größte Teil unserer Zeit für grundlegende Empfehlungen aufgewendet. Als sie stabil wurden, war es einfach, einen Satz skalierbarer Komponenten zu identifizieren. Jedes Mal, wenn wir etwas hinzufügen, verbessern oder ändern möchten, stellen wir sicher, dass diese Grundprinzipien eingehalten werden, da sie zusammenarbeiten, um das System weiter auszubauen.
Designsystem für drei Wale
Die Hauptvariablen und die Hauptrichtungen der künstlerischen Richtung sind die Grundlagen, auf denen wir unser Entwurfssystem aufbauen konnten. Mit anderen Worten, es handelt sich um subatomare Elemente, mit denen Atome erzeugt werden können.
1. Die Struktur des atomaren Designs
Atomic Design ist eine Methodik, die aus fünf separaten Schritten besteht, die zusammenarbeiten, um Systemdesign-Schnittstellen in einer durchdachten und hierarchischen Weise zu erstellen.
- Brad Frost
Da wir bereits eine Struktur von Komponenten aus unserer vorherigen technischen Struktur hatten, beschlossen wir, ihre Philosophie beizubehalten und die fünf anfänglichen Ebenen des atomaren Designs auf drei zu reduzieren, nämlich die folgenden:
Komponenten ,
Muster und
Muster / Widgets . Auf der Grundebene des Diagramms dieser Ebenen haben wir die
Hauptvariablen - Typografie, Farbe und Intervalle - beibehalten, zu denen wir Inhaltsempfehlungen hinzugefügt haben.
Zusammen mit dieser Struktur ergibt sich ein leicht anpassbares System, in dem alle Komponenten und Vorlagen kombiniert oder einzeln bearbeitet werden können. Wir definieren den Unterschied zwischen Komponenten und Vorlagen in folgendem Maßstab:
Komponenten repräsentieren einzelne Assets wie Schaltflächen, Eingabedaten oder Karten, während
Vorlagen Komponenten in Formularen, Kopfzeilen und Datumsauswahlfeldern kombinieren.
2. Muster, Muster und Widgets
Unsere Muster, Vorlagen und Widgets werden regelmäßig überprüft und aktualisiert, um die neuen Anwendungsfälle und das Feedback zu berücksichtigen, das wir erhalten, um sicherzustellen, dass wir die bestmögliche Benutzererfahrung bieten. Diese Ressourcen erleichtern auch die Entwicklung einer Schnittstelle für Entwickler - das gesamte System ist vollständig wiederverwendbar und im Code (fast) untrennbar.
3. Anleitungen
Anleitungen und Anleitungen, die Designern und Entwicklern helfen, Ressourcen mit Bedacht einzusetzen.Unsere Richtlinien sind unsere „Stimme der Wahrheit“ - sie geben uns klare und konsequente Gestaltungsanweisungen. Unser gemeinsames Ziel ist es, die Interaktion der Benutzer mit unseren Produkten so zu kombinieren, dass der Benutzer, der bereits mit einem Produkt vertraut ist, die anderen problemlos verwenden kann.
Diese Richtlinien beschleunigen auch die Produktentwicklungsphase - unsere Designer können sicherstellen, dass ihr Design nicht nur dem individuellen Stil entspricht, sondern auch vollständig zum Designsystem passt.
Unser Designprozess und sein Ökosystem
Die Prozesse entwickeln sich über den gesamten Lebenszyklus des Systems ständig weiter. Damit die Entwicklung harmonisch verläuft und nicht ins
Chaos übergeht , muss man sich auf etablierte Prozesse verlassen.
Aus diesem Grund haben wir ein Ökosystem von unterstützenden Werkzeugen entwickelt, die dazu beitragen, ständig mit unserem Konstruktionssystem zu interagieren und damit zu arbeiten.
1. In
Adobe XD stehen
Projektressourcen sowie Komponenten und Vorlagen zur Verfügung, die für die Erstellung von Prototypen verwendet werden können.
2. Aktuelle Dokumentation, die erforderlich ist, um die Nutzungsgrundsätze und -regeln jederzeit (mit Codefragmenten) zu teilen.
3. InVision und Typeform ermöglichen es uns, Prototypen mit unseren Benutzern zu teilen und Feedback zu sammeln.
4. "Sandbox" für Programmierer , ein "Live" -Editor, in dem Designer und Entwickler schnell Codefragmente austauschen und Komponenten in einem unserer Themen testen können. Dies ist unsere neueste Ergänzung zum Ökosystem. Da wir mit einer Vielzahl von Optionen arbeiten, von weniger schwierig bis sehr komplex, haben wir das Ökosystem so gestaltet, dass jeder Designer oder Entwickler seine Vorlagen teilen kann.
5. Die Sandbox-Site mit Zugriff für die gesamte Community, die für technische Experimente mit allen Elementen im Code konzipiert ist. Es enthält Seiten für jede Gruppe von Komponenten und ermöglicht es uns, neue Versionen und Aktualisierungen des Systemdesigns in Echtzeit zu testen (wenn wir also etwas unternehmen, ergeben sich keine ernsthaften Konsequenzen!). Dies fügt der Entwicklung eine weitere Ebene von Feedback hinzu, bis das Update verfügbar wird.
6. Github Entreprise zum Verfolgen, Entwickeln und Sammeln von Problemen. Um Transparenz und Rückverfolgbarkeit zu gewährleisten, zeichnen wir jede Änderung an unseren Komponenten auf und sammeln Feedback, Spezifikationen und Änderungen von Designern und Entwicklern, die das System verwenden. Jeder kann einen Fehler melden und sogar mit einer Pull-Anfrage oder einer Löschanfrage beheben.
Was weiter? Prüfen und verbessern!
Heute befinden wir uns in einem Zustand, in dem wir über stabile, aber immer noch weiterentwickelte Ressourcen und Werkzeuge verfügen, die wir täglich verwenden. Um fortzufahren, fragen wir erfahrene Benutzer unseres Systemdesigns, welche neuen Funktionen oder Ressourcen sie benötigen. Parallel dazu fragen wir neue Benutzer, wie wir ihrer Meinung nach die Anpassung an das Entwurfssystem verbessern können. So schaffen wir unschätzbare Synergien mit unseren Anwendern und erleichtern schrittweise die Implementierung, was ein wesentlicher Erfolgsfaktor ist. Societe Generale besteht wie viele andere Unternehmen aus verschiedenen Teams mit unterschiedlichen Fähigkeiten und Inspirationen. All dies macht es ziemlich unvernünftig, diesen Teams und ihren Produkten sofort ein neues System aufzuzwingen.
Wenn Sie anfangen, Ihr eigenes Designsystem zu erstellen, ist hier unser Haupttipp:
Bleiben Sie aufgeschlossene Schöpfer ! Eine Sache, die wir bei der Erstellung unseres Systemdesigns gelernt haben, ist, dass wir nicht gleich alles richtig machen oder beim ersten Versuch ein perfektes System erstellen können. Das Erstellen eines Systemdesigns ist ein großes Projekt, das viel Arbeit erfordert. Beachten Sie jedoch, dass jeder, der es verwendet, ein Träger wertvoller Ideen sein kann. Wenn Sie sich weigern, das System zu öffnen und skalierbar zu machen, werden Sie diesen Krieg mit der Übernahme des Systemdesigns nicht gewinnen.