Design-Systeme und-Portfolios

0
46

In meiner Erfahrung in der Arbeit mit design-Systeme, die ich gefunden habe, dass ich Opfer meines Portfolios um es gut zu machen. Im Gegensatz zu vielen anderen design-arbeiten, wo es relativ einfach Dribbble-würdig interfaces und designs, fürchte ich, dass die Systeme durchaus ein bisschen schwieriger als das.

Man könnte die Dinge schön, aber das beste, das geschieht auf einer design-Systeme-team ist oft nicht schön. In der Tat, viele der besten arbeiten ist auch nicht sichtbar.

Zum Beispiel, die meisten Tage bin ich Paaren mit Leuten in meinem team zu helfen, Sie zu verstehen, wie unser system funktioniert; von der CSS-Architektur, zu den font-stack, um die UI-Kit zu, wie eine Komponente manipuliert werden können, ein problem zu lösen, zu viele Dinge dazwischen. Ich versuche, so gut ich kann zu helfen, die anderen Designern zu verstehen, was wäre schwer zu bauen und was wäre einfacher, als wenn Sie zu ändern, Ihre Entwürfe auf Grundlage von technischen oder sonstigen Einschränkungen bezüglich des Designs.

Weiter, es gibt eine Menge von harten und sorgfältige Arbeit-das geht in Projekte, die keine sichtbaren Auswirkungen auf das system. Letzte Woche, ich bemerkte eine seltsame Sache, die mit unserem Checkboxen. Unsere Checkbox Reagieren Komponente HTML-Ausgabe wie diese:

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

Wir mussten wickeln Sie die checkbox mit einem <div> für styling Zwecke und von einem schnellen Blick, es ist nichts falsch mit diesem markup. Allerdings wird das <div> und den <input> – beide haben einen Klasse der .checkbox und es waren verwirrend Stile in der CSS-Datei gestylt <div> und dann erste un-haben diese Stile fix das <input> selbst.

Die Lösung für dieses Problem ist ziemlich einfach: alles, was wir tun müssen ist, stellen Sie sicher, dass die Namen der Klassen sind spezifischer, so dass wir sicher umgestalten jede verwirrende CSS:

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

Die Sache ist, dass diese Arbeit dauerte mehr als eine Woche zu versenden, da mussten wir umgestalten, die eine Tonne von Checkboxen in unserer app-Verhalten in der gleichen Weise, und stellen Sie sicher, dass Sie alle die gleichen Komponenten. Diese Checkboxen sind eines jener Dinge, die nun deutlich besser und weniger verwirrend, aber es ist schwierig, um es sexy Aussehen in einem portfolio. Ich kann nicht einfach lassen Sie Sie in ein großes iPhone mockup und drehen Sie Sie, als Teil einer Phantasie-portfolio veröffentlichen, wenn ich schreiben wollte, über meine Arbeit oder zeigen Sie es an jemand anderen.

Nehmen wir ein anderes Beispiel: ich verbrachte einen ganzen Tag mit der Herstellung von Prüfung unserer Illustrationen zu helfen, unser team erhalten Sie einen Einblick, wie wir Sie in unserer Anwendung. Ich öffnete Figma und nahm Dutzende von screenshots:

Es ist irgendwie schwer zu nehmen Kredit für diese arbeiten, da schweres heben ist wirklich moderieren einer Diskussion und hilft dem team zu planen. Es ist eine wichtige Arbeit! Aber ich fühle mich wie es schwer zu zeigen, dass diese Arbeit ist wertvoll und zeigen die Auswirkungen, die Sie in einer großen org. “Die Dinge sind jetzt weniger verwirrend,” ist nicht gerade eine große Leistung – aber es sollte wirklich sein. Diese langweiligen, methodische änderungen sind von entscheidender Bedeutung für die Gesundheit ein gutes design-system.

Auch… es ist irgendwie seltsam zu putm “ich schrieb die Dokumentation” in einem portfolio so viel wie es ist zu sagen, “ich gepaart mit Designern und Ingenieuren für drei Jahre.” Es ist sicher weniger befriedigend, als ein großer, glänzend JPEG von einem kühlen Schnittstelle, die Sie entwickelt. Und ich bin mir nicht sicher, ob dies überall gleich ist, aber nur etwa 10% der Arbeit, die ich tun, ist das visuelle und würdig zeigen.

Mein Punkt ist, dass Gebäude, die neuen Komponenten wie das RadioCard entwarf ich eine Weile zurück, ist außerordentlich selten und Konten für eine kleine Menge der nützlichen Arbeit, die ich mache:

Siehe Stift
Gusto-App – RadioCard Prototyp von Robin Rendle (@robinrendle)
auf CodePen.

Ich würde gerne sehen, wie man sich mit diesem problem. Wie wollen Sie zeigen, Ihre front-end-und design-Systemen arbeiten? Wie machen Sie es sichtbar und wertvoll in Ihrer Organisation? Lasst mich in den Kommentaren wissen!