Sådan bygges et designsystem med et lille team

Illustration af Chris Gilleard

I går aftes gik mit lille team og jeg ud for at lave lidt netværk og lære om Design Systems. At være det var buzzword i 2017, vi var ivrige efter at lære, hvordan vi kunne skabe vores egne.

Vi havde hørt alle de vidunderlige fordele ved at skabe et designsystem: at spare tid, reducere debatter, samarbejde, vedtagelse og mere. Jeg var spændt!

Alle forhandlingerne talte om, hvordan man opretter et designsystem. Imidlertid var dette store teams, eller de havde dedikerede ressourcer, endda et DesignOps-team (2. buzzword i 2017) til at opbygge og vedligeholde designsystemet.

I slutningen af ​​aftenen forlod vi lidt modløs. Men vi var ikke alene. Under Q & A-sessionen spurgte mange:

"Hvordan kan jeg opbygge et designsystem som en enkelt designer?"

”Jeg er den eneste designer, hvilket råd har du til mig?”

Men mit team og jeg besluttede, at vi ikke ville lade dette stoppe os. Vi opretter stadig vores eget designsystem. Før jeg dykker ind i det, her er lidt baggrund.

Hvad er et designsystem?

"Et designsystem tilbyder et bibliotek med visuel stil, komponenter og andre bekymringer, der er dokumenteret og frigivet af et individ, team eller samfund som kode- og designværktøjer, så at vedtage produkter kan være mere effektive og sammenhængende." - Nathan Curtis

Kort sagt er et designsystem en samling af genanvendelige komponenter til at binde hele produkter sammen.

Mange mennesker har skrevet dybdegående artikler og bøger om designsystemer. Her er et par, du muligvis finder nyttige:

Style Guide vs. Design System

Du tænker måske godt, men er det ikke bare en stilguide?

”En stilguide er en artefakt af designprocessen. Et designsystem er et levende, finansieret produkt med en køreplan og efterslæb, der tjener et økosystem. ”- Nathan Curtis

Derudover er et designsystem en flok komponenter (eller molekyler) i forskellige størrelser, der kan sættes sammen på uendelige måder for at skabe en række større komponenter. Brad Frosts Atomic Design er inspiration til komponentdesign.

Fordele ved et designsystem

”Den udfordring, vi står overfor i dag, er, at værktøjer ikke kommunikerer hinanden meget godt, detaljer falder gennem revnerne, der er et stort kløft mellem design og teknik, og vi er nødt til at gøre en masse manuelt arbejde for at sikre, at vi altid er oven på alt. ”- UX Bootcamp

Som et lille team, der arbejdede på B2B-virksomhedssoftware, dykkede vi ned i at skabe et designsystem med begrænset tid, budget og ressourcer. Jeg ville minde vores team om fordelene.

Samlet set sparer vores team tid på grund af:

  • Nedsat debat - Ingen grund til at spilde tid på at revidere designbeslutninger for den samme komponent
  • Genanvendelige komponenter gør skala mulig
  • Forøget samarbejde - forbedring af arbejde eksternt og i forskellige kontorer

Jeg havde en egoistisk grund til at ville bygge et designsystem. Jeg indså hurtigt, hvis det lykkedes, kunne vi 'automatisere' mange opgaver, så vi kunne få tid til at gøre noget, jeg elsker, ved at løse brugerproblemer! Det er kernen i UX.

Design System Structure

For at skabe et designsystem skal vi nedbryde det og forstå dets dele:

UX Pin - Design System

En smule sjælsøgning er også involveret. Nogle spørgsmål at stille, når du opretter et designsystem:

  • Hvordan fungerer systemet i dag og i fremtiden?
  • Hvad er vores vision?
  • Hvilke problemer forsøger vi at løse?
  • Hvem påvirker dette problem mest?
  • Hvilken indflydelse ønsker vi, at et designsystem skal have på, hvordan vi arbejder?

Sådan forsøger andre at nærme sig dette:

Hvordan kan vores lille team lave et designsystem?

Hvor starter du, når du ikke har nok ressourcer, tid eller budget?

1. Start ikke fra bunden

