Kort svar
Et designsystem består av tokens for farge, typografi og avstand, komponenter bygget av dem, og en kontroll i bygget som avviser kode med løse verdier. Vår erfaring fra egne prosjekter er at det tjener seg inn rundt tiende side, eller andre gangen en merkevare skal endres over hele nettstedet.
Et designsystem beskrives som regel som en samling komponenter. Den mer avgjørende delen er regelen om hvor verdiene får bo, for det er den som avgjør om systemet fortsatt stemmer om et halvt år.
Hva systemet faktisk består av
Fire lag, og det siste er det som skiller et system fra en mappe med filer.
- Tokens: hver farge, avstand, radius og skriftstørrelse definert ett sted
- Primitiver: knapper, kort, overskrifter og felt bygget av tokens
- Blokker: ferdige seksjoner som sidene settes sammen av
- En kontroll i bygget som stopper rå verdier i sidekoden
Kontrollen er det som gjør systemet sant
Et system som bare finnes som dokument, glir fra hverandre, fordi det alltid går raskere å skrive en fargekode enn å lete opp riktig token. Dette nettstedet kjører den kontrollen: et byggesteg leser koden og feiler bygget på første rå hex- eller pikselverdi utenfor designsystemet. Etter det oppstår ikke spørsmålet lenger.
Kontrasten regnes ut før fargen tas i bruk
Hvert fargepar i systemet kontrolleres mot WCAG AA, som krever minst 4,5:1 for brødtekst, i både lys og mørk modus. Regnes det på tokennivå, kan en side lenger fram aldri bli uleselig, fordi kombinasjonen som ville forårsaket det ikke finnes.
Størrelsen der det lønner seg
Under fem sider koster et system mer enn det gir. Ved ti sider er det omtrent jevnt. Ved 30 sider, to temaer og ni språk er det forskjellen mellom en dags arbeid og en uke når noe skal endres overalt, som er regnestykket vi selv gjorde for dette nettstedet.
Små skjermer hører til systemet
Hver komponent formes for 320 piksler først og vokser oppover. Testene kjører hver sidetype i sju bredder fra 320 piksler, og en side som lager horisontal scrolling, feiler bygget. Det er billigere enn å reparere et ødelagt mobiloppsett etter lansering.
Vanlige spørsmål
- Trenger et lite nettsted et designsystem?
- Under fem sider holder en samling konvensjoner. Fra ti sider og oppover tjener systemet inn tiden det kostet, særlig om nettstedet skal vokse eller finnes på flere språk.
- Hva skiller det fra en merkevaremanual?
- Manualen beskriver hvordan det skal se ut. Systemet er koden som gjør det. En PDF kan aldri feile et bygg, og det er nettopp den funksjonen som holder uttrykket samlet over tid.
- Hvordan håndteres mørk modus?
- Hver token får én verdi for lys modus og én for mørk. Kontrasten regnes ut på begge, så det ene temaet kan aldri bli dårligere enn det andre.
- Hvem eier designsystemet etter lansering?
- Dere gjør det, og det ligger i repoet deres. Det er bygget slik at en annen utvikler kan overta: verdiene ett sted, komponentene dokumentert og kontrollen som del av bygget.
- Hvor ofte må et designsystem gjøres om?
- Sjelden i sin helhet. Tokens byttes når merkevaren endres, og komponenter kommer til underveis. Et system som må skrives om annethvert år, var bygget for én enkelt kampanje.
- Går det an å innføre et system på et eksisterende nettsted?
- Ja, én sidetype om gangen. Start med tokens og de mest brukte komponentene, slå på kontrollen for mappene som er lagt om, og utvid derfra.
Fortell hva du vil bygge
Tretti minutter, kostnadsfritt, og et ærlig svar på om vi er riktig studio for oppdraget.