Beste praksis for å bygge et designsystem

Hvis du har en stor nok organisasjon med flere kanaler for å fremme merkevaren din – som nettsteder og apper – bør du vurdere å bruke et designsystem for å administrere dine grafiske komponenter og stilretningslinjer.

Men når du begynner å planlegge ditt designsystem, bør du stoppe opp og vurdere de langsiktige konsekvensene og mulige fallgruvene. For å hjelpe deg i denne prosessen har vi samlet et sett med beste praksis for å bygge et designsystem.

Kommuniser tidlig

For de fleste i organisasjonen din er et designsystem "bare nok et verktøy" de må jobbe med, eller i noen tilfeller, noe de har som mål å ignorere. Denne holdningen må selvsagt unngås, noe som gjør det viktig å kommunisere tidlig om hvordan et godt designsystem kan bidra positivt.

Det er flere fordeler med et designsystem, som Oscar Insurance Corporation bemerker, inkludert:

• Skalerbarhet: Enten det er vanlig vekst eller å dele opp et selskap i mindre deler, kan skalering opp eller ned være en hodepine for enhver organisasjon. Bruk av komponenter og mønstre i en bredere eller smalere sammenheng blir imidlertid sterkt lettet ved bruk av et designsystem og vil i det minste gjøre designteamet ditt lykkeligere.
• Gjenbruk: I stedet for å jobbe dobbelt eller unødvendig starte fra bunnen av på hvert nytt prosjekt, lar et designsystem dine redaktører, designere og utviklere raskt gjenbruke bilder, knapper, styling og koder.
• Merkevarebeskyttelse: Å beskytte merkevaren blir en stadig viktigere prioritet for enhver organisasjon, da merkevaren er en kvalitetsmarkør og en rask vei for kunder i deres vurdering av produktet ditt. Å ha et sentralt lager med bestemte merkevaremessige regler i form av et designsystem er en annen nøkkelfordel.

Sørg for å gjøre disse fordelene kjent i organisasjonen din før du går videre med prosessen med å bygge et designsystem.

Hold det enkelt

Overdrevent komplekse systemer vil avskrekke de fleste, kanskje bortsett fra de mest entusiastiske nerdene. På den ene siden kan en komponent med en for streng definisjon av farge, størrelse, oppsett, funksjonalitet og interaksjonsmønstre være begrensende og demoraliserende. På den andre siden kan for mye frihet og for mange alternativer føre til inkonsekvens og skade merkevaren din.

Du må finne en balanse mellom frihet og kontroll. Selv om dette kan løses komponent for komponent, kan et generelt prinsipp være å unngå å bygge tilpasning på forhånd – og heller legge det til enkeltkomponenter når det trengs.

Et annet prinsipp er å bygge komponenter du trenger, og ingenting annet. Ikke legg til pene knapper eller CSS bare fordi du beundrer deres estetikk – legg til komponenter av en grunn. Å designe komponenter uten noe fornuftig brukstilfelle eller oppgave å løse er som å lage mat uten å tenke på ingrediensene, eller å filme en video uten å tenke på innholdet.

I enkelhetens navn, bygg kun komponenter som er nødvendige for dine nåværende og forventede behov. En logisk konsekvens er da å fjerne enhver ubrukt komponent fra designsystemet ditt.

Se også: Hvordan bygge et raskt og moderne nettsted med Next.js og headless CMS »

Bygg for skala

Skalering betyr å tilpasse designsystemet ditt til en større eller mindre sfære – f.eks. å ta i betraktning bruken av dine komponenter og mønstre i et større antall forskjellige kanaler enn du opprinnelig startet med, eller omvendt. Det er aldri for tidlig å bygge for skala, og heller ikke for sent.

Målet med skalering oppnås hovedsakelig gjennom å ha et solid system av klare designretningslinjer, standarder og prinsipper, som gjør det lettere å skalere designmønstre og komponenter sammen med et voksende designteam eller organisasjon.

Et solid designsystem vil sikre konsistens og kvalitet på tvers av alle digitale opplevelser, og øke hastigheten og kreativiteten til designerne dine.

Hvis du jobber i en stor organisasjon, kan skalering av design oppnås optimalt gjennom en teaminnsats. Selvfølgelig trenger ikke alt å gjøres "av en komité," men design i isolasjon risikerer dupliseringer og ineffektivitet.

Videre bør skalering være en fordel for alle i organisasjonen din. Finn personer i andre team og avdelinger, introduser dem for de positive effektene av et designsystem, og gi dem mulighet til å bringe prinsippene videre i sine respektive funksjoner.

Involver utviklingsteamet ditt, markedsføringsteamet ditt, driftavdelingen din og mer. Ingen skalering vil skje hvis det ikke involverer et økende antall mennesker og funksjoner på lang sikt.

For et mer praktisk tips om skalering, vurder om det kan være smart å begrense visse funksjoner av en komponent. Hvis organisasjonen din er stor og omfatter flere digitale opplevelser, apper og interne verktøy, kan det være du nøler mer og mer før du endrer en komponent – ettersom du kanskje ikke nødvendigvis vet hvordan en endret knapp vil manifestere seg på tvers av forskjellige kanaler.

