Hvad er et designsystem?

Det kan være vanskeligt at definere, hvad et designsystem er, og hvad det betyder for en organisation. I dette indlæg tager vi samtalen med Design Systems tidligere stilguider og komponentbiblioteker og går i stykker med siloer mellem udvikling og design.

Af: Varun Vachhar og Catherine Maritan

Problemet med aflevering

Fra vores erfaring behandler de fleste organisationer websteder som en samling sider. Sider giver et holistisk billede af designproblemet - hvilket indhold vi viser, hvad er dets formål, hvordan skal vi vise dette indhold, og hvordan skal brugeren interagere med det. Denne ideologi er det, der driver design- og udviklingsprocessen. Designere opretter design til hver side, efterfulgt af en hånd-off til udviklere, som derefter arbejder med en produktchef for at opdele mock-ups i billetter til udviklere.

Selv om den sidebaserede tilgang er populær, udgør en masse udfordringer. Ansøgninger er meget dynamiske. Grænsefladen skal tage højde for mange forskellige applikationstilstande og lydhøre varianter. Det er kedeligt at beskrive alle disse tilstande i statiske mock-ups. Når udviklingsprocessen begynder, ændres kravene ofte. Du opdager nye stater, der tidligere ikke blev taget i betragtning, eller som der muligvis er implementeringsudfordringer. I mellemtiden gentager designerne sig. På grund af denne dæmpede karakter af denne tilgang gør det det svært at løse tryk fra begge sider. Med tiden begynder teamet at opleve en række symptomer:

Udviklere blokeres af designere

Efterhånden som kravene ændres, og vi afslører nye designovervejelser, vil designere uundgåeligt være nødt til at opdatere de sider, de tidligere havde designet. Dette fører til to scenarier: udviklerne blokeres konstant for at skulle vente på design-iterationer, eller udviklingsholdet smed fremad uden design og leverer inkonsekvente eller off-brand brugeroplevelser.

Dårlige produktbeslutninger træffes

Traditionelt har designere kun været ansvarlige for at tænke på den holistiske oplevelse og lade udviklere opdele dette design i små, implementerbare bidder.

Hvordan udvikleren fordeler dette design har konsekvenser for, hvordan designet kan ændres på et senere tidspunkt, eller hvordan nye typer indhold kan passe ind i det, der allerede er bygget. En udvikler har muligvis ikke den kontekst, der er nødvendig for at tage informerede beslutninger om denne struktur, og den resulterende produktimplementering er muligvis ikke fleksibel nok til alle forretningsscenarier.

Webstedets design bliver inkonsekvent

Vi har alle set disse websteder, der indeholder 36 forskellige knapformater, og spurgte os selv "hvordan kunne nogen lade dette ske?"

Det kan ske hurtigere, end du måske tror. Når vi opretter og itererer på produkter en side ad gangen, er det sandsynligt, at det samme UI-element vil blive designet og implementeret mere end én gang. Dette betyder ikke kun, at der kan være uoverensstemmelser fra get-go, men det øger også chancerne for, at en forekomst af en knap går glip af, når der opdateres i fremtiden.

Der er meget spildt tid med at løse de samme problemer igen

Hver gang der er en ny anmodning, åbner en designer (ofte gange) en ny fil og starter designprocessen fra bunden. For hele tiden at løse det holistiske problem, der er ved hånden, er der også lige så meget tid til at definere alle de nitty-gritty designdetaljer. Hvordan ser denne dropdown ud på hover? Hvad med denne knap? Dette er tidskrævende opgaver.

Nu er disse detaljerede design, nitty-gritty spørgsmål vigtige, men er ikke unikke problemer. Det er sandsynligvis, at en anden designer på teamet allerede har tænkt på det, eller måske er det noget, der allerede er designet på en anden side. Når denne dropdown-hover-tilstand er blevet defineret en gang, skal designeren ikke være nødt til at tænke over det eller dokumentere det igen.

Vedligeholdelse bliver et mareridt

At dokumentere et produkt én side ad gangen er ikke nøjagtigt vedligeholdeligt. Denne tilgang tillader ikke designere let at revidere tidligere designbeslutninger. Pludselig kræver selv den mindste ændring i designretning, at en designer skal opdatere i 12 designfiler, 6 afleverede dokumenter og 22 steder i kode. Uundgåeligt vil nogen glemme at opdatere et dokument, og disse uoverensstemmelser vil lade udviklere skrabe i hovedet og bede om ”kilden til sandhed”.

