Open de website van een gemiddeld mkb-bedrijf, daarna de online agenda en daarna de factuur die je als klant krijgt. Vaak zie je drie net iets andere blauwtinten, twee lettertypes en knoppen die op elke plek anders zijn. Niemand heeft dat zo bedacht. Het ontstaat omdat elke keuze ooit los is gemaakt, door een andere persoon en op een ander moment.
Vaste ontwerpafspraken voorkomen dat. In het vak heten ze design tokens. In dit artikel leggen we uit wat het zijn, waarom ze je tijd en geld besparen en waar je als ondernemer op kunt letten, ook als je zelf nooit een regel code schrijft.
Wat zijn vaste ontwerpafspraken?
Een ontwerpafspraak is een naam voor een keuze die je één keer maakt. In plaats van op elke plek een kleurcode in te vullen, spreek je af dat er een kleur merkkleur bestaat. In plaats van per scherm te kiezen hoeveel ruimte er tussen twee blokken zit, spreek je af dat er een kleine, middelste en grote afstand is.
Elk scherm, elke knop en elke e-mail gebruikt daarna die namen. De werkelijke waarde staat op één plek. Wil je de merkkleur aanpassen, dan verander je die ene afspraak en volgt alles wat ernaar verwijst vanzelf. Je hoeft niet meer te zoeken naar plekken die je vergeten bent.
Welke afspraken horen erin?
Een bruikbare set is kleiner dan je denkt. Voor de meeste bedrijven volstaan deze groepen:
- Kleuren: tekst, achtergrond, vlakken, randen, de merkkleur en een paar kleuren voor meldingen (gelukt, waarschuwing, fout).
- Lettertypes en tekstgroottes: één of twee lettertypes en een vaste reeks groottes voor koppen, gewone tekst en kleine toelichting.
- Afstanden: een korte reeks vaste maten voor ruimte tussen en binnen blokken.
- Afronding en schaduw: een paar vaste waarden voor hoe rond hoeken zijn en hoe sterk iets boven de pagina zweeft.
Meer is zelden beter. Twintig grijstinten of tien soorten afstand maken het systeem juist onduidelijk, omdat niemand meer weet welke je wanneer gebruikt. Weinig afspraken die iedereen kent werken beter dan veel afspraken die niemand onthoudt.
Wat levert het je op?
Een herkenbaar bedrijf op elke plek
Een klant van een kapsalon ziet de website, boekt een afspraak, krijgt een bevestiging per e-mail en betaalt later via een link. Als die momenten er hetzelfde uitzien, voelt het als één bedrijf. Dat wekt vertrouwen, zeker op het moment dat iemand gegevens of geld achterlaat.
Sneller aanpassen
Een restaurant dat zijn huisstijl vernieuwt, wil dat de nieuwe kleuren meteen overal staan: op de website, in het bestelscherm en op de bon. Met vaste afspraken is dat één wijziging op één plek. Zonder afspraken is het zoekwerk door tientallen schermen, met grote kans dat er ergens een oude kleur blijft staan.
Minder fouten en minder discussie
Wie een nieuw scherm toevoegt, hoeft niet opnieuw te kiezen hoe groot een kop is of welke blauwtint het wordt. Die vraag is al beantwoord. Dat scheelt tijd bij het bouwen en bij het controleren, en het voorkomt dat twee mensen hetzelfde net anders doen.
Beter leesbaar en toegankelijk
Als kleurcombinaties één keer zijn gecontroleerd op voldoende contrast, geldt dat voor elke plek waar ze worden gebruikt. Dat helpt bezoekers die slechter zien en iedereen die buiten in de zon op een telefoon kijkt. Ook een donkere weergave wordt eenvoudiger, omdat je per afspraak een tweede waarde kunt vastleggen.
Hoe pak je het aan?
Je hoeft niet te wachten tot je een groot ontwerpsysteem hebt. Begin met wat je al hebt:
- Inventariseer: leg je website, je offertes, je e-mails en je software naast elkaar en noteer welke kleuren, lettertypes en groottes je ziet.
- Kies en schrap: bepaal per groep welke waarden blijven. Vijf blauwtinten worden er één of twee.
- Geef namen: noem een afspraak naar zijn rol (merkkleur, tekst, achtergrond), niet naar de waarde. Dan blijft de naam kloppen als de kleur verandert.
- Leg het vast op één plek: een kort document met de afspraken, en in de software en website één bron waar ze vandaan komen.
- Spreek af wie wijzigt: nieuwe afspraken komen er alleen bij als het echt nodig is, en altijd op die ene plek.
Werk je met een partij die je website of software bouwt, vraag dan hoe zij dit regelen. Een goed antwoord is concreet: waar staan de afspraken, wat gebeurt er als je de merkkleur wijzigt en hoeveel schermen moeten er dan met de hand worden aangepast.
Hoe wij ermee werken
Onze software per branche en de websites die we bouwen gebruiken dezelfde set ontwerpafspraken. Zo past de boekknop op je website bij het boekingsscherm, en de factuur bij het klantportaal. Bij het inrichten zetten we jouw kleuren en lettertype in die afspraken. Verandert je huisstijl later, dan passen we de afspraken aan en volgen de schermen mee.
Veelgestelde vragen
Heb ik vaste ontwerpafspraken nodig als ik een kleine website heb?
Ook bij een kleine website helpen ze, omdat die vaak groeit en er later software, e-mails of een webshop bij komen. Een korte set van kleuren, tekstgroottes en afstanden is genoeg.
Is dit hetzelfde als een huisstijlhandboek?
Het lijkt erop, maar een huisstijlhandboek beschrijft hoe het eruit moet zien. Ontwerpafspraken zijn die keuzes als benoemde waarden die de website en software direct gebruiken, zodat het ook echt zo blijft.
Wat als ik mijn merkkleur wil veranderen?
Dan pas je de waarde van de afspraak aan. Alles wat die afspraak gebruikt, krijgt de nieuwe kleur. Controleer daarna wel het contrast, zodat tekst leesbaar blijft.