Design system: een bouwdoos in plaats van losse pagina’s
Een website groeit altijd. Er komt een campagnepagina bij, een nieuwe dienst, een landingspagina voor een actie. Elke keer wordt er een knop gemaakt die net iets anders is. Een andere hoek, een ander blauw, een andere afstand eromheen.
Na twee jaar staan er zeven soorten knoppen op een site. Niemand weet meer welke de goede is. En niemand durft er nog een weg te halen.
Voor Concrete House speelde dat op grotere schaal. Ik bouwde voor hen drie websites: Vrijmetselaarswinkel, Stucmeesters en Forecrete Europe. Verschillende merken, verschillende doelgroepen, maar wel dezelfde hand.
Ik heb daarom eerst de bouwstenen vastgelegd. Knoppen, koppen, kaarten, formulieren en afstanden. Per site wisselen alleen de kleuren en het beeld. Een nieuwe pagina bouwen kost daardoor uren in plaats van dagen, en het resultaat wijkt nergens af.
Een design system is een bouwdoos, geen plaatje van een website.
Wat is een design system?
Een design system is een vastgelegde set bouwstenen en regels. Je legt er niet in vast hoe een pagina eruitziet, maar waar pagina’s uit bestaan.
Vergelijk het met een keuken. Een ontwerp is een foto van een afgemonteerde keuken. Een design system is de catalogus met kastjes, grepen en maten waarmee je elke keuken kunt bouwen.
De twee helften
Er zit altijd een zichtbare en een onzichtbare kant aan. De zichtbare kant zijn de componenten: knoppen, formuliervelden, kaarten, meldingen. De onzichtbare kant zijn de ontwerprichtlijnen: wanneer gebruik je welke knop, en waarom.
Die tweede helft wordt bijna altijd vergeten. Zonder regels is het geen systeem maar een verzameling plaatjes.
Waar het uit bestaat
Wat ik altijd vastleg
Kleuren met een naam en een functie, niet alleen een code.
Typografie: welke maat, welk gewicht, welke regelafstand per kop.
Een schaal voor afstanden, zodat marges niet willekeurig worden.
De herbruikbare onderdelen: knop, kaart, formulier, tabel, melding.
Gedrag bij verschillende schermbreedtes, zie breakpoint.
Toegankelijkheidseisen per onderdeel, zoals contrast en focus.
Die laatste is de meest onderschatte. Leg je toegankelijkheid vast in je bouwstenen, dan is elke nieuwe pagina automatisch goed. Meer daarover lees je bij accessibility.
Het verschil met een stijlgids
Een stijlgids is een document. Meestal een pdf met het logo, de kleuren en een lettertype. Prima voor drukwerk, maar het staat los van je website.
Een design system leeft in de code. De bouwstenen zijn niet beschreven maar gebouwd. Pas je er een aan, dan verandert hij overal waar hij gebruikt wordt.
Dat is het echte verschil. Een stijlgids beschrijft de bedoeling. Een design system dwingt hem af. In CSS werk ik daarvoor met vaste waarden die een naam hebben.
Heeft een klein bedrijf dit nodig?
Niet in de zware vorm die grote merken gebruiken. Die hebben hele teams die eraan werken. Dat is voor het MKB overdreven.
Maar de lichte variant is bijna altijd zinvol. Een pagina met je kleuren, je koppen en je knoppen naast elkaar. Dat is genoeg om consistentie bewaken en het kost een dagdeel.
De winst merk je pas bij de derde of vierde uitbreiding van je site. Daarvoor voelt het als extra werk. Daarna scheelt het elke keer tijd.
Onderhoud
Een design system dat niet wordt bijgehouden, wordt een leugen. Er staan dan bouwstenen in die niemand meer gebruikt, terwijl de echte site alweer verder is.
Ik loop het daarom mee tijdens onderhoud. Nieuwe onderdelen erbij, ongebruikte eruit. Werkt er iemand anders aan de site? Dan zit dat systeem in het child theme, waar hij bij kan.
Zo blijft het huisstijl vastleggen iets dat werkt in plaats van iets dat ooit is afgesproken. In WordPress koppel ik de waarden aan je thema-instellingen. Zo stel je zelf bij zonder iets stuk te maken.
Begin klein en bouw uit
Je hoeft niet met alles tegelijk te beginnen. Leg eerst je kleuren en je koppen vast. Dat is al genoeg om de meeste scheefgroei te stoppen.
Voeg daarna pas de onderdelen toe die je echt hergebruikt. Een knop en een kaart bijvoorbeeld. Onderdelen die je een keer nodig had, horen er niet in.
Laat het meegroeien met je site
Elke nieuwe pagina is een test. Kun je hem bouwen met wat er ligt? Dan klopt je systeem. Moet je iets nieuws maken? Voeg dat dan bewust toe. Verzin er niet losjes iets bij.
Zo blijft je systeem een hulpmiddel en geen keurslijf. Dat onderscheid bepaalt of collega’s het gebruiken of omzeilen.
Meer vragen over Design system
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een design system?
Wat is het verschil tussen een design system en een stijlgids?
Heeft een klein bedrijf een design system nodig?
Wat hoort er in een design system?
Wat levert een design system op?
Hoe houd je een design system actueel?
Wat is een design system?
Een stijlgids is een document. Meestal een pdf met het logo, de kleurcodes en het lettertype erin. Prima voor drukwerk en voor een nieuwe medewerker.
Maar een stijlgids staat los van je website. Iemand moet hem openen, lezen en toepassen. Gebeurt dat niet, dan verandert er niets.
Een design system leeft in de code. De bouwstenen zijn niet beschreven maar gebouwd. Pas je er een aan, dan verandert hij overal waar hij gebruikt wordt.
Dat is het echte verschil. Een stijlgids beschrijft de bedoeling. Een design system dwingt hem af.
In de praktijk werk ik met vaste waarden die een naam hebben. Je accentkleur heet dan accent, niet een reeks tekens. Verander je de waarde, dan schuift elke knop, link en kop mee. Zo blijft een huisstijl ook na jaren nog kloppen.
Heb je al een stijlgids liggen? Gebruik die dan als startpunt. De kleuren en het lettertype staan er al in. Je hoeft ze alleen nog om te zetten naar werkende waarden in je site.
Wat is het verschil met een stijlgids?
Een design system is een vastgelegde set bouwstenen en regels voor je vormgeving. Je legt er niet in vast hoe een pagina eruitziet, maar waar pagina’s uit bestaan.
Vergelijk het met een keuken. Een ontwerp is een foto van een afgemonteerde keuken. Een design system is de catalogus met kastjes, grepen en maten waarmee je elke keuken kunt bouwen.
Er zit altijd een zichtbare en een onzichtbare kant aan. De zichtbare kant zijn de onderdelen zelf: knoppen, formuliervelden, kaarten en meldingen. De onzichtbare kant zijn de regels: wanneer gebruik je welke knop, en waarom.
Die tweede helft wordt bijna altijd vergeten. Zonder regels is het geen systeem maar een verzameling plaatjes op een pagina.
Het doel is dat je site na twee jaar uitbreiden nog steeds klopt. Zonder systeem sluipt er verloop in dat niemand meer terugdraait. Meer over de techniek eronder lees je bij CSS.
Het klinkt als iets voor grote merken, maar de gedachte werkt op elke schaal. Ook met tien pagina’s is het prettig als een knop overal hetzelfde doet en hetzelfde oogt.
Heeft een klein bedrijf een design system nodig?
Niet in de zware vorm die grote merken gebruiken. Die hebben teams die er fulltime aan werken en documentatiesites van honderden pagina’s. Dat is voor het MKB overdreven en zonde van je geld.
De lichte variant is wel bijna altijd zinvol. Een enkele pagina met je kleuren, je koppen en je knoppen naast elkaar. Dat kost een dagdeel en is genoeg om consistentie te bewaken.
De winst merk je pas bij de derde of vierde uitbreiding van je site. Daarvoor voelt het als extra werk zonder resultaat.
Stel jezelf daarom een simpele vraag. Ga ik het komende jaar pagina’s toevoegen? Zo ja, dan verdient het zich terug. Zo nee, dan kun je wachten.
Een bijkomend voordeel is overdraagbaarheid. Werkt er ooit iemand anders aan je site, dan ziet die meteen wat de bedoeling is.
Reken het eens terug naar uren. Kost een nieuwe pagina je nu een dag, en straks een uur? Dan verdient een dagdeel voorbereiding zich al bij de tweede pagina terug.
Wat hoort er in een design system?
Ik leg altijd dezelfde zes dingen vast, en in deze volgorde.
Eerst de kleuren, met een naam en een functie. Dus accentkleur en tekstkleur, niet alleen een lijstje codes. Daarna de typografie: welke maat, welk gewicht en welke regelafstand per kop.
Dan een schaal voor afstanden. Zonder die schaal worden marges willekeurig en oogt een pagina rommelig zonder dat je kunt aanwijzen waarom.
Vervolgens de onderdelen zelf: knop, kaart, formulier, tabel en melding. Elk in de varianten die je echt gebruikt, niet meer.
Daarna het gedrag bij verschillende schermbreedtes. Wat gebeurt er op een telefoon, wat op een tablet.
En tot slot de toegankelijkheidseisen per onderdeel. Dat is de meest onderschatte. Leg je contrast en focus vast in je bouwstenen, dan is elke nieuwe pagina automatisch goed. Meer daarover bij accessibility.
Houd de lijst kort en eerlijk. Zes onderdelen die je echt gebruikt zijn meer waard dan dertig die niemand kent. Wat er niet in staat, hoef je ook niet te onderhouden.
Hoe houd je een design system actueel?
Door het onderdeel te maken van je onderhoud, niet van je goede voornemens. Een design system dat niet wordt bijgehouden, wordt een leugen.
Er staan dan bouwstenen in die niemand meer gebruikt, terwijl de echte site alweer verder is. Op dat moment vertrouwt niemand het nog en begint iedereen weer eigen knoppen te maken.
Ik loop het daarom periodiek mee. Nieuwe onderdelen erbij, ongebruikte eruit, en controleren of de regels nog kloppen.
Belangrijk is ook waar het staat. Ik zet het in het child theme, zodat het een update overleeft en een volgende bouwer erbij kan.
Spreek tot slot af wie erover gaat. Zonder eigenaar verwatert elk systeem binnen een jaar. Bij kleine bedrijven ben dat meestal jij, samen met je bouwer.
Zet een vast moment in je agenda, bijvoorbeeld twee keer per jaar. Zonder dat moment verwatert het, hoe goed je het ook hebt opgezet. Een half uur is genoeg.
Staan er op jouw site inmiddels vijf soorten knoppen? Stuur me je website via het formulier hieronder. Ik loop je pagina’s langs en breng in kaart waar je vormgeving uit elkaar loopt. Je krijgt een overzicht terug van wat je zou moeten vastleggen om dat te stoppen. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Ontwerpsysteem, designsysteem, componentenbibliotheek
