Een gloednieuw design system

Code groen

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, en welke kleuren er bij een bepaalde banner worden gebruikt. Om dit design system te bouwen is er eerst onderzoek gedaan naar de huidige werkwijze. Want wat zijn de bestaande elementen en waar liggen de inconsistenties? Alle devices – van desktop tot mobile web, tablet en app design – bleken alle vier een ander design te gebruiken. Kortom: vier verschillende stijlrichtingen.

Aan de slag met Atomic design

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.

Editorial guidelines

Omdat Buienradar vaak met diverse partijen samenwerkt, zoals developers maar ook met adverteerders, 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, want dit document heeft dezelfde opbouw als de master variant die wij in Sketch hebben gebouwd.

Van één persoon naar openbaar digitaal brand book

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 huisstijl componenten 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. Plus de regels staan vast waardoor er onderling geen onduidelijkheid meer over kan ontstaan. Kortom: laat die buien maar komen, of toch niet…

“Samen met de UX/CX specialist van Buienradar hebben we hard gewerkt om een duurzaam design system op te bouwen, waar alle interne en externe partijen direct bij gebaat zijn. Want het nieuwe systeem is zoveel efficiënter én zorgt daarmee voor nog mooiere uitingen en bespaart veel tijd. Kortom: winst!”

– Kimberly Fairhead