Design system laten maken

Wat is een design system?

Het verschil met een huisstijlboekje is dat niemand een design system kan negeren. Een pdf met regels ligt na een half jaar onder in een la, onder de kerstkaarten. Een bouwsteen die in je site zit, is het enige wat er is. Dus wordt hij gebruikt.

Wat je eraan hebt, merk je pas bij de tweede en de derde pagina. De eerste kost evenveel als altijd. Daarna zet je iets nieuws in elkaar uit onderdelen die al af zijn, al getest zijn en al goed staan op een telefoon.

Waarom één set bouwstenen zich terugbetaalt

Het geld gaat er vooraf in, de winst komt daarna. Hoe meer pagina's, hoe meer mensen die eraan werken en hoe meer jaren je ermee doet, hoe sneller een design system zichzelf terugverdient.

Een nieuwe pagina in een dag: Een landingspagina of een nieuw scherm zet je in elkaar uit onderdelen die er al zijn. Wat vroeger weken duurde, is dan een dag werk. Ook voor iemand die geen ontwerper is.

Alles blijft op elkaar lijken: Er sluipt geen vierde tint blauw in en geen vijfde soort knop. Ook niet als er over twee jaar iemand anders aan werkt, want de bouwstenen liggen vast.

Fouten herstel je op een plek: Zit er iets mis in het datumvakje, dan pas je dat op één plek aan en is het meteen goed op elk scherm waar het staat. Zonder design system zoek je al die plekken zelf bij elkaar, en je vergeet er altijd een paar.

Goed te gebruiken door iedereen: Genoeg kleurverschil tussen tekst en achtergrond, een duidelijk kader om het veld waar je staat, en bediening met alleen een toetsenbord: dat regel je één keer per bouwsteen. Elke pagina die je daarna maakt, is op die punten meteen goed.

Voor wie is dit

Een design system wordt interessant zodra er meer dan één iemand aan je site werkt, of zodra hij langer dan een jaar mee moet.

• Je site heeft inmiddels vier soorten knoppen en niemand weet nog welke de goede is
• Je hebt meerdere sites of merken die familie van elkaar moeten blijven
• Je marketingteam wil zelf pagina's maken zonder dat het een rommeltje wordt
• Je hebt een systeem waar elk kwartaal een paar schermen bij komen
• Je wisselt van bureau en wil dat een ander er zo mee verder kan

Wat je krijgt

• Een kist met knoppen, formulieren, tabellen, meldingen en menu's, werkend en klaar voor gebruik
• Kleuren, letters, witruimte en rondingen één keer vastgelegd, ook voor een donkere weergave
• Een overzichtspagina waarop je elk onderdeel kunt zien en zelf even kunt uitproberen
• Van elk onderdeel ook de lege, de foute en de ladende versie, niet alleen de mooie
• Automatische tests die piepen zodra een wijziging ergens anders iets stukmaakt
• Een korte handleiding voor je eigen mensen: wanneer gebruik je wat, en wanneer juist niet

Hoe we het bouwen

Eerst tellen wat je nu hebt. We maken een overzicht van alles wat er nu op je site staat. Meestal blijken er van dezelfde knop, kaart of melding zes varianten naast elkaar te leven, elk met een eigen afwijking die ooit ergens is ontstaan. Dat lijstje alleen al laat zien waar het geld weglekt.

Dan terugbrengen tot één. Per onderdeel kiezen we één versie, en die maken we goed. We beginnen bij wat het vaakst voorkomt: knoppen, koppen, invulvelden en kaarten. Met die vier staat het grootste deel van een gemiddelde pagina er al.

Dan echt doorvoeren. Scherm voor scherm vervangen we het oude door het nieuwe, met tests eromheen. Een design system dat naast de oude boel blijft liggen, is dubbel werk in plaats van minder werk.

Wat kost een design system?

Wat een design system kost hangt af van wanneer je het bouwt. Doe je het meteen mee met een nieuwe site, dan is het een stuk goedkoper. Die onderdelen maak je dan toch al.

De prijs hangt af van het aantal onderdelen en van wat er nu staat. Een site waar in tien jaar van alles bij is gekomen, kost meer opruimwerk dan een nieuw project. Meerdere merken of talen tellen ook mee.

Daarna is het onderhoud beperkt: updates, tests en kleine uitbreidingen. Grotere wijzigingen doen we als losse klus, en met een design system eronder zijn die klussen doorgaans kleiner dan zonder.

Waarom Mediavisie Web

Wij bouwen met eigen mensen en zonder pagebuilder, zo'n hulpprogramma waarmee je pagina's in elkaar sleept. Je bouwstenen hangen dus niet aan een product van iemand anders dat volgend jaar van eigenaar wisselt of ineens geld per site gaat kosten.

De code is van jou. Stap je over naar een ander bureau, dan neem je het design system mee en kan die partij er direct mee verder. Daar is zo'n kist met bouwstenen ook precies voor bedoeld.

Bij elke oplevering lopen automatische tests alle onderdelen na. Zo weet je zeker dat een aanpassing aan de knop niet stiekem de leesbaarheid van je formulier verpest.