Ontwerp van Systemen en Portfolio ‘ s

0
40

In mijn ervaring in het werken met systemen kunnen ontwerpen, ik heb ontdekt dat ik offer mijn portefeuille om het goed te doen. In tegenstelling tot veel andere ontwerpen waar het relatief eenvoudig is om aanwezig Dribbble-waardig interfaces en ontwerpen, vrees ik dat er systemen zijn een stuk lastiger dan dat.

Je zou kunnen maken mooie dingen, maar het beste werk dat gebeurt op een design systems-team, is vaak niet mooi. In feite, veel van de beste werken is niet eens zichtbaar.

Bijvoorbeeld, de meeste dagen ben ik koppelen met mensen in mijn team om hen te helpen begrijpen hoe ons systeem werkt; van de CSS-architectuur, naar de font stack, de UI Kit aan hoe een component kan worden gemanipuleerd om het oplossen van een specifiek probleem, te veel dingen tussen. Ik probeer zo goed als ik kan te helpen andere ontwerpers begrijpen wat moeilijk zou worden om te bouwen en wat zou het gemakkelijk zijn, evenals bij het veranderen van hun ontwerpen op basis van technische of andere beperkingen aan het ontwerp.

Verder is er veel harde en noeste werk dat gaat in projecten die geen zichtbare invloed op het systeem. Vorige week zag ik een raar ding met onze selectievakjes. Onze Selectievakje Reageren onderdeel uitvoer HTML zoals deze:

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

We moesten wikkel het selectievakje met een <div> voor styling doeleinden en, vanuit een snelle blik, er is niets mis met deze opmaak. Echter, de <div> en de <input> zowel een klas .selectievakje in en er waren verwarrend stijlen in het CSS-bestand dat de stijl van de <div> en vervolgens vn-deed die stijlen te herstellen van de <input> zelf.

De correctie voor dit is een vrij eenvoudig: het enige wat we hoeven te doen is ervoor te zorgen dat de namen van de klassen specifiek zijn, zodat we veilig kunnen refactor een verwarrende CSS:

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

Het ding is dat dit werk meer dan een week om het schip want we moesten refactor een ton van de selectievakjes in onze app te gedragen op dezelfde manier en zorg ervoor dat ze allemaal met dezelfde component. Deze selectievakjes zijn een van die dingen die nu aanzienlijk beter en minder verwarrend, maar het is moeilijk om het er sexy in een portfolio. Ik kan het niet gewoon neerzetten in een grote iPhone mockup en draai het als een deel van een zin in portefeuille te posten als ik wilde schrijven over mijn werk of laat het aan iemand anders.

Neem een ander voorbeeld: ik heb een hele dag met het maken van een audit van onze illustraties helpen in ons team een goed begrip van hoe we ze gebruiken in onze applicatie. Ik opende Figma en nam tientallen screenshots:

Het is een soort van moeilijk te nemen krediet voor dit werk omdat het tillen van zware lasten is echt het modereren van een discussie en het helpen van het team plan. Het is belangrijk werk! Maar ik voel me het is moeilijk om aan te tonen dat dit het werk is waardevol en te laten zien wat de gevolgen van het in een grote org. “De dingen zijn nu minder verwarrend,” is niet echt een grote overwinning, maar het moet echt. Deze saaie, methodische wijzigingen zijn van vitaal belang voor de gezondheid van een goed ontwerp systeem.

Ook… het is een beetje raar om putm “ik schreef documentatie” in een portfolio zo veel als het is te zeggen, “ik gekoppeld met de ontwerpers en technici voor drie jaar.” Het is zeker minder bevredigend dan een grote, glanzende JPEG van een coole interface ontworpen. En ik ben niet zeker of dit is overal hetzelfde, maar slechts ongeveer 10% van het werk dat ik doe is de visuele en waardig tonen.

Mijn punt is dat het bouwen van nieuwe onderdelen, zoals dit RadioCard ontwierp ik een tijdje terug is uiterst zeldzaam, en is goed voor een kleine hoeveelheid van het nuttige werk dat ik doe:

Zie de Pen
Gusto App – RadioCard Prototype door Robin Rendle (@robinrendle)
op CodePen.

Ik zou graag zien hoe je het omgaan met dit probleem. Hoe kan je pronken met je front-end en design systemen in zijn werk? Hoe maak je het zichtbaar en waardevolle in uw organisatie? Laat het me weten in de comments!