design system
/dɪˈzaɪn ˌsɪstəm/zelfstandig naamwoord
Een design system is een verzameling herbruikbare interfacecomponenten, ontwerpregels en documentatie waarmee teams digitale producten consistent ontwerpen en bouwen.
Voor het nieuwe klantportaal legde het team knoppen, formulieren en kleurgebruik vast in een design system.
Een design system legt vast hoe een digitale interface eruitziet en werkt. Het bevat bijvoorbeeld afspraken over kleuren, typografie, witruimte en taalgebruik. Ook beschrijft het herbruikbare onderdelen zoals knoppen, invoervelden, meldingen en navigatie. Ontwerpers en ontwikkelaars gebruiken daarmee dezelfde bouwstenen en uitgangspunten.
Wat staat er in een design system?
De precieze inhoud verschilt per organisatie en product. Vaak bestaat een design system uit ontwerpprincipes, stijlafspraken, Woordenboek · In het kortcomponentEen component is een afgebakend onderdeel van software met een eigen taak en een duidelijke manier om met andere onderdelen samen te werken.Lees meer en uitleg over het gebruik daarvan. Een component hoort niet alleen een visueel voorbeeld te hebben. Ook varianten, toestanden, interacties en toegankelijkheid kunnen worden vastgelegd. Zo is bijvoorbeeld duidelijk hoe een knop reageert op toetsenbordbediening en wanneer een foutmelding verschijnt.
Een design system blijft bruikbaar als het met het product meegroeit. Nieuwe patronen worden toegevoegd wanneer ze vaker nodig zijn, terwijl verouderde keuzes gecontroleerd kunnen verdwijnen. Daarvoor zijn duidelijke afspraken nodig over beheer en wijzigingen.
Verschil met een componentbibliotheek
Een componentbibliotheek bevat doorgaans herbruikbare onderdelen in ontwerpbestanden of code. Een design system omvat daarnaast de regels en documentatie die uitleggen wanneer en waarom je die onderdelen gebruikt. Het helpt teams daardoor om vergelijkbare problemen op dezelfde manier op te lossen.
Componenten kunnen varianten hebben voor verschillende toepassingen. Het systeem bewaakt de samenhang tussen die varianten. Zo blijft een product herkenbaar en begrijpelijk zonder iedere keuze opnieuw te maken.