Designsystemer sparer tid og penge og styrker dit brand

Skrevet af

Sune Gamst
Seniordesigner i Reload

Åh nej, endnu et system, tænker du. Men hey, lad mig prøve at fortælle lidt om, hvorfor jeg synes, det er vildt vigtigt at investere i designsystemer.

I den her artikel kommer jeg ind på to hoved-pointer, nemlig:

1) at med et designsystem så sparer du tid hos dine udviklere og dine designere.

2) når du systematiserer dit design, så kan du give dine brugere en bedre og mere konsistent oplevelse.

Ro på makker! Hvad er et designsystem?!

Men først, så lad mig lige skære ud i det gode gamle pap, hvad et designsystem er for en størrelse. Kort sagt er det et kommunikationsværktøj mellem designere og udviklere med en række visuelle elementer, regler og komponenter. Man starter typisk med at definere ting som farver og typografi, måske en række ikoner, principper for afstande, og så er man faktisk klar til at begynde at bygge de lidt større komponenter, som typisk kan være en kombination af de første byggesten

Lad os tage inputfelter eller knapper som et godt eksempel

Knapper findes ofte i en række forskellige versioner: den primære med og uden ikon, en sekundær outlinet version og måske endda en tredje helt rund fætter. Og alle defineres i en række forskellige udgaver, så vi én gang for alle får beskrevet, hvordan de opfører sig både i default state, men også ved hover når musen er over den på desktop, ved klik og måske endda også i disabled state.

Forvirret over alle mine begreber? Kig på illustrationen hér:

På samme måde findes inputfelter i en række varianter til input af forskelligt indhold og også i en række forskellige states.

I et designsystem definerer vi alle de forskellige komponenter, som vi bruger på tværs af et site eller en service. Når vi har defineret dem her, så er det vildt nemt for designeren at genbruge komponenterne i sine designs. På den måde sikrer vi, at det er ensartede knapper og inputs, der bliver brugt alle steder, og designeren arbejder markant hurtigere, fordi ting ikke skal skabes fra bunden hele tiden.

Og her kommer det smarte: hvis udviklerne har implementeret designsystemet på samme måde, så er det lige så nemt for dem at bygge sitet med komponenter, som det er for designerne at lave prototypen. Og den komponentbaserede tilgang gør at ændringer kun skal laves et sted for at træde i kraft alle steder - både for designerne i Figma og hos udviklerne i koden.

Så ved at bruge lidt tid på at sætte designsystemet op i Figma og udvikle et lækkert match i koden, har vi et godt fundament til at bygge og videreudvikle et konsistent digitalt produkt eller website, hvor vi ikke skal genopfinde den dybe tallerken igen og igen og igen. 

Men hvorfor er det dér “konsistente design” så vigtigt?!

Konsistent design kan give en bedre og mere sammenhængende brugeroplevelse. Det kan hjælpe med at reducere forvirring og frustration, fordi designet ser ens ud og fungerer ens på tværs af platforme og produkter.

• Tilliden til dit produkt / brand / website kan øges ved at brugerne støder på velkendt design, så de bliver mere komfortable og føler sig hjemme i løsningen.

• Genkendeligheden øges, når brandet konsekvent ser ud på samme måde. Det gør det nemmere at vælge til og navigere i for brugeren.

• Ved at bruge et konsistent design giver virksomheden et mere professionelt udtryk af sig selv, og viser at den tager sig selv seriøst og står for kvalitet.

• Det bliver også nemmere at kommunikere effektivt når visuelle elementer er ensartede. Og dermed nemmere at afkode budskabet for brugerne.

• Omvendt kan inkonsistent design få dit produkt / brand / website til at virke skizofrent, hvilket ultimativt kan gøre at dine brugere bliver usikre og mister tilliden.

Tilliden bliver svækket

Lad mig give et eksempel fra den virkelige verden på, hvordan inkonsistent design kan gøre dit brand mindre tillidsvækkende. Det er måske ok åbenlyst, at det her er spammails, som har til formål at snyde mig, og de ikke er fra Yousee:

Men hvad så når Yousee sender mig de her mails? Jeg bliver forvirret over afsenderen, og jeg tvivler på, hvad der er reelt, og hvad der er spam. Jeg mister tillid til afsenderen. Brandet er skadet.

Og når jeg orienterer mig i deres øvrige digitale landskaber, så bliver jeg ikke meget klogere. Se nedenstående eksempler. Der er fem vidt forskellige inputfelter, både gamle og nye logoer og så er knapperne forskellige - blandt mange andre ting. Det forvirrer!

