Design systems: wat zijn het en hoe gebruik je ze?

Als je iets met design hebt, heb je deze term sowieso al weleens gehoord! Niet gek, want ze helpen UX-, UI- en graphic designers wereldwijd om op een consistente, snelle en gemakkelijke manier interfaces op te bouwen. In deze blog neem ik je -vanuit mijn perspectief als UX lead bij Goldfizh- mee in de wondere wereld van, jawel: design systems. Ik leg je uit wat deze term precies inhoudt, waarom we hier zo’n fan van zijn en vertellen je hoe je aan de slag kunt met je eigen design system. Let’s go!

Ga snel naar:

• Wat is een design system?
• Waarom is een design system belangrijk?
• Wat maakt een design system anders dan een styleguide? 
• Voorbeelden van design systems
• Hoe maak je een design system?
• Hulp nodig bij het opbouwen van een design system

Wat is een design system?

Een design system is een centrale plek waarin de bouwstenen staan beschreven waarmee je jouw digitale producten opbouwt. Je kunt het zien als een soort bibliotheek waarin verschillende visuele componenten zijn opgeslagen die je gebruikt voor jouw website, app of social media content. Kleur en typografie zijn in een design system – net als in een huisstijlhandboek – hoofdonderdelen, maar ook buttons, forms, footers en andere componenten staan in een design system beschreven. Vervolgens maken coding-guidelines, tone of voice en voorbeelden van toegepaste designs een design system compleet. 

De term design system hoor je vaak in combinatie met de term ‘atomic design’. Logisch, want een design system is in de basis opgebouwd uit kleine blokjes, ook wel ‘atoms’* genoemd. Met deze atoms kun je grotere componenten opbouwen. Digitale lego voor gevorderden dus!

*The definition of Atomic Design

Atomic Design is een designmethode die is geïnspireerd op de scheikunde. Deze methode gaat ervan uit dat interfaces volledig afgebroken en opgebouwd kunnen worden vanuit kleine stukjes: atomen. Met deze atomen kun je steeds grotere componenten vormen: van atomen maak je moleculen en van moleculen maak je organismes. Atomic Design gebruik je op deze manier om complexe interfaces voor websites en apps op te bouwen.

Afbeelding I: voorbeeld Atomic Design

In de afbeelding hierboven zie je een voorbeeld van hoe we atomic design hebben toegepast bij het opbouwen van een design system voor de nieuwe corporate website voor Arts en Zorg, één van onze klanten. Op het eerste niveau bepalen we bijvoorbeeld hoe functionele iconen eruitzien, maar ook wat de border radius en dropshadow bij een standaard ‘card’ zijn. Met deze ‘atomen’ kun je vervolgens je eerste ‘moleculen’ opbouwen. In het voorbeeld hierboven zie je hoe je met een card, een icoon en een text styling een list-item kunt samenstellen. Door verschillende moleculen te combineren, bouw je steeds grotere ‘organismen’ op. Zo vul je op een hele consistente manier jouw components library. Handig! 

Kortom, met een design system gebaseerd op Atomic Design weet iedereen uit jouw team -van designer tot communicatiemedewerker en van product-owner tot developer- precies hoe ze elementen hetzelfde op moeten bouwen. En laat dat nou net de sleutel zijn tot een succesvolle branding.

Waarom is een design system belangrijk?

Een design system heeft verschillende voordelen. Hieronder kort op een rijtje:

• Consistentie
• Snelheid
• Gemak

🧬 Consistentie

Hét belangrijkste ingrediënt voor een sterke branding? Dat is consistentie. Herhaling van keuzes op basis van jouw merkidentiteit, dragen in mijn ogen altijd bij aan een sterke branding. Toch kan het als organisatie best lastig zijn om consistentie te waarborgen. Je wil immers zichtbaar wil zijn op zoveel mogelijk online kanalen en bovendien zijn er vaak meerdere medewerkers, externe bureaus of freelancers die werken aan de visuele uitingen van jouw merk. Een wildgroei aan steunkleuren, afwijkende typografie en random UI componenten kan een gevolg zijn en hebben direct invloed op de user experience van jouw klanten. Een echte no-go!