Efterhånden som tiden går, og et produkt (og dets dokumentation!) Bliver større, bliver prisen for funktionsændringer også større. Design og teknisk gæld påløber. Spol frem 3 år ad vejen, og nu vil ingen gerne røre ved produktet.

Komponentbaseret design og udvikling

Der var helt klart behovet for en bedre tilgang. Både designere og udviklere ledte efter teknikker til at forbedre og optimere deres arbejdsgang.

Som et resultat begyndte designere at indføre stilguider - et sæt standarder til at designe produktet ofte. Disse vil omfatte typografiske skalaer, farvepalet og UI-mønstre og blev offentliggjort som et statisk dokument. Designværktøjer udviklede sig til en symbolbaseret model. Dette gjorde det lettere at opretholde tilstande og komponere mere komplekse grænseflader.

I mellemtiden vedtog JavaScript UI-rammer en komponentbaseret arkitektur. Dette gjorde det muligt for udviklere at oprette komponentbiblioteker - en samling af genanvendelige UI-elementer, der kan bruges til at oprette applikationen.

Dette var spændende. For første gang arbejdede både designere og udviklere efter den samme mentale model. Brugergrænseflader er både designet og bygget som isolerede udvidelige skiver, der er sammensat til at skabe hele sider. Brad Frosts Atomic Design-mønster leverede en god model til, hvordan man nærmer sig komponentbaseret design og udvider denne praksis til udvikling.

Ved at fokusere på isolerede, udvidelige og genanvendelige komponenter kan vi overflade implementeringsudfordringer meget hurtigere i processen. Det muliggjorde større samarbejde mellem designere og udviklere, og tidligere tavsede hold begyndte at tale det samme sprog. Iterationer af design eller udvikling kan være mere målrettede og isolerede. Det var lettere at se, hvilke UI-komponenter der allerede findes, hvilket reducerede en masse duplikeret indsats.

Hvad er et designsystem?

Den komponentbaserede model var et massivt skridt i den rigtige retning. Der var et reduceret behov for aflevering, men der var nu flere sandhedskilder - i designværktøjer, i kode og undertiden i dokumentation. Der var genanvendelige komponenter, men normalt ingen regeringsmodel for, hvordan man itererer. Hvilket igen fører til inkonsekvent brugergrænseflade eller et behov for konstant designtilsyn.

Der er en almindelig misforståelse af, at et designsystem kun er en stilguide eller et komponentbibliotek, udtryk, som folk ofte bruger om hverandre. Efter vores mening er disse imidlertid begge underkomponenter i et designsystem.

Et designsystem er en systematisk tilgang til produktudvikling - komplet med retningslinjer, principper, filosofier og kode. Det skinner et fokus på, hvordan et team designer, hvilket gør det til et fantastisk værktøj til at skalere din designpraksis, reducere behovet for aflevering og fremme mere samarbejde. Som Nathan Curtis siger, et "Design System er ikke et projekt, det er et produkt, der betjener produkter". Vores tilgang til et designsystem inkluderer:

  1. Designsprog: Det overordnede visuelle design af et digitalt produkt. Dette fundament definerer egenskaber som typografi, farver, ikoner, afstand og informationsarkitektur. Essensen af ​​dit brand i en digital kontekst. Det opretholdes som design-tokens i kode.
  2. Design Kit: Et bibliotek med delte stilarter, symboler eller komponenter, der kan bruges af produktteams til at designe eller prototype nye oplevelser. Disse symboler spejler JavaScript-komponenterne fra komponentbiblioteket og opdateres til altid at være synkroniserede.
  3. Komponentbibliotek: Et sæt JavaScript-komponenter, der er versionskontrolleret og er sammensat til at opbygge et eller flere produkter.
  4. Sandkasse: Et værktøj til at udvikle komponenter isoleret, dokumentbrugssager og skrive strukturelle eller visuelle tests. Dette er til Design System-udviklere.
  5. Dokumentation: At binde alt sammen, det har retningslinjer for, hvordan man forbruger Design System, design og dev overvejelser og detaljeret dokumentation for hver komponent. Dokumentationssitet indeholder ofte en levende legeplads, der er rettet mod forbrugerne at prøve Design Systemet i browseren.
  6. En styringsmodel for, hvordan vi kan fortsætte med at udvikle designsystemet, og hvordan andre kan bidrage til det.

