We kregen groen licht van Buienradar om een design system op te zetten. Dat betekent een digitaal brandbook waar alle regels omtrent componenten en huisstijl in zijn opgeslagen. Zo weet elke afdeling of elke betrokken partij precies welke componenten waar horen. Om dit design system te bouwen is er eerst onderzoek gedaan naar de huidige werkwijze. Alle devices - van desktop tot mobile web, tablet en app design - bleken alle vier een ander design te gebruiken. Kortom: vier verschillende stijlrichtingen.

Het doel was duidelijk: één design system opbouwen, zodat o.a. alle devices dezelfde smoel krijgen. Hiervoor is vanuit het Atomic design-principe een opbouw gemaakt in Sketch. Het design system is in verschillende hoofdstukken opgebouwd. Per hoofdstuk is onderscheid gemaakt tussen gebruik van alle componenten zoals buttons, cards, banners en widgets, maar ook de layout is tot in de kleinste knopjes en kleuren vastgelegd. Van het kleurgebruik en de dark mode tot de regelafstand van de copy.

Omdat Buienradar vaak met diverse partijen samenwerkt, was het van belang dat iedereen makkelijk en snel bij alle elementen en stijlregels kon. Dat scheelt Buienradar niet alleen veel werk, het voorkomt ook inconsistentie bij intern en extern werk. Daarom besloot Buienradar tijdens het bouwen van het design system ook de online documentatietool Zeroheight aan te schaffen. Met deze tool kan je samenwerken met je collega’s (en externen) en kun je direct het design system bekijken.

Dat betekent dat het document met nog meer partijen gedeeld kan worden en er ook verschillende resources beschikbaar zijn. Zo kun je een complete set van huisstijlcomponenten downloaden, zoals logo’s, iconen en buttons. Met deze efficiëntieslag heeft Buienradar de guidelines van één persoon overgezet naar een consistente digitale brand bank. Hierdoor is er minder wachttijd voor bijvoorbeeld development, want alles staat in het systeem. Kortom: laat die buien maar komen, of toch niet…