Consistent communiceren: bouw een design system in 3 stappen

In theorie is een design system onmisbaar. Zeker als groeiende organisatie, waar het steeds moeilijker is om een eenduidig gezicht te tonen in al je communicatiemiddelen. Maar hoe bouw je zo’n systeem, waar creativiteit en consistentie hand in hand gaan? In dit artikel vertel ik je hoe je in drie stappen een concrete blauwdruk voor een design system neerzet.

Definitie design system

Stel je een centrale omgeving voor, waarin alle bouwstenen van digitale diensten en producten van een organisatie staan. Uit deze bron kunnen alle bouwteams putten (webdevelopers, webredactie, app-ontwikkelaars maar ook de afdelingen communicatie en marketing). Doordat iedereen dezelfde bouwstenen gebruikt om de diensten en producten op te bouwen, is er een verregaande consistentie in design en (digitale) communicatie. En dus ook in de gebruikerservaring. Dit systeem noem je een design system.

Het is de uitwerking van een goed ontwerp. Oftewel, het centraal vastleggen van de principes, uitgangspunten, toepassing en uitwerking. In die zin is het onmisbaar. Het is een solide basis waarop verder gebouwd kan worden.

De definitie en de voordelen zijn nu bekend, maar hoe stel je er een op?

De omvang van een design system

De term ‘design system’ wordt soms al gebruikt bij slechts een stijldocument en een front-end bibliotheek. Twee onmisbare tools, maar dit vertegenwoordigt nog geen design system als geheel. Een volwaardig systeem houdt rekening met principes, uitgangspunten en toepassingen voor (web)designers, front-end designers én developers. Het gaat om de manier waarop je de gebruikers optimaal bedient met oog voor kwaliteit en efficiëntie. Daaronder liggen dus nog heel veel processen waar je als organisatie – sámen – doorheen moet. Doe je dat niet, dan is de kans groot dat het systeem in de praktijk onvoldoende wordt gebruikt. Mensen ontdekken hun eigen methoden en gaan omwegen gebruiken. Dat gaat ten koste van de consistentie van je communicatie-uitingen.

Flexibiliteit binnen de kaders

Een goed design system is enerzijds dwingend, want het geeft kaders voor de productie van nieuwe middelen. Anderzijds geeft het de vrijheid die nodig is om door te ontwikkelen. Het design system laat zien waar het ontwerp en de uitingen aan moeten voldoen, welke regels gevolgd moeten worden en hoe nieuwe middelen tot stand kunnen komen. Neem LEGO. Dit ‘ontwerpsysteem’ zit zo in elkaar dat je met verschillende typen blokjes, kleuren en bouwtekeningen de mooiste bouwwerken kunt maken. Zowel fysiek als virtueel (The LEGO Movie).

Het uitgebreide design system bestaat dus uit ontwerpprincipes, een basisontwerp, voorbeelden en regels voor de toepassing. Plus de code van de web- of app-onderdelen (zoals html, css en javascript), aangevuld met technische gebruiksdocumentatie. Maar ook richtlijnen voor het maken van content voor de verschillende communicatiekanalen, zoals het gebruik van fotografie, video, illustraties en de inzet van tekst (schrijfwijzer en tone-of-voice).

Design system blauwdruk in 3 stappen

Hoe een design system er exact uit komt te zien, is afhankelijk van de omvang van de organisatie, eventuele dochtermerken, het aantal kanalen, externe leveranciers, behoeften en soorten uitingen. Voor elke organisatie kan dit weer anders zijn. Om erachter te komen wat precies nodig is, zijn er drie noodzakelijke stappen: begrijpen, ontdekken en beslissen.

Stap 1: begrijpen

De eerste stap is om zo veel mogelijk relevante informatie boven tafel te krijgen. Denk bijvoorbeeld aan inzicht in het ecosysteem van de organisatie, het proces van multidisciplinair ontwikkelen en alle technieken en systemen die daarbij worden gebruikt. Hierbij is het logischerwijs belangrijk om met de verschillende disciplines samen te komen. Zo kunnen jullie ook de knelpunten en kansen identificeren. In het geval van de designer: die moet goed nadenken over consistentie in tekststijlen, navigatie, interactie, maatvoering en leesbaarheid.

Samen met de disciplines bepaal je vervolgens hoe elk aandeel vertaald wordt naar technische bouwblokken, ondergebracht in een logische architectuur. Je geeft namen aan de onderdelen zodat je zeker weet dat iedereen hetzelfde bedoelt. En je brengt alle beperkingen en flexibiliteit samen in kaart.

In een problem statement concludeer je vervolgens wat het design system moet doen, voor wie het bedoeld is en welke problemen het oplost.

Stap 2: ontdekken