Gelukkig kan een design system een organisatie helpen bij een consistente merkbeleving. Zodra je een design system ontwikkeld hebt, is dit de “single source of truth”. Dit is de basis van jouw visuele identiteit. Omdat iedereen gebruik maakt van precies dezelfde legosteentjes die zijn vastgelegd in jouw design system, zorg je ervoor dat al jouw design-uitingen dezelfde look & feel behouden. En dat wil je!

💨  Snelheid

Bij Goldfizh bouwen we design systems altijd op in Figma. Deze design-software geeft je de mogelijkheid om supersnel nieuwe componenten op te bouwen op basis van bestaande atomen. Handig! Denk maar even terug aan de iconen en cards uit het verhaal van Arts en Zorg. In het voorbeeld hierboven gebruikten we deze atomen voor een list-item, maar deze legoblokjes kun je natuurlijk ook gebruiken om een navigatiebalk of een productcard te ontwerpen. Op die manier ben je als designer in staat om in topsnelheid interfaces op te bouwen. En wat ik het allerfijnste vindt hieraan? Als er dan een wijziging wordt doorgevoerd in één van deze componenten (als bijvoorbeeld iemand besluit dat dropshadows echt een no-go zijn en niet meer gebruikt mogen worden), veranderen de componenten op elke pagina vrolijk mee. Dan hoef je dus nooit meer alles één voor één aan te gaan passen. Snelheid dus!

🕺 Gemak

Heb je een eenmaal jouw design system up and running? Dan kan iedereen uit jouw team hiermee aan de slag. Zo kunnen ook collega’s die minder ervaring hebben met UX- of UI-design bijdragen aan het ontwerpen van strakke interfaces.

Wat maakt een design system anders dan een styleguide? 

Een design system lijkt op een online styleguide, maar is in feite meer dan dat. Een design system is een levend document dat kan worden aangevuld en geoptimaliseerd. De vorm van een design system is altijd digitaal. Het voordeel hiervan is dat alle componenten automatisch mee veranderen, mits het design system goed is opgebouwd vanuit de hierboven besproken ‘atomen’. Dus stel dat er op een bepaald moment wordt besloten dat de tint grijs niet #e2e2e2 moet worden, maar #e4e4e4, kun je dat aanpassen en zullen alle components waarin deze kleur voorkomt meeveranderen. Omdat jouw design system jouw single source of truth is, zorgen we ervoor dat bij iedereen die meewerkt aan jouw project dit doet vanuit dezelfde basis. Alle neuzen dezelfde kant op!

Kortom, een design system is de basis voor iedereen die aan de slag gaat met design elementen. Web- en UX-designers halen gemakkelijk UI-componenten uit de componenten-library om nieuwe pagina’s mee samen te stellen. Software ontwikkelaars en front-end developers zien direct welk stukje code ze kunnen pakken om herhalende componenten te bouwen en contentmakers weten precies welke tone of voice ze kunnen gebruiken als basis voor hun short copy. Op die manier werk je aan die fantastische brand experience waar iedereen blij van wordt.

Voorbeelden van design systems

Voordat je aan de slag gaat met een eigen design system, is het handig om te weten dat er verschillende design systems bestaan die je kunt gebruiken als template. Waarom zou je immers het wiel opnieuw proberen uit te vinden als er al hele uitgebreide designs voor datzelfde wiel bestaan? 

De techreuzen in de wereld van het internet – ik noem een Google, Apple en Microsoft – hebben elk hun eigen design library vrij beschikbaar gemaakt voor iedereen. Zo heeft Google bijvoorbeeld Material Design: een enorm uitgebreid en gedetailleerd design system met allerlei herbruikbare componenten. Zo vind je lay-outs, text styles, kleur en componenten in één overzichtelijke omgeving. Gooi hier je eigen branding sausje overheen en je bent al een heel eind met je eigen design system.

Hoe maak je een design system?