For å redusere dette kan du for eksempel aktivere funksjonsflagging for å begrense spesifikke funksjoner og oppdateringer i en komponent, i stedet for et alt-eller-ingenting-designsystem.

Endring er OK

Selv om informasjonsteknologi har gjort forestillingen om noe som er permanent skrevet i stein utdatert, forblir den generelle følelsen av stabilitet og konservatisme.

Å tro at du ikke kan endre en primærfarge eller visuelle retningslinjer fordi "de alltid har vært slik" er feil tenkning. Vi lever i en digital tidsalder, hvor digital forstyrrelse og innovasjon endrer trender raskere enn noen gang før. Digitale elementer kan endres og bør endres – hvis det er en gyldig grunn.

Når det gjelder digitale designsystemer, er ingen avgjørelse permanent og alt kan endres – når som helst. Ikke bli fanget i en hengemyr av beslutningsvegring og usikkerhet, bruk analyser og brukerinnsikt for å støtte opp om dine påstander om behov for å endre en gitt designkomponent. Sikre fleksibilitet. Se på dataene fra brukeratferd og arbeidsflyter for å avgjøre hvor du kan være rigid og hvor du kan være fleksibel i designsystemet ditt.

Se også: 7 sjekkpunkter for å skape suksess for dine digitale prosjekter »

Aktiver smart dokumentasjon

I ethvert prosjekt eller foretak er det viktig å dokumentere hva du har gjort, hva du planla, hva du gjorde, og hva du planlegger å gjøre. Å utføre dokumentasjon kan være en kjedelig og tidkrevende prosess, men du oppnår enorme fordeler i form av å forklare hvorfor noe skjedde, hvorfor du valgte den veien du gjorde, og hvordan du kan unngå å duplisere arbeidet.

Det samme prinsippet gjelder for et designsystem, spesielt når designteamet ditt eller organisasjonen som helhet blir større enn hva en enkel felles forståelse eller en munn-til-munn-tilnærming kan håndtere. Så du trenger dokumentasjon for designsystemet ditt, men hva er den beste tilnærmingen for å opprettholde en oppdatert og tilgjengelig dokumentasjon for alle komponentene i designmønstre og kode?

En dokumentasjon er verdiløs hvis ingen bruker den. En flott PDF som dokumenterer alle komponentene, stilene og retningslinjene dine vil raskt bli utdatert, i tillegg til å være lang og vanskelig å navigere. Et stilguide-nettsted kan være litt bedre, men hvis det ikke gjøres riktig fra begynnelsen med et dedikert CMS, vil også dette raskt bli utdatert og vanskelig å vedlikeholde.

Et eksempel på smart dokumentasjon, ifølge UX Planet, er å erstatte tung dokumentasjon med lett, interaktiv, lett tilgjengelig og oppdatert dokumentasjon – i form av et Sketch-bibliotek. Transformer alle komponentene til Sketch-symboler, bruk Sketch-pluginen Lingo for å lage et delt team-UI-kit med alltid oppdaterte komponenter, og bruk pluginen Runner for raskt å søke og bruke en forhåndsdefinert komponent for å lage et grensesnitt.

Bygg en robust prosess

Alle de tidligere beste praksisene vil bidra til dette siste punktet, nemlig å bygge en robust prosess for vedlikehold og bruk av designsystemet ditt – slik at teamet og organisasjonen din kan vokse og bidra i overskuelig fremtid. Du bør ha en etablert designprosess som standardiserer dokumentasjon, overlevering, kodegjennomgang og kvalitetssikring.

Et designsystem er som en organisme, det vil kontinuerlig endres, vokse og tilpasse seg dine nåværende og fremtidige behov. Ved å bruke disse beste praksisene, fra å kommunisere tidlig og holde designsystemet enkelt, til å bygge for skala og aktivere smart dokumentasjon, bør du ha et godt utgangspunkt for å lykkes i dine bestrebelser.

Bonus: 5 raske tips fra Gjensidige

Gjensidige er et norsk gjensidig forsikringsselskap som har bygget et dedikert designsystem for sine digitale kanaler. Vi spurte digital redaktør, Torstein Aas-Hansen, om å dele selskapets erfaringer og beste praksis for å bygge et designsystem, og her er deres fem essensielle raske tips:

1. Legg tid og krefter i arbeidet med designsystemet, og samarbeid på tvers av funksjoner og avdelinger.
2. Finn inspirasjon fra andre, men lag et designsystem som passer for deg.
3. Start beskjedent, med et designsystem som er enkelt å bygge og kan brukes av mange mennesker i forskjellige sammenhenger.
4. Lag en veikart som forteller deg hvor du vil være om seks måneder, og hva du må gjøre for å komme dit.
5. Sikre et tverrfaglig eierskap til designsystemet i hele design- og utviklingsmiljøet.

Først publisert 16. april 2019, oppdatert 23. september 2022.