En trin-for-trin-guide til at skabe et designsystem

Introduktion

I denne tid med tilgængelighed overalt og alle vegne er allestedsnærværelse blevet en norm. Men det er også velkendt, at konsistens er troværdighed. Brugerne er nu mere bevidste. En hurtig og problemfri oplevelse er en grundlæggende forventning, uanset grænsefladen.

Desuden er tid et aktiv, du ikke har råd til at spilde. Alt dette burde være nok til at give dig lyst til at gøre mere ved din hjemmeside eller dit interface. Men at forsøge at være konsekvent med 50 forskellige komponenter i designet uden fejl er en stor opgave.

Sættrommehvirvlerne i gang, for "Design System" er her for at gøre dit liv lettere.

Hvad er et designsystem?

Et designsystem er et omfattende arkiv af klart dokumenterede genanvendelige komponenter, som produktteamet kan bruge til at skabe digitale oplevelser. Med andre ord kan man betragte designsystemer som en enkelt kilde til sandhed for en virksomhed, hvad angår design.

Mere end stilguider eller mønsterbiblioteker er et designsystem i konstant udvikling. Dette økosystem af retningslinjer relateret til forskellige enheder, herunder UX-design, kan bruges som en ramme af byggesten til ethvert projekt for at sikre, at alle komponenter er konsistente og matcher brandingen.

Et designsystem er nyttigt for både nystartede virksomheder, virksomheder i vækst og virksomheder, men det bliver et vigtigt aktiv, der ikke er til forhandling, når et produkt udvikles. Det kan også have en positiv indflydelse på forretningsmål, workflow, teamwork, brugeroplevelse og den overordnede brandoplevelse.

alt_text

Hvad er fordelene ved et designsystem?

Nogle af fordelene ved at implementere et systemdesign er

Øger effektiviteten og reducerer tiden - En primær fordel ved ethvert designsystem er muligheden for hurtigt at skabe og genskabe design- og udviklingsarbejde. Teams kan bruge præfabrikerede elementer for at mindske behovet for konstant at genopfinde den dybe tallerken og reducere risikoen for inkonsekvens.
Forbedrer visuel konsistens på tværs af sider og kanaler - Mangel på et designsystem for hele organisationen kan føre til inkonsekvent grafik, en fragmenteret brugeroplevelse eller isolation fra brandingen. Et sammenhængende sæt standarder hjælper også med at håndtere større redesigns eller visuelle rebrands i stor skala.
Fremmer et fællessprog - Et fælles designsprog mindsker muligheden for spildt design- eller udviklingstid på grund af misforståelser i og mellem tværfaglige teams.
Giver bedre mulighed for at fokusere på mere komplekse problemer - Teams kan bedre løse komplekse problemer som informationsprioritering, rejsestyring osv., når enkle UI-komponenter er skabt og entydige.
Fungerer som et reference- og uddannelsesværktøj for bidragydere - Et designsystem gør onboarding-processen nemmere i tilfælde af personaleudskiftninger. Det hjælper også nye individuelle bidragydere med at komme i gang med UX-design eller oprettelse af indhold.
Bidrager til et stærkt og tidløst brand - Et designsystems formål er at kommunikere en bestemt identitet og et bestemt design bag de produkter, det er passagerer for. Det er med til at skabe effektfulde brands og hjælper folk med at huske oplevelsen af brandet. Det får folk til at føle sig mere knyttet til et brand og stole mere på det.

En ti-trins guide til opbygning af et designsystem

Vi har udarbejdet en ti-trins proces, der kan hjælpe din virksomhed med at skabe et designsystem.

1. Analysér din eksisterende designproces grundigt.

Det første skridt til at lægge en strategi og igangsætte en proces er at forstå, hvor man er i øjeblikket. En gennemgang og analyse af din organisations nuværende designproces kan hjælpe dig med bedre at forstå det systemdesign, der passer bedst til dit brand. Stil dig selv følgende spørgsmål:

Hvad er din organisations nuværende designtilgang?
Hvilke eksisterende værktøjer bruger din organisation?

Sørg for at evaluere produktteamets niveau af designmodenhed. Det vil hjælpe dig med at få overblik over, hvor lang tid det vil tage at implementere det nye system i din organisation.

2. Bestem dit brands alfabet

Determine your Brand's Alphabet

Et brands alfabet vil føre til brandets identitet, dvs. brandets og produktets værdier og brandets sprog. Brandets sprog består af former, skrifttyper, farver, animationer, stemme og tone.

Designere vil anvende et visuelt sprog, der er defineret af brandets alfabet. En gennemgang af brandets retningslinjer og en snak med interessenterne kan hjælpe dig med at forstå brandets identitet og sprog.

3. Gennemfør audit for nuværende produkt AI

En UI-revision af det nuværende produkt vil hjælpe dig med at tackle en stor udfordring inden for produktdesign: designduplikation. Revisionen sigter mod at opnå to mål -

