En steg-for-steg-guide for å skape et designsystem

Introduksjon

I en tid der alt er tilgjengelig overalt, har allestedsnærvær blitt en norm. Men det er også velkjent at konsistens er viktig for troverdigheten. Brukerne er blitt mer bevisste. En rask og smidig opplevelse er en grunnleggende forventning, uansett grensesnitt.

Dessuten er tid en ressurs du ikke har råd til å kaste bort. Alt dette burde være nok til at du får lyst til å gjøre mer med nettstedet eller grensesnittet ditt. Det er imidlertid ikke lett å være konsekvent med 50 ulike komponenter i designet uten å gjøre feil.

Sett i gang trommevirvlene for "Design System" er her for å gjøre livet ditt enklere.

Hva er et designsystem?

Et designsystem er et omfattende arkiv med tydelig dokumenterte, gjenbrukbare komponenter som produktteamet kan bruke til å skape digitale opplevelser. Med andre ord kan designsystemer betraktes som bedriftens eneste kilde til sannhet når det gjelder design.

Et designsystem er mer enn stilguider eller mønsterbiblioteker, det er i stadig utvikling. Dette økosystemet av retningslinjer knyttet til ulike enheter, inkludert UX-design, kan brukes som et rammeverk av byggeklosser for ethvert prosjekt for å sikre at alle komponenter er konsistente og samsvarer med merkevaren.

Et designsystem kan være nyttig for både nystartede bedrifter, bedrifter i vekst og store bedrifter, men det blir en viktig ressurs som det ikke kan forhandles om etter hvert som et produkt utvikles. Det kan også ha en positiv innvirkning på forretningsmål, arbeidsflyt, teamarbeid, brukeropplevelse og den generelle merkevareopplevelsen.

alt_text

Hva er fordelene med et designsystem?

Noen av fordelene ved å implementere et systemdesign er følgende

Øker effektiviteten og reduserer tidsbruken - En av de viktigste fordelene med et designsystem er muligheten til raskt å skape og gjenskape design- og utviklingsarbeid. Teamene kan bruke forhåndsdefinerte elementer for å redusere behovet for å finne opp hjulet på nytt og redusere risikoen for inkonsekvens.
Forbedrer den visuelle konsistensen på tvers av sider og kanaler - Mangel på et designsystem for hele organisasjonen kan føre til inkonsekvent visuelt uttrykk, en fragmentert brukeropplevelse eller isolasjon fra merkevaren. Et sammenhengende sett med standarder gjør det også enklere å håndtere større redesigns eller visuelle omprofileringer i stor skala.
Fremmer et fellesspråk - Et felles designspråk reduserer muligheten for bortkastet design- eller utviklingstid på grunn av misforståelser i og mellom tverrfaglige team.
Gjør det mulig å fokusere på mer komplekse problemer - Teamene kan bedre løse komplekse problemer, som prioritering av informasjon, reisehåndtering osv., når enkle brukergrensesnittkomponenter opprettes og er entydige.
Fungerer som et referanse- og opplæringsverktøy for bidragsytere - Et designsystem forenkler onboarding-prosessen ved personalendringer. Det gjør det også enklere for nye medarbeidere å sette seg inn i UX-design eller innholdsutvikling.
Bidrar til et sterkt og tidløst varemerke - Et designsystem har som formål å kommunisere en bestemt identitet og design bak produktene som det brukes til. Det bidrar til å skape sterke merkevarer og hjelper folk til å huske merkevareopplevelsen. Dette gjør at folk føler seg mer knyttet til en merkevare og stoler mer på den.

En ti-trinns guide til hvordan du bygger et designsystem

Vi har utarbeidet en ti-trinns prosess for å hjelpe bedriften din med å skape et designsystem.

1. Gjør en grundig analyse av den eksisterende designprosessen.

Det første trinnet for å legge en strategi og sette i gang en prosess er å forstå hvor dere er i dag. Ved å gjennomgå og analysere organisasjonens nåværende designprosess kan du få en bedre forståelse av hvilket systemdesign som passer best for din merkevare. Still deg selv følgende spørsmål:

Hva er organisasjonens nåværende designtilnærming?
Hvilke eksisterende verktøy bruker organisasjonen din?

Sørg for å evaluere produktteamets designmodenhet. Dette vil hjelpe deg med å beregne hvor lang tid det vil ta å implementere det nye systemet i organisasjonen.

2. Bestem merkevarens alfabet

Determine your Brand's Alphabet

Alfabetet til en merkevare fører til merkevareidentiteten, dvs. merkevare- og produktverdiene og merkevarespråket. Varemerkespråket består av former, fonter, farger, animasjoner, stemme og tone.

Designere bruker et visuelt språk som er definert av merkevarens alfabet. En gjennomgang av retningslinjene for merkevaren og en samtale med interessentene kan hjelpe deg med å forstå merkevareidentiteten og -språket.

3. Gjennomføre revisjon for nåværende produkt AI

En brukergrensesnitt-revisjon av det nåværende produktet vil hjelpe deg med å takle en stor utfordring innen produktdesign: designduplisering. Revisjonen har to formål - å

