15 maart 2023
Design systems zijn een hot topic. Niet gek, want ze helpen UX-, UI- en visual designers wereldwijd om op een consistente, snelle en gemakkelijke manier interfaces op te bouwen. In deze blog leg ik je uit wat deze term precies inhoudt, waarom designers hier zo’n fan van zijn én hoe je zelf aan de slag kunt met je eigen design system. Let’s go!
Een design system is een soort bibliotheek waarin de bouwstenen staan beschreven die je nodig hebt om jouw website, app of ander communicatiemateriaal op te bouwen. Denk bij deze bouwstenen aan kleur en typografie, maar ook aan componenten als buttons, forms of footers. Om een design system compleet te maken, wordt elk component aangevuld met coding-guidelines en regels voor gebruik. Bovendien is een design system is een dynamisch document. Het kan namelijk worden aangevuld en aangepast, zodat het meebeweegt met de organisatie.
Een design system kan enorme toegevoegde waarde hebben voor jouw design team. Ik leg je uit waarom een design system een must is voor jou én je mede-designers, marketeers en developers.
Sneller interfaces ontwerpen
Waarom zou je elk component opnieuw ontwerpen als deze al eens eerder gemaakt is? Een design system zorgt ervoor dat je componenten opslaat in één biobliotheek en dat andere designers deze kunnen hergebruiken. Zo kun je interfaces steeds sneller opbouwen. Dat scheelt tijd én geld.
Beter samenwerken als design team
Als je samenwerkt aan een product in een team met andere designers, is een design system ideaal. Iedereen gebruikt dezelfde ‘legosteentjes’ om interfaces op te bouwen en kan bijdragen om het design system uit te breiden met nieuwe componenten.
Consistentie in alle designs
One single source of truth: met een design system heb je nooit meer discussie over designs. Iedereen gebruikt immers dezelfde kleuren, typografie en componenten, ook als je aan verschillende producten of diensten werkt. Fijn!
Design systems en component libraries worden vaak door elkaar gehaald. Niet gek, want de twee hebben veel gemeen. Toch zijn ze niet helemaal hetzelfde. Een component library is enkel en alleen een overzicht van UI-components. Wat voor componenten dat precies zijn, hoeveel componenten er opgeslagen zijn en voor welke devices deze zijn ontworpen hangt af van de organisatie en de producten waarvoor deze componenten zijn ontwikkeld. Een design system is daarentegen een compleet overzicht van componenten, aangevuld met documentatie, regels en coding-guidelines. Met andere woorden: een component library is een (belangrijk) onderdeel van een design system, maar een design system bevat veel meer dan dat. Meer weten over het ontwikkelen van component libraries? Lees dan deze blog.
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. Het voordeel hiervan is dat alle componenten automatisch mee veranderen, mits het design system goed is opgebouwd met ‘atomen’ (lees hier meer over in de vorige blog). Dus stel dat er wordt besloten dat de tint grijs niet #e2e2e2 moet worden, maar #e4e4e4, kun je dat in de bron aanpassen en zullen alle componenten waarin deze kleur gebruikt wordt, automatisch aangepast worden. Omdat een design system de single source of truth van het design team is, creëer je consistentie over alle designs heen.
Zin om aan de slag te gaan? Snappen we! Laat je van tevoren nog even inspireren door merken die hun design system online hebben staan. We zetten onze favorieten voor je op een rijtje:
Werk je voor een organisatie heb je hulp nodig bij het opzetten van een design system? Onze UX-designers helpen je graag! Vul het formulier hieronder in, dan nemen we zo snel mogelijk contact met je op.
Meer weten over wat een design system kan betekenen voor jouw organisatie? Lees dan verder in deze blog.
.png)
.jpg)
