So erstellen Sie einen Style Guide: Beginnen Sie mit einem UI-Framework

Fragen und Antworten mit dem UX Designer von AdRoll, warum wir das getan haben und was wir gelernt haben

Dieser Blog-Beitrag ist der erste in einer Reihe, der den Weg des Style Guides von der Erstellung bis hin zur Bereitstellung eines ausgereiften UI-Frameworks für unsere Teams aufzeichnet und schließlich eine einzigartige Stimme und einen einzigartigen Ton für unsere Produkte liefert.

Hallo! Ich bin Arya Srinivasan, ein UX-Forscher bei AdRoll. Ich habe mich mit Mason Lee, einem UX-Designer, der an AdRolls nativem Anzeigen-API-Produkt arbeitet, zusammengesetzt, um über seine Arbeit bei der Entwicklung des AdRoll-Styleguides zu sprechen.

Arya: Warum hast du als Auftakt das Styleguide-Projekt gestartet? Was war das Problem, das gelöst werden musste?

Mason: Das Problem bestand in der Inkonsistenz des Designs sowohl zwischen den Produkten als auch innerhalb eines einzelnen Produkts. Beispiel: Eine Schaltfläche, die überall gleich aussehen sollte, sich jedoch in Farbe, Schriftstärke und Rahmenstil unterscheidet.

Schaltflächen sehen in den Verspottungen der einzelnen Designer und in unseren Anwendungen unterschiedlich aus.

Das schnelle Wachstum von AdRoll bedeutete, dass wir uns auf Geschwindigkeit konzentrierten. Wir sind jetzt ein größeres Unternehmen mit mehreren Produkten. Daher ist es für uns als Designer wichtig, die Konsequenz bei der Präsentation unserer Produkte zu betonen: durch das Design.

Um uns auf das Design zu konzentrieren, mussten wir zunächst vorhandene Inkonsistenzen beheben. UX-Designer konzentrieren sich hier in der Regel auf ein oder zwei Produkte. Um unser Team zum Nachdenken über das Design aller Produkte zu bewegen, habe ich ein wöchentliches „UI Smackdown“ -Treffen organisiert, in dem die Richtlinien für die Benutzeroberfläche besprochen werden.

In jedem Meeting haben wir uns mit Designinkonsistenzen befasst, um uns für ein einziges Design zu entscheiden. Nach ein paar Besprechungen fragten mich die Designer immer noch nach der richtigen Farbe oder Polsterung usw. Wir brauchten ein zentrales Dokument mit allen Antworten, also baute ich unser UI-Framework in Sketch als Ressource für Designer. Wann immer wir feststellen, dass eine Komponente fehlt oder eine neue Komponente eingefügt werden soll, diskutieren wir diese und fügen sie der Master-UI-Framework-Datei hinzu.

Arya: Sie haben erwähnt, dass AdRoll ein designorientiertes Unternehmen sein soll. Was meinen Sie damit?

Mason: Ich möchte, dass AdRoll das Design in den Vordergrund stellt, damit es zu einem Wettbewerbsvorteil wird. Die Kunden erkennen es als ein gut gestaltetes Produkt an, das ihre Anforderungen wirklich erfüllt.

Arya: Was waren deine unmittelbaren Ziele für den Styleguide? Haben Sie eine längerfristige Vision für dieses Projekt?

Mason: Mein kurzfristiges Ziel ist es, Designkonsistenz zwischen Designern durch Standardisierung unserer UI-Komponenten zu erreichen. Ich möchte, dass Designer beim Reden über Design dieselbe Sprache sprechen. Beispielsweise erstellen Ingenieure in einem Modal oder Dropdown basierend auf den Vorschlägen des Designers. Wenn sich die Designelemente zwischen den Designern unterscheiden, werden die Ingenieure das gleiche Element auf unterschiedliche Weise herstellen.

Mein mittelfristiges Ziel ist es, diesen Stil in unserem Code in "RollUp", der AdRoll-internen UI-Komponentenbibliothek, zu definieren. Wenn wir ein vordefiniertes Stylesheet haben, müssen unsere Ingenieure es nur kopieren. Designer und Ingenieure können dieselbe Sprache sprechen.

Arya: Sind Sie beim Erstellen des Styleguides auf Probleme gestoßen? Wie hast du sie gelöst?

Mason: Eine der größten Hürden bestand darin, das Buy-in von Leuten aus den Produktteams zu bekommen. Um alle einzubeziehen, habe ich eine Besprechung mit einer klaren Liste der zu behandelnden Tagesordnungspunkte angesetzt. Ich präsentierte Designinkonsistenzen, wie z. B. unterschiedliche Dropdown-Menüs zwischen Produkten. Das Bereitstellen visueller Beweise löst Gespräche aus, und am Ende kümmern sich die Menschen um ihr Produkt und wünschen sich Konsistenz.

Eine weitere Herausforderung bestand darin, die Regeln festzulegen. Wenn es um die Standardisierung einer Komponente geht, sollte sie überall und in jedem Kontext anwendbar sein. Man muss an jeden Randfall denken. Die Komponente muss flexibel und gleichzeitig so umfassend sein, dass sie einfach zu verwenden, zu verbrauchen und anzuwenden ist.

