Designsystem vs styleguide: hvad er forskellen, og hvad har I brug for?

Virksomheden har en hjemmeside, en kundeportal og en app. De er bygget på forskellige tidspunkter af forskellige folk, og det kan ses: tre slags knapper, to næsten ens grønne farver og en dato, der skrives på tre måder. Brandmanualen er en PDF fra 2019, som ingen åbner. Hver ny funktion starter med de samme diskussioner om afstande og farver, og hver gang bliver svaret lidt anderledes. Det er præcis det problem, styleguides og designsystemer løser, men de løser det på forskellige niveauer, og det er nemt at købe for meget eller for lidt.

Hvad er forskellen på et designsystem og en styleguide?

Den enkleste måde at forklare forskellen på er, at en styleguide er en opskrift, og et designsystem er et køkken med opskriften, de forberedte ingredienser og redskaberne. Begge dele har værdi. En styleguide sikrer, at jeres brand ser ens ud. Et designsystem sikrer, at jeres produkter bliver bygget ens, hurtigere og med færre fejl. Styleguiden er derfor en naturlig del af et designsystem og ofte det første skridt mod et.

Hvad indeholder en styleguide til hjemmeside og app?

• Logo: varianter, frizone, mindste størrelse og brug på mørk og lys baggrund.
• Farver: primære, sekundære og neutrale farver med koder og deres roller, fx "fejl" og "succes".
• Typografi: skrifttyper, størrelser, linjehøjder og hvornår hver overskriftsniveau bruges.
• Afstande og grid: et fast system, fx trin på 4 eller 8 pixels, og kolonner på mobil og computer.
• Ikoner og illustrationer: stil, stregtykkelse og hvor de hentes.
• Billeder: motiver, beskæring, farvetone og hvad der skal undgås.
• Knapper og links: primær, sekundær og tekstlink med tilstande.
• Tone og sprog: tiltaleform, ordliste og eksempler på god microcopy.

Det sidste punkt glemmes ofte, selvom det er det, brugerne mærker mest. En knap kan have den rigtige farve og stadig sige noget forvirrende. Vi har samlet principperne for tekster i brugerflader i guiden om UX writing og microcopy, og en kort sprogsektion hører med i enhver styleguide.

Hvad indeholder et designsystem?

Det, der adskiller et designsystem fra en samling pæne komponenter, er koblingen mellem Figma og kode. Når en knap i Figma og en knap i koden bygger på de samme tokens og har det samme navn, kan designere tegne med de rigtige byggeklodser, og udviklere kan bygge uden at måle pixels. Hvordan den kobling laves i praksis, gennemgår vi i fra Figma til hjemmeside.

Hvornår har I brug for en styleguide, og hvornår et designsystem?

Hvad koster en styleguide og et designsystem?

Et regneeksempel: en virksomhed med 60 medarbejdere har en hjemmeside, en kundeportal og planlægger en app. Tre leverandører har hver bygget deres del. Et designsystem med tokens og 20 kernekomponenter i Figma og React koster i dette eksempel omkring 200.000 kr. Til gengæld skal knapper, formularer, tabeller og dialoger ikke designes og bygges igen i appen, og portalens næste moduler kan sættes sammen af eksisterende dele. Når det samme arbejde ellers ville blive lavet to eller tre gange, tjener systemet sig typisk hjem på det første større projekt. Har I kun én hjemmeside, er regnestykket et andet, og så er en styleguide til omkring 20.000 kr. det fornuftige valg. Se flere priser i hvad koster UX design.

Hvordan bygger man et designsystem trin for trin?

1. Lav en inventarliste: tag skærmbilleder af alle knapper, felter, farver og overskrifter i jeres nuværende løsninger.
2. Saml dubletterne: beslut, hvilken af de fem næsten ens knapper der er den rigtige.
3. Definér tokens for farver, typografi, afstande og radius med navne efter rolle.
4. Byg de 10–15 komponenter, der bruges mest, i Figma og kode samtidig.
5. Brug dem i et rigtigt projekt med det samme, og ret dem ud fra erfaringerne.
6. Skriv kort dokumentation pr. komponent: hvornår, hvordan og et eksempel.
7. Udpeg en ejer og en fast proces for nye komponenter og ændringer.
8. Udgiv versioner med en ændringslog, så teams ved, hvad der er nyt.

Hvilke fejl og myter ser vi omkring designsystemer?

• Systemet bygges kun i Figma: designerne bruger det, udviklerne bygger deres egne versioner.
• Alt skal med fra start: et halvt års arbejde, før det første produkt får gavn af det.
• Ingen ejer: efter et år findes der tre versioner af den samme komponent igen.
• Dokumentation, ingen læser: 80 sider tekst i stedet for korte eksempler.
• Tilstande mangler: komponenterne ser flotte ud, men har ingen fejl-, fokus- eller indlæsningstilstand.
• Brandet ændres uden at opdatere tokens, så Figma og kode glider fra hinanden.

Tre myter, vi ofte hører

Den første myte er, at designsystemer kun er for store virksomheder. Størrelsen på virksomheden betyder mindre end antallet af produkter og teams, og en mellemstor virksomhed med web, portal og app har mere brug for et end en stor virksomhed med ét site. Den anden er, at et designsystem gør alt ens og kedeligt. Det fjerner gentagne beslutninger, så designerne kan bruge tiden på de dele, der faktisk er unikke. Den tredje er, at det er et projekt med en slutdato. Et designsystem er et produkt, der lever lige så længe som de løsninger, det bruges i, og det skal have tid og en ejer derefter.

Hvordan holder man et designsystem levende over tid?

Det vigtigste er, at systemet bliver brugt hver dag, og at det er nemmere at bruge det end at gå uden om. Sæt et lille fast tidsbudget af hver måned til at rette fejl og tilføje komponenter, som teams har bedt om. Hold Figma og kode i sync med de samme versionsnumre. Gennemgå systemet en gang om året sammen med brandet og tilgængelighedskravene. Et forsømt designsystem bliver hurtigt til en form for teknisk gæld, hvor gamle komponenter lever videre i koden, fordi ingen tør fjerne dem.

Hvordan arbejder vi med styleguides og designsystemer hos Ceptiv?

Vi starter altid med den mindste løsning, der løser jeres problem. Til en enkelt hjemmeside laver vi en styleguide og et lille sæt tokens som en del af designet. Har I flere produkter, bygger vi designsystemet sideløbende med et rigtigt projekt, i Figma og i React og React Native på samme tid, så det bliver testet fra første dag. Design og udvikling sidder i samme senior-team, så der er ingen afstand mellem tegning og kode. Læs mere om vores designsystem-bureau, om vores arbejde med branding, eller få en fast pris inden for 24 timer.