Alle screenshots er taget fra yousee.dk oktober 2024, indenfor et kvarters tid.

For år tilbage arbejdede jeg for Nuuday / YouSee, og der var et designsystem og massere af dygtige designere, men designsystemet blev ikke ledelsesmæssigt forankret, så som alle mulige andre systemer, så virker det kun, hvis der bliver taget en strategisk beslutning om, at det skal bruges.

Jeg tror ikke på, at designere skal kæmpe om designsystemet nedefra, men det skal være en ledelsesbeslutning om, at selvfølgelig skal virksomheden tage sig selv seriøst og levere gode og konsistente digitale oplevelser til sine brugere. Bonuseffekten er, at designere og udviklere er gladere og arbejder hurtigere.

Hvad koster sådan et designsystem så?

Som med al anden teknisk udvikling vi laver i Reload, så er det ene projekt ikke magen til det andet. Det har Rasmus skrevet lidt om her i artiklen “Hvad koster et nyt website?

Du kan hurtigt (få timer) komme i gang med at bygge de basale ting, som farver og typografi, men det er typisk også her du som designer finder ud af at du har brug for varianter af brand-farver til at lave dit UI - måske er din brand-farve ikke accessible så de oplagte orange knapper med hvid tekst dur bare ikke, hvis du gerne lave en løsning som alle dine brugere skal kunne se. Og ja, selvfølgelig vil du det. Det insisterer vi i hvert fald på herinde - internettet skal være for alle.

Hvad koster det at lade være?

Før jeg kendte til Figma og designsystemer designede jeg en stor SAAS platform fra bunden Jeg arbejdede på en del af servicen ad gangen, og det blev hele tiden bedre og bedre, men konsistent? Not so much. I min iver efter at lave det bedst mulige design, til den ting jeg sad med, endte jeg med at superoptimere forskellige UI elementer løbende, og fordi det ikke skete bagudrettet i et system, endte vi med at implementere flere forskellige versioner af f.eks. Inputfelter og knapper. Så ikke nok med at jeg havde brugt ekstra tid på at lave de samme elementer flere gange, så havde udviklerne brugt endnu længere tid på at implementere dem, men værst af alt fik brugerne en inkonsistent løsning hvor design skiftede alt efter hvor i servicen man befandt sig.

Designere og udviklere er kreative mennesker, som hurtigt kan komme til at kede sig, og den næste løsning er altid lidt bedre end den forrige. Hvis der ikke er en single source of truth, så ender man med en copy paste løsning, som måske lige bliver rettet lidt til og pludselig ved ingen hvordan en knap egentlig skal se ud.

I designsystemet definerer vi ting og laver regler for, hvordan de bruges. Vi gør det én gang, og når vi så finder ud af, at UI elementet kan optimeres, så slår optimeringen igennem alle steder.

Hvor er sandheden - i Figma eller i koden?

Det er noget, vi snakker meget om herinde. En kollega nævnte noget ala, at sandheden findes i Figma, men virkeligheden er i koden - og det passer jo meget godt. Der kan være mange gode grunde til, at ting ikke bliver implementeret 100%, som de er i Figma - måske har verden ændret sig eller udvikleren har en endnu bedre idé til, hvordan præcis det komponent kan løses. I en perfekt verden ændrer man nu bagud i Figma, så designet reflekterer den kodede version.

Jeg har allerede en flot PDF-designguide - er det ikke nok?

På mange måder kan man godt sige at et designsystem er den moderne udgave af den printvenlige PDF, som sikkert er et sted i din mailbox, og hedder noget ala “designguide_sep_2024_final_ny_2.pdf”. Og det gode ved den er, at du kan være helt sikker på, at alle i din organisation + dine freelance grafikere altid kigger på præcis den samme version -ikk’?! Når vi digitaliserer designguiden som et designsystem i Figma, så kan alle relevante tilgå den samme virkelighed, og der er ingen tvivl om hvilken farve eller font der er den rigtige. Og når vi har en kodet udgave dokumenteret i f.eks. Storybook, der matcher Figma, så er designere og udviklere klar til at bygge konsistent digitale produkter hurtigt.

Har du spørgsmål?

Tak fordi du læste med!

Jeg er altid klar på at sparre, snakke videre eller svare på spørgsmål! Jeg er altid frisk på at tale om, hvordan I kan optimere jeres arbejdsgang.

Send endeligt en e-mail min vej, og så snakkes vi ved.