Et designsystem gør det muligt for dine produktteam at dele læring på tværs af siloer, undgå duplikatarbejde og fokusere mere på brugeroplevelsesproblemer snarere end UI-problemer.

Hvordan ser et designsystem ud i praksis?

Selvom vi mener, at hvert designsystem bør omfatte de 6 ovenfor beskrevne søjler, vil de nøjagtige detaljer eller strukturer i hvert designsystem være lidt forskellige. Hvad er strukturen i dit team eller din organisation? Vil dit Design System servicere flere mærker, produkter eller regioner? Vil der være et dedikeret team til rådighed for at styre systemet? Alle disse spørgsmål informerer om, hvordan et designsystem bedst understøtter dine mål.

Uanset den nøjagtige implementering har vi set, at virkningen af ​​et Design System er relativt universel.

Teammedlemmer fra forskellige discipliner skaber en fælles forståelse

I et designsystem deles det samme sæt komponenter af både designere og udviklere. Styringsprocessen sikrer, at begge discipliner er enige om de nøjagtige krav til en komponent og sikrer, at den imødekommer alle parters behov, uden de antagelser, som det kan føre til smertefuldt omarbejde senere. Funktionerne og brugsretningslinjerne for disse komponenter dokumenteres derefter et centralt sted, så alle har en delt kilde til sandhed.

Pludselig taler alle det samme sprog. Når en designer opretter en side, kan de nu bruge disse eksisterende byggeklodser ved at gribe fat i UI-kittet og kan med sikkerhed pege på de eksisterende byggeklodser, når implementeringen begynder. Der er ingen lange hånd-off dokumenter nødvendige. Udvikleren kan derefter hente de samme komponenter fra komponentbiblioteket. Ikke flere overraskelser eller ødelagt telefon.

Hold kan gentage hurtigere

Ved at implementere et Design System låser du muligheden for at frigive nye designs i mindre bidder og kortere feedback-løkker med færre ressourcer. Det er som om du allerede har fremstillet legoklodser til dig, det tager meget mindre tid at bygge det borg, sammenlignet med hvis du skulle specificere og bygge blokke fra bunden.

Flere hold kan begynde at udnytte hinandens arbejde

Da designsystemer kan deles på tværs af flere teams, kan effektiviteten udvides mellem flere teams eller flere produkter. Når et team har brugt tid og kræfter på at løse et designproblem, hvorfor skulle et andet team i din virksomhed heller ikke drage fordel af dette arbejde? Flere hold, lokaliteter eller endda separate mærker kan nu gøre brug af hinandens innovationer og undgå at opfinde hjulet igen.

Designerens rolle ændres

Når et designsystem er bygget, ændres en designerrolle på en af ​​to måder:

  1. For designere, der bygger eller bidrager til Design System, bliver design af UI et mere teknisk job. Det er deres ansvar at sikre, at de designer tingene på en genanvendelig og systematisk måde for at sikre, at deres design efterligner udviklingsverdenen.
    Komponenter og designbeslutninger (som mellemrum, farver, typografi) forekommer ikke i et vakuum, og enhver beslutning har kaskaderende effekter. På grund af dette kræves det, at designere har et ekstra niveau af disciplin til at opbygge og overholde systemet.
  2. Designere, der bruger systemet, afhjælpes imidlertid fra at tænke på disse nitty-gritty UI-interaktioner og får i stedet at fokusere på den holistiske oplevelse, brugerstrømmene og indholdet. Da nuancerne allerede er defineret af Design System, skifter kreativiteten fra “Hvordan skal jeg designe denne knap” til “Hvordan skaber jeg den mest effektive oplevelse?”. Nu kan den virkelige innovation begynde.

Udviklingen af ​​designsystemet

Det er vigtigt at huske på, at et designsystem aldrig rigtig "er færdig"; det vil vokse og udvikle sig som ethvert andet produkt. Når et websted eller et produkt ændrer sig over tid, vil der være behov for, at nye brugergrænseflademønstre oprettes. Ved at sikre, at de rigtige regeringsprocesser er på plads, kan hold forstå, hvornår og hvordan de bedst kan introducere nye elementer i systemet.