Gjør oppmerksom på områder i produktet med betydelige uoverensstemmelser.
Identifiser de mest brukte og viktigste elementene i produktet.

En revisjon av brukergrensesnittet er en prosess i flere trinn. Det er viktig å identifisere og analysere de viktigste brukergrensesnittegenskapene og bruken av dem i komponentene. Du kan bruke tilgjengelige verktøy for å se antall unike farger og skrifttyper i stilarkene dine. Deretter kan du dele opp hvert enkelt nettsteddesign i enkeltelementer.

4. Fastsett designprinsippene for systemet ditt

For å skape en god brukeropplevelse er det viktig å forstå hva som ligger bak designbeslutningene. I tillegg gjør et tydelig sett med mål det enklere å definere designprinsipper og koordinere med teamene.

Vil du ha en prosess for designsystemet? Begynn med disse spørsmålene:

Hva skaper du?
Hvorfor gjør du det
Hvordan vil du bygge den?

Designprinsippene må gjenspeile merkevarens verdier og visjon.

5. Bygg opp et komponentbibliotek

Dette er også kjent som mønsterbiblioteket, og bør inneholde alle funksjonelle og dekorative elementer i brukergrensesnittet. Vurder komponentene i forhold til prosjektet, brukernes behov og forretningsmålene, og behold dem du trenger.

Build a Component Library

6. Fastsette regler

Designsystemer er ikke laget for å begrense designere til en bestemt designretning. Tvert imot er det kun ment å gi designere og utviklere et grunnleggende rammeverk som utvider den kreative retningen og gir rom for innovasjon.

Det er to tilnærminger til Design System-regler, som nevnt i Alla Kholmatovas bok:

Strenge regler - Designere og utviklere følger en streng prosess for å introdusere nye mønstre eller komponenter.
Løse regler - Disse reglene gjør det mulig for designere og utviklere å skape uten å følge strenge begrensninger hvis de mener det gir bedre design.

I likhet med mange andre aspekter av livet er det viktig å finne den rette balansen mellom disse reglene, slik at produktet kan være konsekvent og samtidig kreativt.

7. Velg styringsmodell

Dynamiske designsystemer i stadig utvikling krever en enkel prosess for godkjenning og implementering av endringer. Det finnes tre modeller for styring:

Solitær modell - Et individ eller en gruppe individer "styrer" designprosessen direkte.
Sentralisert modell - Ett team har ansvaret og styrer systemets utvikling.
Federert modell - Flere personer fra flere grupper leder systemdesignprosessen.

Selv om hver av disse modellene har sine fordeler og ulemper, kan spesielt den ensomme modellen føre til at den ene ansvarlige blir en flaskehals for utførelsen av mange oppgaver. Det beste er å bruke en kombinasjon av ulike modeller som er tilpasset dine behov.

8. Definere komponentstruktur

Duplisering av funksjonelle komponenter er en stor utfordring i designsystemer. Dette resulterer i et lite fleksibelt system og krever at designere (og utviklere) må lage nye elementer hver gang det oppstår et nytt scenario.

Vellykkede systemdesign er i stor grad gjenbrukbare og gjør det mulig for brukerne å bruke dem som grunnlag for sine produkter. Derfor anbefales det å utvikle elementer som kan gjenbrukes i ulike innhold.

Kriterier for gjenbrukbare og skalerbare komponenter:

Modulær - Uavhengige komponenter og utskiftbare elementer.
Komponerbar - smelter sammen eksisterende komponenter for å skape nye.
Kan tilpasses - Komponenter som kan tilpasses og fungere i en rekke sammenhenger.

9. Sørg for at alle team bruker et felles språk

Formålet med et designsystem er blant annet å legge til rette for sømløst teamarbeid. Derfor er det viktig å integrere systemet i teamets arbeidsflyt. Det øker produktiviteten samtidig som det skaper verdi for teammedlemmene.

Ved å få en bedre forståelse av hvordan ulike personer bruker designsystemet i den innledende integrasjonsprosessen, kan du tilpasse systemet deretter.

10. Formidle endringer regelmessig

En designprosess utvikler seg i takt med organisasjonen og kan ikke være statisk. Etter at systemet er innført i organisasjonen, er det derfor viktig å kommunisere alle endringer og holde organisasjonen oppdatert.

En kortfattet og godt vedlikeholdt endringslogg kan hjelpe brukerne med å forstå ulike oppgraderinger og hvordan de vil påvirke arbeidet deres.

Tre forbilledlige eksempler for å hjelpe deg i gang

Atlassian Design System

