Vad är designsystem?

Har Ni någon gång lagt märke till hur Google eller Apple känns konsekventa överallt? Den sammanhållningen kommer vanligtvis från ett designsystem – och det är precis det Ni kommer att lära Er här.

Ett designsystem är den kompletta uppsättningen standarder, dokumentation och återanvändbara komponenter för att bygga en produkt – en gemensam källa till sanning för design och kod.

Att bygga ett användargränssnitt utan ett system är som att bygga ett hus utan ritning. Ett designsystem skapar konsekvens, snabbar upp utvecklingen och höjer kvaliteten.

Visuell stil definierar utseendet: färgpaletter, typografi och regler för avstånd. Den är den estetiska grund som varje vy följer.

UI-komponenter är färdigbyggda och färdigkodade delar av Ert gränssnitt – knappar, inmatningsfält och navigeringsfält – var och en med ett definierat utseende och beteende.

Dokumentation är användarhandboken: den beskriver hur varje komponent ska användas och hur stilen tillämpas korrekt, inklusive tillgänglighet och kod.

En stilguide består huvudsakligen av statiska visuella regler. Ett designsystem innehåller den guiden men lägger även till kodade komponenter, användningsdokumentation och styrning – en levande produkt.

Ett komponentbibliotek består av kodade UI-element – en del av ett designsystem. Systemet innehåller även principer, visuell stil, dokumentation och processer.

Föreställ Er ett LEGO-set: dokumentationen är instruktionerna, den visuella stilen är färgerna och komponenterna är byggklossarna. Designs­ystemet är hela paketet.

Ett designsystem är en holistisk uppsättning standarder, komponenter och dokumentation – mycket mer än enbart en stilguide eller ett komponentbibliotek. En bra början!