”Hvis du ønsker at lave æblepai fra bunden, skal du først opfinde universet.” - Carl Sagan

Vores team gennemgår eksisterende designsystemer ude i naturen, så vi kan - som Austin Kleon siger:

Stjæle og kunstner - Austin Kleon

Mange virksomheder har offentliggjort deres designsystemer og har endda delt skissefiler. Jeg har delt en liste nedenfor. Denne kendsgerning og de mange andre skitseringsressourcer gør det til en no-brainer at bruge Sketch som vores valg af værktøj.

Derudover er der værktøjer derude, der kan hjælpe dig med hurtigt at oprette en baseline til dit designsystem:

2. Ved hvad du arbejder med

Vi har besluttet, at det er et must at gennemføre en UI-revision af alle vores websteder og egenskaber. Vi bliver muligvis nødt til at indkalde nogle få favoriserer for at få dette til. Men da det bare er at dokumentere, hvad der findes, er det muligvis ikke så svært at få hjælp fra andre. Dette vil være tidskrævende, men i sidste ende vil det være det værd. Vi vil være i stand til at designe holistisk, når vi opretter nye komponenter.

Dette kan være nyttigt til at lære at udføre en UI-revision:

3. Byg som du går

Et designsystem er et levende dokument. Når vi er klar over, at arbejdet aldrig udføres, har vi besluttet at hoppe ind og bygge, mens vi går. Når vi iterativt arbejder med vores projekter, vil vi designe med komponenter i tankerne og til sidst have et designsystem. Heldigvis er der nogle få af os, som gør det muligt for os at være samarbejde og ”stjæle” fra hinanden.

Hurtigt tip: Lav symboler i Sketch. Jeg ved, det virker tidskrævende, men når du først ser symbolernes magt, vil du sætte pris på det gamle ordsprog:

”Du skal gå langsomt for at gå hurtigt.”

4. Kend dine grænser

Begynd i det små.

Nogle designsystemer inkluderer kodestykker. Det er det ultimative mål, fordi det vil øge adoptionen på tværs af virksomheden og skabe en ensartet brugeroplevelse. Dog kan mit lille team ikke gøre det. Ikke endnu, det er.

Vi planlægger at starte med en skissefil med enkle komponenter. Når vi først er langt nok, arbejder vi med vores frontend-devs for at oprette CSS. At tillade udviklere at bruge deres 'valgte våben', når det kommer til kode, kan muligvis give designsystemet mulighed for at leve. Og med kodebaser, der ændres på det, der ser ud til at være en daglig basis, kan det være bedst at holde vores hænder væk fra det.

5. Bliv organiseret

Det lyder enkelt, men med projekter, der hoper sig op og truer frister, føles det lettere at gøre tingene på 'hurtig og beskidt' måde. At holde sig organiseret tager tid og er aldrig gjort, men det holder alle sane og reducerer e-mail eller slap rod med filer, der flyver frem og tilbage. Når vi begynder at arbejde på nye ting ved hjælp af et UI-kit, som vi skal bygge med et af de værktøjer, der er anført ovenfor, er vi nødt til at holde styr. Ellers ender vi, hvor vi startede - forskellige stilarter overalt!

Version af designdokumenter er en drøm for alle designere. Intet produkt har fået det 100% rigtigt. Vi vil prøve Abstract og Plant at se, hvordan det kan hjælpe med at holde os på sporet. Arbejder for en virksomhed, den eneste online platform, vi kan bruge til fillagring, er One Drive. Google-drev og Dropbox er andre muligheder, hvis du ikke er begrænset.

Dette er de første skridt, som mit team og jeg vil prøve, når jeg starter denne rejse. Fingre krydsede vi gør nogle fremskridt. Jeg vil meget gerne høre fra andre små hold, endda et ‘team of one’, for at lære, hvordan de takler denne udfordring.

Design System Directory

Som lovet er her nogle designsystemer til inspiration eller til "at stjæle som en kunstner:"

Mønsterbiblioteker / stilguider

Hvis du fandt dette nyttigt, ved du, hvad du skal gøre nu. Følg mig for at få flere artikler og tutorials på dit feed.