Gør opmærksom på de områder i produktet, hvor der er væsentlige uoverensstemmelser.
Find frem til de mest anvendte og væsentlige elementer i produktet.

En UI-revision er en proces i flere trin. Det er afgørende at identificere og analysere de vigtigste brugergrænsefladeegenskaber og deres anvendelse i komponenter. Du kan bruge tilgængelige værktøjer til at se antallet af unikke farver og skrifttyper i dine stilark. Derefter kan du yderligere nedbryde hvert webdesign i individuelle elementer.

4. Fastlæg designprincipperne for dit system

For at skabe en fremragende brugeroplevelse er det vigtigt at forstå årsagerne bag designbeslutningerne. Desuden gør et klart sæt mål det lettere at definere designprincipper og koordinere med teams.

Vil du have en designproces? Start med disse spørgsmål:

Hvad skaber du?
Hvorfor gør du det
Hvordan vil du bygge den?

Designprincipperne skal afspejle dit brands værdier og vision.

5. Byg et komponentbibliotek

Det er også kendt som mønsterbiblioteket og bør indeholde alle funktionelle og dekorative elementer i din brugergrænseflade. Evaluer komponenterne i forhold til projektet, brugernes behov og forretningsmål, og behold dem, du har brug for.

Build a Component Library

6. Fastsæt regler

Designsystemer er ikke bygget til at begrænse designere til en bestemt designretning. Tværtimod er det kun meningen, at de skal give designere og udviklere en grundlæggende ramme, der udvider den kreative retning og giver plads til innovation.

Det er to tilgange til Design System-regler, som nævnes i Alla Kholmatovas bog:

Strenge regler - Designere og udviklere følger en streng proces for at introducere nye mønstre eller komponenter.
Løse regler - Disse regler giver designere og udviklere mulighed for at skabe uden at overholde strenge begrænsninger, hvis de mener, at det resulterer i bedre design.

Ligesom mange andre aspekter af livet er det vigtigt at finde den rette balance mellem disse regler, så produktet kan være konsistent, samtidig med at det er kreativt.

7. Vælg din model for ledelse

Dynamiske designsystemer i konstant udvikling kræver en enkel proces til godkendelse og implementering af ændringer. Der er tre modeller for styring:

Solitær model - Et individ eller en gruppe af individer "styrer" designprocessen direkte.
Centraliseret model - Et team har ansvaret og styrer systemets udvikling.
Federeret model - Flere personer fra forskellige grupper leder systemdesignprocessen.

Mens hver af disse modeller har sine fordele og ulemper, kan især den ensomme model føre til, at den ene ansvarlige bliver en flaskehals for udførelsen af mange opgaver. Det bedste er at bruge en kombination af forskellige modeller, der passer til dine behov.

8. Definér komponentstruktur

Duplikering af funktionelle komponenter er en stor udfordring i designsystemer. Det resulterer i et ufleksibelt system og kræver, at designere (og udviklere) skaber nye elementer, hver gang der er et nyt scenarie.

Vellykkede systemdesign kan i høj grad genbruges og giver brugerne mulighed for at bruge dem som grundlag for deres produkter. Derfor anbefales det at udvikle elementer, der kan genbruges i forskelligt indhold.

Kriterier for genanvendelige og skalerbare komponenter:

Modulær - Uafhængige komponenter og udskiftelige elementer.
Komposérbar - sammensmelt eksisterende komponenter for at skabe nye
Kan tilpasses - Komponenter, der kan tilpasses, og som fungerer i mange forskellige sammenhænge.

9. Sørg for, at alle teams bruger et fælles sprog

Formålet med et designsystem er blandt andet at lette problemfrit teamwork. Derfor er det vigtigt at integrere systemet i teamets arbejdsgang. Det øger produktiviteten, samtidig med at det leverer værdi til teammedlemmerne.

Hvis du får en bedre forståelse af, hvordan forskellige mennesker bruger designsystemet i den indledende integrationsproces, kan det hjælpe dig med at ændre systemet i overensstemmelse hermed.

10. Formidl ændringer regelmæssigt

Et designsystems proces udvikler sig med organisationen og kan ikke være statisk. Derfor er det vigtigt at kommunikere alle ændringer og holde organisationen opdateret, når systemet er introduceret i din organisation.

En kortfattet og velholdt changelog kan hjælpe brugerne med at forstå forskellige opgraderinger, og hvordan de vil påvirke deres arbejde.

Tre gode eksempler til at komme godt i gang

Atlassian Design System

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

Atlassian Design System, en berømt australsk virksomhedssoftwarevirksomhed, har til formål at skabe problemfrit samarbejde mellem agile, spredte teams over hele verden.

Trello og Jira, to af Atlassians udbredte samarbejdsværktøjer, indfanger til fulde virksomhedens designfilosofi. Denne filosofi handler om at udnytte den digitale oplevelse til at øge produktiviteten og det samlede potentiale for teams og individuelle teammedlemmer.

