Design-Systemer og Porteføljer

0
18

I min erfaring med design systems, har jeg funnet ut at jeg må ofre min portefølje til å gjøre det bra. I motsetning til mange andre design arbeid hvor det er relativt enkelt å presentere Dribbble-verdig grensesnitt og design, og jeg frykter at systemene er ganske litt mer komplisert enn som så.

Du kan lage ting som er vakre, men det beste arbeidet som skjer på et design-systemer team ofte ikke er vakker. Faktisk, mange av de beste arbeid selv er ikke synlig.

For eksempel, de fleste dager for jeg er sammenkoblingen opp med folk på laget mitt til å hjelpe dem å forstå hvordan vårt system fungerer, fra CSS-arkitektur, for å skrift stabel, til UI Kit til hvordan en komponent kan bli manipulert til å løse et bestemt problem, for mange ting i mellom. Jeg prøver som best jeg kan for å hjelpe andre designere forstår hva som ville være vanskelig å bygge og hva som ville være lett, så vel som når du skal endre sin design basert på tekniske eller andre design begrensninger.

Videre, det er mye hardt og flittig arbeid som går inn i prosjekter som ikke har noen synlig innvirkning på systemet i det hele tatt. I forrige uke, la jeg merke til en merkelig ting med våre rutene. Våre Avmerkingsboksen Reagere komponenten ville utgang HTML som dette:

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

Vi har behov for å bryte den boksen med en <div> for styling hensikt og, fra et raskt blikk, det er ingenting galt med denne markeringen. Imidlertid, <div> og <input> – har begge en klasse av .- avmerkingsboksen, og det var forvirrende stiler i CSS-filen som stylet <div> først, og deretter fn-gjorde de stiler å fikse <input> seg selv.

Hurtigreparasjonen for dette er en ganske enkel: alt vi trenger å gjøre er å sørge for at klassen navn er bestemt slik at vi kan trygt refactor noen forvirrende CSS:

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

Tingen er at dette arbeidet tok mer enn en uke på å sende fordi vi måtte refactor massevis av rutene i vår app til å oppføre seg på samme måte og sørge for at de ble alle bruker den samme komponent. Disse rutene er en av de tingene som er nå betydelig bedre og mindre forvirrende, men det er vanskelig å få det til å se sexy i en portefølje. Jeg kan ikke bare slippe dem inn i en stor iPhone mockup og vri den som en del av en fancy portefølje innlegget hvis jeg ønsket å skrive om mitt arbeid eller vise det til noen andre.

Ta et annet eksempel: jeg tilbrakte en hel dag å gjøre en revisjon av vår illustrasjoner for å hjelpe våre team få en forståelse av hvordan vi bruker dem i vår søknad. Jeg åpnet opp Figma og tok dusinvis av skjermbilder:

Det er litt vanskelig å ta æren for dette arbeidet på grunn av de tunge løftene er virkelig moderere en diskusjon og hjelper teamet plan. Det er viktig arbeid! Men jeg føler at det er vanskelig å vise at dette arbeidet er viktig, og for å vise effekten av det i en stor org. “Ting er nå mindre forvirrende,” er ikke akkurat en stor prestasjon, men det burde virkelig være. Disse kjedelig, metodiske endringer er avgjørende for helsen til en god design system.

Også… det er slags merkelig å putm “jeg skrev dokumentasjon” i en portefølje som mye som det er å si, “jeg sammen med designere og ingeniører for tre år.” Det er sikkert mindre tilfredsstillende enn en stor, glanset JPEG-av en kul grensesnitt designet. Og jeg er ikke sikker på om dette er den samme overalt, men bare ca 10% av det arbeidet jeg gjør er visuell og verdig til å vise frem.

Poenget mitt er at bygging av nye komponenter som dette RadioCard jeg laget for en stund tilbake, er ekstremt sjeldne og står for en liten del av det nyttige arbeidet som jeg gjør:

Se Penn
Gusto App – RadioCard Prototype av Robin Rendle (@robinrendle)
på CodePen.

Jeg vil gjerne se hvordan du arbeider med dette problemet selv. Hvordan kan du vise frem din front-end design og systemer til å fungere? Hvordan kan du gjøre det synlig og verdifulle i din organisasjon? Gi meg beskjed i kommentarfeltet!