Allemaal leuk en aardig, maar hoe maak je nou een design system? Where to begin? Ik neem je mee in een stappenplan dat gebaseerd is op het atomic design-principe. Hierbij gaan we uit van Figma als tool waarin je je design system gaat uitwerken. Figma is namelijk dé ideale design software om interactieve componenten vast te leggen en de uitwerking van interface designs op te bouwen. We recommend!

1. Zet jouw Figma file structure op.
   In Figma maak je een team aan waarin je alle betrokkenen toevoegt. Hierin maak je een project aan. Binnen dit project maakt Figma automatisch een file aan waarin je kunt starten met jouw design system. Ideaal! Ook als je daarna andere files aanmaakt waarin je je designs gaat maken, kun je uit deze design system file componenten halen.
   
   
2. Basics first: start met kleur, typografie en atoms.
   Deze elementen zijn meestal al vastgelegd in een huisstijlhandboek. In Figma leg je deze vast op hoofdniveau. Ik start altijd met kleur en typografie: deze twee zijn echt de basis voor alles. Vul primaire kleuren eventueel aan met ondersteunende tinten en neutrale grijstinten. Geef text-styles alvast de juiste benaming (H1 t/m H6 + body tekst). Zo weten developers direct hoe jouw designs zijn opgebouwd.
   
   Daarna kun je aan de slag met atomen zoals buttons, tags en cards. In Figma kun je heel eenvoudig varianten maken. Zo kun je primaire en secundaire buttons maken en voeg je zelfs hover states toe.
   
   Tip 1: Zorg ervoor dat jouw design system file er netjes en opgeruimd uitziet: alle betrokken collega’s moeten er namelijk lekker in kunnen werken. Werk met documentatie en uitleg om een compleet beeld te vormen. Geef ook alle componenten een duidelijke naam, dat helpt om de boel overzichtelijk te houden.
   
   
3. Leg de eerste moleculen vast in jouw design system.
   Op basis van de atomen die je hebt vastgelegd kun je aan de slag met moleculen. Ik begin vaak met componenten als formuliervelden, dialog boxes, list items of notificaties. Kijk goed naar het type product dat je wil opbouwen en bedenk welke componenten daarin handig zijn. Heb je de basics vastgelegd? Dan kun je met deze moleculen organismen gaan opbouwen. Zo werk je bijvoorbeeld een heel formulier of een complete top-bar navigatie met drop-down menu uit.
   
   Tip 2: Wil je gebruik maken van een standaard design system zoals Material Design van Google? Dan is dit hét moment om hier alvast een template voor te downloaden. In de Figma community vind je talloze templates die je gratis kan gebruiken.
   
   
4. Interactie.
   Figma biedt een aantal handige mogelijkheden om interactie vast te leggen. Zo kun je bijvoorbeeld met ‘variants’ verschillende versies van jouw buttons uitwerken en laten zien wat hover- en active states doen. Met deze interactieve components worden jouw prototypes ook direct super realistisch.
   
   
5. Design & improve.
   Met jouw nieuwe design system bouw je in no-time nieuwe interfaces op. Zoals al eerder gezegd: een design system is een dynamisch document en is eigenlijk nooit af. Parallel aan het design proces kun je componenten toevoegen en verbeteren.
   

Hulp nodig bij het opbouwen van jouw design system?

Ja, een design system ontwikkelen kost tijd. Toch zou ik elke organisatie aanraden om deze tijd te investeren! Op de lange termijn draagt een design system namelijk bij aan het ontwikkelen van een sterke brand experience en helpt het designers bij het supersnel en gemakkelijk opbouwen van gestroomlijnde user experiences. 

Als UX Lead bij Goldfizh help ik onze klanten dagelijks bij het uitdenken van user experience flows en het ontwerpen van gelikte interfaces. Ik denk graag mee met jouw design vraagstuk en wie weet heb jij dan straks een design system ontwikkeld waarmee je de user experience van jouw klanten een boost geeft! Geïnteresseerd? Neem contact op met mij of vul het formulier hieronder in. 🚀🔥