Design Systems und Portfolios

Aus meiner Erfahrung mit Designsystemen habe ich festgestellt, dass ich dafür mein Portfolio opfern muss, um es gut zu machen. Im Gegensatz zu vielen anderen Designarbeiten, bei denen es relativ einfach ist, Dribbble-würdige Benutzeroberflächen und Designs zu präsentieren, befürchte ich, dass Systeme da doch etwas kniffliger sind.

Man könnte Dinge schön machen, aber die beste Arbeit, die in einem Designsystem-Team geleistet wird, ist oft nicht schön. Tatsächlich ist ein Großteil der besten Arbeit nicht einmal sichtbar.

Zum Beispiel arbeite ich die meiste Zeit des Tages mit Kollegen in meinem Team zusammen, um ihnen zu helfen, zu verstehen, wie unser System funktioniert; von der CSS-Architektur über den Schriftstapel und das UI-Kit bis hin zur Art und Weise, wie eine Komponente manipuliert werden kann, um ein bestimmtes Problem zu lösen, und vielem dazwischen. Ich versuche mein Bestes, anderen Designern zu helfen zu verstehen, was schwer zu bauen und was einfach wäre, sowie wann sie ihre Designs aufgrund technischer oder anderer Designbeschränkungen ändern sollten.

Darüber hinaus steckt viel harte und gewissenhafte Arbeit in Projekten, die keinerlei sichtbare Auswirkungen auf das System haben. Letzte Woche fiel mir eine seltsame Sache mit unseren Checkboxen auf. Unsere React-Komponente Checkbox würde HTML wie folgt ausgeben

<div class="checkbox">
  <label for="ch-1">
    <input id="ch-1" type="checkbox" class="checkbox" />
  </label>
</div>

Wir mussten die Checkbox für Styling-Zwecke in ein <div> einschließen, und auf den ersten Blick ist an diesem Markup nichts falsch. Allerdings haben das <div> und das <input> beide die Klasse .checkbox, und im CSS-File gab es verwirrende Stile, die zuerst das <div> gestylt und dann diese Stile rückgängig gemacht haben, um das <input> selbst zu korrigieren.

Die Lösung dafür ist ziemlich einfach: Wir müssen nur sicherstellen, dass die Klassennamen spezifisch sind, damit wir verwirrendes CSS sicher refaktorieren können

<div class="checkbox-wrapper">
  <label for="ch-1">
    <input id="ch-1" type="checkbox" class="checkbox" />
  </label>
</div>

Die Sache ist, dass diese Arbeit mehr als eine Woche gedauert hat, weil wir eine Menge Checkboxen in unserer App refaktorieren mussten, damit sie sich alle gleich verhalten und wir sicherstellen mussten, dass sie alle dieselbe Komponente verwenden. Diese Checkboxen sind eines jener Dinge, die jetzt deutlich besser und weniger verwirrend sind, aber es ist schwierig, sie in einem Portfolio sexy aussehen zu lassen. Ich kann sie nicht einfach in ein großes iPhone-Mockup einfügen und es als Teil eines schicken Portfolio-Posts drehen, wenn ich über meine Arbeit schreiben oder sie jemandem zeigen möchte.

Nehmen Sie ein weiteres Beispiel: Ich habe einen ganzen Tag damit verbracht, unsere Illustrationen zu überprüfen, um unserem Team ein Verständnis dafür zu vermitteln, wie wir sie in unserer Anwendung verwenden. Ich habe Figma geöffnet und dutzende Screenshots gemacht

Es ist irgendwie schwer, sich für diese Arbeit Anerkennung zu verdienen, weil die Hauptarbeit wirklich darin besteht, eine Diskussion zu moderieren und dem Team bei der Planung zu helfen. Es ist wichtige Arbeit! Aber ich habe das Gefühl, dass es schwierig ist zu zeigen, dass diese Arbeit wertvoll ist und ihre Auswirkungen in einer großen Organisation zu zeigen. „Dinge sind jetzt weniger verwirrend“ ist keine großartige Leistung – aber das sollte es wirklich sein. Diese langweiligen, methodischen Änderungen sind entscheidend für die Gesundheit eines guten Designsystems.

Außerdem… es ist irgendwie seltsam, „Ich habe Dokumentation geschrieben“ in ein Portfolio aufzunehmen, genauso wie „Ich habe drei Jahre lang mit Designern und Ingenieuren zusammengearbeitet“. Es ist sicherlich weniger befriedigend als ein großes, glänzendes JPEG einer coolen Benutzeroberfläche, die man entworfen hat. Und ich bin mir nicht sicher, ob das überall gleich ist, aber nur etwa 10% meiner Arbeit ist visuell und zeigenswert.

Mein Punkt ist, dass das Erstellen neuer Komponenten wie dieser RadioCard, die ich vor einiger Zeit entworfen habe, außerordentlich selten ist und einen winzigen Teil der nützlichen Arbeit ausmacht, die ich leiste

Siehe den Pen
Gusto App – RadioCard Prototype von Robin Rendle (@robinrendle)
auf CodePen.

Ich würde gerne sehen, wie Sie mit diesem Problem umgehen. Wie zeigen Sie Ihre Front-End- und Designsystem-Arbeit? Wie machen Sie sie in Ihrer Organisation sichtbar und wertvoll? Lassen Sie es mich in den Kommentaren wissen!