Wat is het verschil tussen een design system en een stijlgids?
Een stijlgids beschrijft. Een design system werkt. Dat is het hele verschil, en het is groter dan het klinkt.
In een stijlgids staat dat je knop donkerblauw is met acht pixels afronding. In een design system staat die knop, en gebruikt je site hem.
Het eerste kan verouderen zonder dat iemand het merkt. Het tweede niet.
Waarom stijlgidsen verwateren
Omdat ze los staan van je site. Iemand past een kleur aan in de code en vergeet het document bij te werken.
Na een jaar is de gids een historisch stuk. Dat gebeurt bij vrijwel elke stijlgids die niet gekoppeld is.
Waarom een design system dat minder doet
Omdat het dezelfde bron gebruikt als je site. Verander je de kleur in het systeem, dan verandert je site mee.
Er is dan geen tweede plek meer die kan verouderen. Meer daarover lees je bij css.
Wat een stijlgids wél goed doet
Alles wat niet in code te vangen is: je tone of voice, je fotografie, het gebruik van je logo op briefpapier en bestelbussen.
Daar heb je een design system niet voor, en een stijlgids juist wel.
Mijn vuistregels
- Merkzaken in een stijlgids, digitale onderdelen in een design system.
- Laat ze niet hetzelfde beschrijven; dan lopen ze uit elkaar.
- Verwijs vanuit de een naar de ander.
- Eén eigenaar per document, anders wordt het niemands werk.
Die tweede voorkomt de klassieke situatie waarin twee documenten elkaar tegenspreken.
Kun je met een stijlgids beginnen?
Ja, en dat is vaak een prima eerste stap. Je legt vast wat je hebt en ziet meteen waar de inconsistenties zitten.
De stap daarna is die afspraken in werkende onderdelen gieten. Meer daarover lees je bij wat er in een design system hoort.
Wat je vaak ziet
Een dik merkboek van een ontwerpbureau en een site die er maar half aan voldoet. Dat is geen onwil.
Het is het onvermijdelijke gevolg van beschrijven zonder bouwen.