Hier ist ein Beispiel für die Flexibilität unseres Styleguides. Unsere ursprüngliche Entscheidung für das Auffüllen in dieser Dropdown-Liste für Geotargeting war zu groß. Wir haben den Styleguide überarbeitet, um diesen Anwendungsfall zu berücksichtigen.Vor (links), Nach (rechts)

Eigentlich möchte ich noch eine Herausforderung herausfordern! Die Benennung kann schwierig sein. Wie gesagt, ich möchte, dass Designer und Ingenieure dieselbe Sprache sprechen, aber das muss sorgfältig gemacht werden. Für etwas so Einfaches wie ein Dropdown-Menü gibt es tatsächlich mehrere Varianten (eine mit Kontrollkästchen, eine mit Kontrollkästchen und einem Textblock und eine andere mit einem Standard-Dropdown-Menü). Wie benennen wir drei verschiedene Dropdowns, damit ein universelles Verständnis davon besteht, welche welche sind?

Die Semantik ist herausfordernd; Unsere Benennung muss Sinn machen. Wir haben einige coole Tools für die Zusammenarbeit verwendet, um einen Konsens zu erzielen, wenn wir uns für einen Namen entscheiden. Wake hat uns beispielsweise dabei geholfen, alle offenen Fragen und Probleme zu sammeln, Lösungen zu diskutieren, die Smackdown-Entscheidungen für die Benutzeroberfläche zu überwachen und die Konversation mit dem größeren Produktteam durch eine Integration mit Slack fortzusetzen.

Wie wir Wake verwendet haben, um UI-Inkonsistenzen zu diskutieren und an Komponentenregeln zusammenzuarbeiten.

Arya: Gibt es etwas Einzigartiges an der AdRoll-Benutzeroberfläche, das Sie bei der Erstellung des Style Guides berücksichtigen mussten?

Mason: Unser Dashboard ist sehr datenintensiv. Darüber hinaus bietet der Ablauf der Kampagnenerstellung den Werbetreibenden eine Reihe von Hebeln zum Ziehen. Um den Anforderungen weniger erfahrener Werbetreibender gerecht zu werden, sind effektive Standardeinstellungen erforderlich. In unseren Produkten haben die Komponenten komplexe Funktionen, sehen aber einfach aus und sind einfach zu bedienen.

Arya: Gibt es einige Dinge, die Sie gerne wüssten, als Sie mit der Erstellung des Styleguides begannen?

Mason: Ich wünschte, ich hätte von Anfang an ein tieferes Verständnis dafür, wie alle unsere Produkte funktionieren. Zum Beispiel teilen wir in unserem wöchentlichen Design-Kritik-Meeting die Funktionsweise unseres jeweiligen Produkts mit, sodass ich weiß, wie SendRoll (unser E-Mail-Retargeting-Produkt) an der Oberfläche funktioniert, aber ich verfüge nicht über die umfassenden Kenntnisse von SendRoll, die der Designer besitzt. Ich denke, dass ein differenziertes Verständnis des Produkts bei der Arbeit am Styleguide definitiv hilfreich ist, da ich dann alle potenziellen Anwendungsfälle besser verstehe.

Arya: Was ist der beste Weg, um ein gemeinsames Verständnis des Prozesses eines Designers und seines Produkts zu erreichen?

Mason: Auch wenn wir uns wirklich auf den Versand unserer Produkte konzentrieren, teilen wir unseren Designprozess in unserem wöchentlichen Designkritik-Meeting. Ich denke, wir können besser nach jedem Meeting den Kreis schließen - wie hat der Designer das Feedback des Meetings aufgenommen? Sobald das Produkt von unseren Werbetreibenden ausgeliefert und verwendet wurde, können wir anhand der Erkenntnisse aus der Analyse auch mitteilen, wie Werbetreibende die Produkte verwenden.

Arya: Gab es Ressourcen, auf die Sie während der Arbeit an diesem Projekt verwiesen haben?

Mason: Ich habe Atomic Design von Brad Frost gelesen, online recherchiert und bei MeetUps mit anderen UX-Designern gesprochen. Wenn Sie der Meinung sind, dass ein bestimmtes Unternehmen gutes Design praktiziert, haben sie wahrscheinlich irgendwo online über ihren Styleguide gesprochen.

Arya: Wie ist der Status unseres Styleguides?

Mason: Ich habe alle UI-Elemente, die wir in unseren verschiedenen Produkten verwenden, erfasst und überarbeitet und sie in Grundlagen, Komponenten, Mustern und Seiten zusammengefasst, die als Quelle für die Richtigkeit unserer UI-Entwürfe dienen.

Sie können die Grundlagen- und Komponenten-UI-Elemente in Dribbble überprüfen. Wenn Sie mit Atomic Design vertraut sind, habe ich die Ebenen "Atom" und "Molekül" in sogenannte "Komponenten" gruppiert. Wenn Sie beispielsweise den Formulartitel und die Eingabe kombinieren, können andere Designer ein ausgefülltes Formular problemlos kopieren Feld.

Danke fürs Lesen!

Achten Sie bei der Entwicklung unseres Styleguides auf die folgenden bevorstehenden Themen:

  • Wie ein UI-Framework die Zusammenarbeit vereinfacht
  • Entwicklung neuer Stylesheets basierend auf dem UI Framework
  • So erstellen Sie eine Style Guide-Website
  • Die Reise zum Finden unserer Stimme und unseres Tones