Design system: alles wat je als UX-designer moet weten

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!

Ga snel naar:

• Wat is een design system?
• Waarom zou je als UX-designer een design system opzetten?
• Wat is het verschil tussen een design system en een component library?
• Wat is het verschil tussen een design system en een styleguide?
• Voorbeelden van design systems
• Hulp nodig bij het opbouwen van een design system?

Wat is een design system?

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.

Waarom zou je als UX-designer een design system opzetten?

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
• Beter samenwerken als design team
• Consistentie voorkomt discussie

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!

Wat is het verschil tussen een design system en een  component library?

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.

	Design systems	Component libraries
UI-components	✔	✔
Regels & documentatie	✔
Coding-guidelines	✔

Wat is het verschil tussen een design system en 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. 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.

	Design systems	Styleguide
Digitale omgeving	✔	✔ (heel soms ook print)
Dynamisch document	✔
Focus op digitale output	✔

5x voorbeelden van amazing design systems

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:

• Audi
  Check design system hier
  
• Google (Material Design)
  Check design system hier.
  
• Apple
  Check design system hier.
  
• Shopify
  Check design system hier.
  
• Atlassian
  Check design system hier.

Meer weten over design systems?

Werk je voor een organisatie heb je hulp nodig bij het opzetten van een design system? Onze UX-designers helpen je graag! Stuur een mailtje naar ruby@goldfizh.nl en 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.