Wat is een design system?
Een design system is een verzameling herbruikbare bouwstenen met de afspraken erbij. Knoppen, kleuren, formuliervelden, kaarten, en wanneer je welke gebruikt.
Het verschil met een verzameling schetsen: de bouwstenen bestaan echt, in code, en worden op je site gebruikt.
Daardoor blijft je site consistent zonder dat iemand er steeds op hoeft te letten.
Waar het uit bestaat
Uit drie lagen. Onderop de basiswaarden: kleuren, lettergroottes, afstanden en hoekafrondingen.
Daarboven de onderdelen: een knop, een invoerveld, een kaart. En daarboven de patronen: een compleet formulier, een productblok.
En de afspraken
Bij elk onderdeel staat wanneer je het gebruikt en wanneer niet. Dat is het deel dat het meest oplevert en het vaakst ontbreekt.
Zonder die afspraken krijg je alsnog vijf soorten knoppen. Meer daarover lees je bij css.
Wat het niet is
Geen stijlgids en geen huisstijlhandboek. Die beschrijven; een design system werkt.
Meer daarover lees je bij het verschil met een stijlgids.
Mijn vuistregels
- Begin bij wat je al hebt, niet bij een lege pagina.
- Leg per onderdeel vast wanneer je het gebruikt.
- Houd het klein; tien goede onderdelen verslaan vijftig halve.
- Zorg dat er één eigenaar is, anders verwatert het.
Die laatste bepaalt of het over een jaar nog klopt.
Voor wie het is
Voor organisaties waar meerdere mensen aan dezelfde site of aan meerdere sites werken.
Bij één site en één bouwer levert het minder op. Meer daarover lees je bij of een klein bedrijf er een nodig heeft.
Hoe het eruitziet in de praktijk
Vaak een aparte pagina waarop alle onderdelen naast elkaar staan, met de code erbij en een korte uitleg.
Zo’n pagina is meteen ook je testomgeving: gaat er iets stuk, dan zie je het daar het eerst.