Når det er sagt, tilbyder Atlassian Design System agile teknikker og effektiv sporing af hver eneste fase i et projekt, fra produktplanlægning til levering. Dette giver i sidste ende gavnlige resultater for skabelsen og leveringen af produkter. Deres designsystem omfatter hovedsageligt:

Retningslinjer for design
Brand-standarder
Produkt
Illustration
Prototyping
Markedsføring
Personlighed

IBM Design System

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

IBM er et godt eksempel på en stor it-virksomhed, der opererer globalt og følger sit eget designsystem.

Deres kompetencer omfatter alt fra virksomhedsrådgivning og finansiering til softwareudvikling, IT-hosting/administration og løsninger, der forbinder software med hardware.

IBM's grundlæggende princip er konstant at skabe fremskridt, hvad enten det drejer sig om det menneskelige samfund eller et brand, ved hjælp af videnskab, fornuft og intellekt.

Ifølge IBM er et godt design ikke bare en nødvendighed, men også en forpligtelse over for brugerne. Her er nogle af deres Carbon Design Systems fremtrædende funktioner, som giver udviklere og designere, der arbejder med Adobe, Axure og Sketch, et væld af værktøjer og ressourcer:

Datavisualisering
Mønstre
Komponenter
Retningslinjer
Vejledninger

Uber Design System

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

Vi har alle taget en Uber mindst én gang. Den amerikanske teknologivirksomhed er afhængig af bevægelse, herunder levering af mad, samkørsel, peer-to-peer samkørsel og mikromobilitet ved hjælp af scootere og elcykler.

Uber har brug for et effektivt systemdesign, så denne type service kan fungere fejlfrit på tværs af alle subbrands, interne brands, produkter og projekter.

Uber Design Systems primære egenskaber er:

Brandets arkitektur
Sammensætning
Tone i stemmen
Bevægelse
Illustration
Fotografering
Ikonografi
Farve
Logo
Typografi

Gode råd, før du opretter dit første designsystem

1. Tidlig, klar kommunikation er din nye bedste ven

Det kan være kompliceret at involvere dine interne forbrugere med det samme. Faktisk kan deres feedback hindre processen, hvis den er tvetydig, gives for tidligt i en alfa- eller beta-udgivelsescyklus eller ikke er nyttig.

Fortæl dine kunder, brugerne af designsystemet, hvad du har brug for, så du er sikker på at få konstruktiv feedback. Hvis du er i en tidlig pre-release-cyklus, skal du være ærlig og tydelig omkring det præcise input, du ønsker. Dette indikerer, at du leder efter produktets mest betydningsfulde fejl og ikke kritik af høj kvalitet.

Vær opmærksom på at tænke for meget, så dit sind visner væk, men tøv ikke med at overkommunikere.

2. Dine fodspor er ikke det eneste, du skal spore

En afgørende manglende del af prioriteringen er ofte at spore brugen af designsystemer. Det er vigtigt at forstå, hvor systemet bliver brugt, af hvem, hvor ofte og hvor hyppigt det bliver opdateret.

Ved at implementere en daglig statistisk indsamling af, hvilke teams der bruger præcis hvilke versioner af biblioteket, kan man få en god forståelse af, hvor hurtigt de adopterer, opgraderer og nedgraderer.

Når du identificerer de teams, der sjældent opdaterer, kan du finde frem til de problemer, der blokerer for opgraderingen, og efterfølgende rette op på dem.

3. Feedbackmekanismer er lige så undervurderede som Rhaeghal fra GOT

For at sikre, at dit system ikke kun er værdifuldt for brugerne, men også noget, de føler sig som en del af og aktivt har bidraget til, er det vigtigt at have enkle, men ligefremme måder, hvorpå folk kan give feedback (Slack, e-mail osv.) og bidrage til systemet.

Giv altid instruktioner om, hvordan og hvor du kan give feedback på så mange områder som muligt, og antag aldrig noget, især ikke at en bruger vil finde det på det sted, du synes er det mest oplagte.

Et designsystem er den nordstjerne, din organisation har brug for

A Design System is the North Star Your Organization Needs

Et vellykket, veludviklet designsystem bliver en del af selve rygraden i en virksomhed, hvilket resulterer i konsistente og forstærkede oplevelser. Desuden får designere og udviklere mulighed for bedre at kommunikere formålet med produktet i stedet for at sidde fast i at sammensætte grundlæggende byggeklodser.

Enhver generalist kan være din partner i at levere et design, men kun en designspecialist identificerer de aktuelle problemer, udfordringer og forhåbninger for at skabe et designsystem, specielt til dig. Nu er det ikke tid til at vente. Med denne omfattende guide til, hvordan du skaber et designsystem, er du kun et initiativ væk fra en komplet transformation af din produktionsproces.