Kort svar
Ett designsystem består av tokens för färg, typografi och avstånd, komponenter byggda av dem, och en kontroll i bygget som fäller kod med lösa värden. Vår erfarenhet är att det tjänar in sig runt tionde sidan, eller andra gången ett varumärke ska ändras över hela sajten.
Ett designsystem beskrivs oftast som en samling komponenter. Den mer avgörande delen är regeln om var värdena får bo, eftersom det är den som avgör om systemet fortfarande stämmer om ett halvår.
Vad systemet faktiskt består av
Fyra lager, och det sista är det som skiljer ett system från en samling filer.
- Tokens: varje färg, avstånd, radie och typsnittssteg definierat på ett ställe
- Primitiver: knappar, kort, rubriker och fält byggda av tokens
- Block: färdiga sektioner som sidorna sätts ihop av
- En kontroll i bygget som stoppar råa värden i sidkoden
Kontrollen är det som gör systemet sant
Ett system som bara finns som dokument glider isär, eftersom det alltid går fortare att skriva en färgkod än att leta upp rätt token. Den här sajten kör den kontrollen: ett byggsteg läser koden och fäller bygget på första råa hex- eller pixelvärdet utanför designsystemet. Då uppstår frågan inte längre.
Kontrasten räknas innan färgen används
Varje färgpar i systemet kontrolleras mot WCAG AA, som kräver minst 4,5:1 för brödtext, i både ljust och mörkt läge. Räknas det på tokennivå kan en sida längre fram aldrig bli oläslig, eftersom kombinationen som skulle orsaka det inte existerar.
Vid vilken storlek det lönar sig
Under fem sidor kostar ett system mer än det ger. Vid tio sidor är det ungefär jämnt. Vid 30 sidor, två teman och nio språk är det skillnaden mellan en dags arbete och en veckas när något ska ändras överallt, vilket är den kalkyl vi själva gjorde för den här sajten.
Små skärmar hör till systemet
Varje komponent formges för 320 pixlar först och växer uppåt. Testerna kör varje sidtyp i sju bredder från 320 pixlar och uppåt, och en sida som skapar horisontell scroll fäller bygget. Det är billigare än att laga en trasig telefonlayout efter lansering.
Vanliga frågor
- Behöver en liten webbplats ett designsystem?
- Under fem sidor räcker en samling konventioner. Från tio sidor och uppåt tar systemet in tiden det kostade, särskilt om sajten ska växa eller finnas på flera språk.
- Vad skiljer det från en varumärkesmanual?
- Manualen beskriver hur det ska se ut. Systemet är koden som gör det. En manual i PDF kan aldrig fälla ett bygge, och det är just den funktionen som håller uttrycket samlat över tid.
- Hur hanteras mörkt läge?
- Varje token får ett värde för ljust läge och ett för mörkt. Kontrasten räknas på båda, så det ena temat kan aldrig bli sämre än det andra.
- Vem äger designsystemet efter lansering?
- Ni gör det, och det ligger i ert repo. Det är byggt så att en annan utvecklare kan ta över: värdena på ett ställe, komponenterna dokumenterade och kontrollen som en del av bygget.
- Hur ofta behöver ett designsystem göras om?
- Sällan i sin helhet. Tokens byts när varumärket ändras och komponenter tillkommer löpande. Ett system som behöver skrivas om vartannat år var byggt för en enskild kampanj.
- Går det att införa ett system på en befintlig sajt?
- Ja, en sidtyp i taget. Börja med tokens och de mest använda komponenterna, slå på kontrollen för de mappar som är omgjorda, och utöka därifrån.
Berätta vad du vill bygga
Trettio minuter, kostnadsfritt, och ett rakt besked om vi är rätt studio för uppdraget.