Kort svar
Et designsystem består af tokens til farve, typografi og afstand, komponenter bygget af dem, og en kontrol i byggeriet, der afviser kode med løse værdier. Vores erfaring fra egne projekter er, at det tjener sig hjem omkring tiende side, eller anden gang et brand skal ændres på hele sitet.
Et designsystem beskrives som regel som en samling komponenter. Den mere afgørende del er reglen om, hvor værdierne må bo, for det er den, der afgør, om systemet stadig passer om et halvt år.
Hvad systemet faktisk består af
Fire lag, og det sidste er dét, der skiller et system fra en mappe med filer.
- Tokens: hver farve, afstand, radius og skriftstørrelse defineret ét sted
- Primitiver: knapper, kort, overskrifter og felter bygget af tokens
- Blokke: færdige sektioner, som siderne sættes sammen af
- En kontrol i byggeriet, der stopper rå værdier i sidekoden
Kontrollen er dét, der gør systemet sandt
Et system, der kun findes som dokument, glider fra hinanden, fordi det altid går hurtigere at skrive en farvekode end at finde den rigtige token. Dette site kører den kontrol: et byggetrin læser koden og fælder byggeriet ved den første rå hex- eller pixelværdi uden for designsystemet. Derefter opstår spørgsmålet ikke længere.
Kontrasten beregnes, før farven bruges
Hvert farvepar i systemet kontrolleres mod WCAG AA, der kræver mindst 4,5:1 for brødtekst, i både lys og mørk tilstand. Beregnes det på tokenniveau, kan en senere side aldrig blive ulæselig, fordi den kombination, der ville forårsage det, ikke findes.
Størrelsen hvor det betaler sig
Under fem sider koster et system mere, end det giver. Ved ti sider er det omtrent lige op. Ved 30 sider, to temaer og ni sprog er det forskellen mellem en dags arbejde og en uge, når noget skal ændres alle steder, hvilket er det regnestykke, vi selv lavede for dette site.
Små skærme hører til systemet
Hver komponent formgives til 320 pixel først og vokser opad. Testene kører hver sidetype i syv bredder fra 320 pixel, og en side, der skaber vandret scroll, fælder byggeriet. Det er billigere end at reparere et ødelagt mobillayout efter lanceringen.
Ofte stillede spørgsmål
- Har en lille hjemmeside brug for et designsystem?
- Under fem sider rækker en samling konventioner. Fra ti sider og opefter tjener systemet den tid hjem, det kostede, især hvis sitet skal vokse eller findes på flere sprog.
- Hvad adskiller det fra en brandmanual?
- Manualen beskriver, hvordan det skal se ud. Systemet er koden, der gør det. En PDF kan aldrig fælde et byggeri, og det er netop den funktion, der holder udtrykket samlet over tid.
- Hvordan håndteres mørk tilstand?
- Hver token får én værdi til lys tilstand og én til mørk. Kontrasten beregnes på begge, så det ene tema aldrig kan blive dårligere end det andet.
- Hvem ejer designsystemet efter lanceringen?
- Det gør I, og det ligger i jeres repo. Det er bygget, så en anden udvikler kan overtage: værdierne ét sted, komponenterne dokumenteret og kontrollen som en del af byggeriet.
- Hvor ofte skal et designsystem laves om?
- Sjældent i sin helhed. Tokens skiftes, når brandet ændres, og komponenter kommer til undervejs. Et system, der skal skrives om hvert andet år, var bygget til én enkelt kampagne.
- Kan man indføre et system på et eksisterende site?
- Ja, én sidetype ad gangen. Start med tokens og de mest brugte komponenter, slå kontrollen til for de mapper, der er lagt om, og udvid derfra.
Fortæl os, hvad du vil bygge
Tredive minutter, helt gratis, og en klar melding om, hvorvidt vi er det rette studio til opgaven.