Atlassian Design System (https://atlassian.design/)

Atlassian Design System, et kjent australsk programvareselskap, har som mål å tilby sømløst samarbeid mellom smidige, spredte team over hele verden.

Trello og Jira, to av Atlassians mye brukte samarbeidsverktøy, gjenspeiler til fulle selskapets designfilosofi. Denne filosofien handler om å utnytte den digitale opplevelsen til å øke produktiviteten og det generelle potensialet til team og individuelle teammedlemmer.

Når det er sagt, tilbyr Atlassian Design System smidige teknikker og effektiv sporing av hvert eneste trinn i et prosjekt, fra produktplanlegging til levering. Dette gir til syvende og sist gode resultater når det gjelder utvikling og levering av produkter. Designsystemet omfatter i hovedsak følgende:

Retningslinjer for utforming
Merkevarestandarder
Produkt
Illustrasjon
Prototyping
Markedsføring
Personlighet

IBM Design System

IBM Design System (https://carbondesignsystem.com/migrating/guide/design)

IBM er et godt eksempel på en stor IT-virksomhet som opererer globalt og følger sitt eget designsystem.

Deres kompetanse omfatter alt fra bedriftsrådgivning og finansiering til utvikling av programvare, IT-hosting/administrasjon og løsninger som kobler programvare til maskinvare.

IBMs grunnleggende prinsipp er å hele tiden drive utviklingen fremover, enten det gjelder et samfunn eller en merkevare, ved hjelp av vitenskap, fornuft og intellekt.

Ifølge IBM er god design ikke bare en nødvendighet, men også en forpliktelse overfor brukerne. Her er noen av de viktigste funksjonene i Carbon Design System, som gir utviklere og designere som arbeider med Adobe, Axure og Sketch, et vell av verktøy og ressurser:

Datavisualisering
Mønstre
Komponenter
Retningslinjer
Veiledninger

Uber Design System

Uber Design System (https://baseweb.design/)

Vi har alle kjørt med Uber minst én gang. Det amerikanske teknologiselskapet satser på bevegelse, inkludert matlevering, samkjøring, peer-to-peer-samkjøring og mikromobilitet ved hjelp av sparkesykler og elsykler.

Uber trenger et effektivt systemdesign for at denne typen tjenester skal fungere feilfritt på tvers av alle undermerker, interne merker, produkter og prosjekter.

Uber Design Systems primære egenskaper er:

Merkevarearkitektur
Sammensetning
Tonefall
Bevegelse
Illustrasjon
Fotografering
Ikonografi
Farge
Logo
Typografi

Tips du bør kjenne til før du oppretter ditt første designsystem

1. Tidlig og tydelig kommunikasjon er din nye beste venn

Det kan være komplisert å involvere de interne kundene med en gang. Tilbakemeldingene kan faktisk hindre prosessen hvis de er tvetydige, kommer for tidlig i en alfa- eller beta-utgivelsessyklus eller ikke er nyttige.

Fortell kundene dine, brukerne av designsystemet, hva du trenger for å sikre at du får konstruktive tilbakemeldinger. Hvis du er i en tidlig pre-release-syklus, bør du være ærlig og tydelig med hensyn til hvilke innspill du ønsker. Dette indikerer at du er ute etter de viktigste feilene ved produktet, og ikke kritikk av høy kvalitet.

Vær oppmerksom på at du ikke tenker for mye, men nøl ikke med å overkommunisere.

2. Fotsporene dine er ikke det eneste du trenger å følge med på

En viktig del av prioriteringen er ofte å spore bruken av designsystemer. Det er viktig å forstå hvor systemet brukes, av hvem, hvor ofte og hvor ofte det oppdateres.

Ved å samle inn daglig statistikk over hvilke team som bruker hvilke versjoner av biblioteket, kan man få en god oversikt over adopsjons-, oppgraderings- og nedgraderingsfrekvensen.

Når du har identifisert teamene som sjelden oppdaterer, kan du finne ut hvilke problemer som blokkerer oppgraderingen, og deretter utbedre dem.

3. Tilbakemeldingsmekanismer er like undervurdert som Rhaeghal fra GOT.

For å sikre at systemet ikke bare er verdifullt for brukerne, men også noe de føler seg som en del av og aktivt har bidratt til, er det viktig å ha enkle, men greie måter å gi tilbakemeldinger på (Slack, e-post osv.) og bidra til systemet på.

Gi alltid instruksjoner om hvordan og hvor du kan gi tilbakemelding på så mange områder som mulig, og ta aldri for gitt at brukeren finner tilbakemeldingen på det stedet du tror er mest opplagt.

Et designsystem er den ledestjernen organisasjonen din trenger

A Design System is the North Star Your Organization Needs

Et vellykket, gjennomarbeidet designsystem blir en del av selve ryggraden i et selskap, noe som resulterer i konsistente og forsterkede opplevelser. I tillegg får designere og utviklere muligheten til å kommunisere formålet med produktet på en bedre måte, i stedet for å måtte sette sammen grunnleggende byggeklosser.

Enhver generalist kan være din partner i arbeidet med å levere design, men bare en designspesialist kan identifisere aktuelle problemer, utfordringer og ambisjoner for å skape et designsystem som er spesielt tilpasset deg. Nå er ikke tiden for å vente. Med denne omfattende veiledningen i hvordan du lager et designsystem, er du bare et initiativ unna en fullstendig omlegging av produksjonsprosessen.