Alle bouwstenen worden tijdens deze stap in beeld gebracht (zoals kleurpaletten, typografische maatvoering, grid-definities, iconen en grafische elementen). Deze aspecten kun je handig categoriseren volgens het principe van atomic design. Hierdoor ontstaan elementen, componenten, modules, templates en zelfs pagina’s. Maak daarnaast enkele richtlijnen ten aanzien van design principes, implementaties en toepassingen.

Gelijktijdig zul je in het multidisciplinaire team merken dat de manier van samenwerken een onderwerp van gesprek wordt. Hoe willen we samenwerken en wat is daarvoor nodig? Hoe verloopt de overdracht van informatie of opdrachten? Wat is wiens verantwoordelijkheid? Ook de afspraken over samenwerken moeten een plek krijgen in de organisatie. Dus ook deze wensen en opties verzamel je in deze stap.

Tot slot verdiep je je tijdens de ontdekkingsfase in de realisatie van het systeem. Welke mogelijkheden zijn er (good practises/voorbeeldcases)? Welke structuur kiezen we voor onze organisatie? Wat komt er in het plan? Welke technieken, tools en afspraken zijn nodig om het design system te realiseren?

Stap 3: beslissen

Dit is hét moment om knopen door te hakken:

• Leg alle samenwerkingsafspraken tussen disciplines (zoals UX, design en development) vast.
• Bepaal de techniek waarmee je gaat werken, inclusief frameworks en bijbehorende tooling.
• Bepaal een eenduidige naamgeving voor de componenten.
• Benoem stakeholders en teamleden die het systeem gaan ontwikkelen (en in de toekomst ook doorontwikkelen).

Op deze manier ontstaat een concreet plan, waaraan je als kers op de taart een globale roadmap toevoegt. Het gehele proces is in zo’n drie dagen te doorlopen.

De bouw van het design system

Met deze blauwdruk kun je toewerken naar een eerste, zichtbare versie van het systeem. Hoe dat eruit ziet is afhankelijk van de eerder gemaakte afspraken. Het eindproduct is zoals gezegd voor elke organisatie anders. Belangrijk in deze fase is om een presentatie voor te bereiden, waarin nut en noodzaak, het proces en de uitkomsten van het systeem worden gedeeld met de rest van de organisatie. Naast het creëren van draagvlak is dit ook een test om te kijken of je bepaalde zaken hebt gemist tijdens het proces.

Het design system als ‘kant-en-klaar product’ is een mythe

Wat je mogelijk opvalt in de voorgaande stappen: het design system is in belangrijke mate een proces en niet zozeer een kant-en-klaar product. Een design system raakt de hele organisatie. Iedereen werkt er actief aan mee. Het onderwerp leeft en is zichtbaar. Het is dan ook belangrijk om vanaf het begin draagvlak te creëren. Zowel in teamverband door multidisciplinaire samenwerking als in bredere zin door het presenteren en delen van de plannen en voortgang.

Maar hoe zit het dan met producten zoals de design system manager van InVision? Dit is slechts een tool waarmee de designer zijn bibliotheek vanuit Sketch maakt. Hiermee zet je niet de source-of-truth (de daadwerkelijke codering in html, css en javascript) als bouwstenen in je bibliotheek. De bouwstenen die je hiermee genereert, zijn beschrijvingen en visualisaties van het gebruik en de toepassing van elementen. Denk bijvoorbeeld aan een nieuwscomponent of een knop die is opgenomen als een .jpeg-afbeelding. In dat geval moet de developer zelf alsnog de code maken. In een optimaal design system is deze code al bekend.

Hoe moet het dan wel? Stel front-end centraal

Het ideale design system voor wat development betreft, zet juist front-end centraal. Wat je in de browser ziet is dan de basis van de ontwikkeling. Op dat moment ben je niet alleen flexibeler en onafhankelijker, maar ook minder gevoelig voor afwijkingen in je producten. Door de designs en stijlmiddelen al gecodeerd in de bibliotheek te zetten, kunnen hier geen onderlinge verschillen in sluipen. Mijn afsluitende advies luidt dan ook: bouw je design system op met alle kleine bouwstenen direct in code. Voor de doorontwikkeling is het een basis voor design in de browser. Op deze manier ontwikkel je een ‘levend’ design system dat steeds verder evolueert.

Het design system vervangt niet het proces van ontwerpen. Dat blijft een unieke samenwerking van verschillende disciplines. Onderzoek, mogelijke oplossingen bedenken, schetsen, een visuele stijl neerzetten… In de ontwerpfase moet er vrij, innovatief en creatief gedacht kunnen worden. In het design system worden de uitkomsten vervolgens vastgelegd, gestructureerd en uitgewerkt, zodat op basis daarvan de uiteindelijke uitingen consistent zijn.