De komst van ontwerpprogramma’s als Sketch en Figma heeft de ontwerpwereld afgelopen jaren op zijn kop gezet. Het design system is een van de grote innovaties van deze programma’s. Waar ontwerp bestanden voorheen uit lagen, afbeeldingen of teksten bestonden is het nu mogelijk om stijlen en componenten te creëren die later eenvoudig te gebruiken zijn. In dit artikel leg ik uit wat een design system is en wat je eraan hebt.
Design System: van klein naar groot
Wanneer je werkt aan omvangrijke ontwerp projecten is het slim om zo veel mogelijk stijlen en componenten gestructureerd uit te werken in een design system. In een design system leg je zoveel mogelijk kenmerken van je ontwerp vast: kleuren, lettertypes, grids, iconen. Zie het als een ontwerp bibliotheek. Met deze kenmerken creëer je vervolgens elementen waarvan je verwacht dat je ze veelvuldig gaat gebruiken. Denk daarbij aan buttons, formuliervelden en titels. Vanuit deze elementen maak je vervolgens componenten: een product tegel, een formulier. Wanneer je componenten samenvoegt tot bepaalde functionaliteiten ontstaat er een module. Bijvoorbeeld de header van een pagina of mobiele navigatie. Wanneer je deze modules samenvoegt heb je een template.
Atomic Design
Deze ontwerpmethode wordt ook wel atomic design genoemd. Hierbij werk je van binnen naar buiten op een hiërarchische en vaste manier. De vijf onderdelen van atomic design zijn: atomen, moleculen, organismen, templates en pagina’s.
Hoe werk je samen met een design system?
Door het slim inrichten van je stijlen en componenten voorkom je eindeloos knip- en plakwerk bij een simpele aanpassing in bijvoorbeeld je kleur pallet of typografie. Als je je design system goed opbouwt zou een aanpassing in het fundament van het ontwerp (de styling) een fluitje van een cent moeten zijn.
Naast dat jouw ontwerpen een stuk beheerbaarder zijn is het ook makkelijker om samen te werken: vanuit dezelfde set met componenten kun je gelijktijdig modules of templates ontwikkelen. Werken met een design system biedt ook de mogelijkheid om deze componenten vast te leggen in een code base. Hierbij hanteren developers dezelfde systematiek als ontwerpers en worden pagina’s opgebouwd uit dezelfde modules en componenten als in het ontwerp.
De voordelen van een design system
Het opzetten van een goed design system kost veel tijd. Of dit qua tijd de moeite waard is ligt aan de omvang van het project. Maar naast het besparen van tijd en het eenvoudig samenwerken heeft het werken met een design system nog een groot voordeel: focus. Omdat je eerder van klein naar groot hebt ontworpen hoef je bij het maken van grotere complexere ontwerp vraagstukken je niet meer bezig te houden met de uitwerking van de details. Dit haalt de discussie uit je ontwerp: de eerder gedefinieerde componenten staan immers al vast en je verliest je als ontwerpen niet in het alleen mooi maken van het ontwerp. Zo kun je tijd besteden aan echte ontwerp vraagstukken.
Een design system voorkomt wildgroei
Voor een digitaal product is het belangrijk voor de gebruikers dat deze herkenbare patronen toepast. Zonder vooraf gedefinieerde componenten, stijlen en brand-assets kan elk ontwerp zijn eigen leven gaan lijden. Zorg er dus voor dat deze elementen op een centrale plek zijn uitgewerkt. Denk hierbij bijvoorbeeld aan het definiëren van de grootte van jouw knoppen, verschillende soorten buttons en kleuren en werk deze tot in het kleinste detail uit.
Hedendaagse design tools zijn zo ingericht dat als je dit één keer goed doet, dit veel tijd scheelt op de lange termijn. Zo worden jouw designs én die van jouw collega’s consistent. Dit scheelt jouw design team tijd en het zorgt er voor dat de gebruiker altijd dezelfde elementen te zien krijgt! Win-win, right?
Meer weten?
Wil je meer weten over design systems en hoe dit werkt in Figma of Sketch? Thomas Daamen en Niels van der Leeuw vertellen je er graag meer over. Neem gerust contact met ons op!
