• Expertises
  • Cases
  • About
  • Contact
  • Expertises
  • Cases
  • About
  • Contact
More pages
Studio Goldfizh Digital Change Careers Interim Blogs
Find us at

Tractieweg 41K

3534AP Utrecht

Follow us
Instagram LinkedIn
Skip to content

Let’s team up!

Stories

Ruby

2023-03-15
Leestijd 8 min

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 systemsComponent 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 systemsStyleguide
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.

Deel deze blog op:

Ruby

UX Lead

ruby@goldfizh.nl

Hungry for more?

bekijk de volgende story

Nieuwsgierig geworden? Laat een berichtje achter!

    Copywriting
    • SEO
    • Webteksten
    • Tone of voice
    • Nieuwsbrief
    Marketing
    • Campagneplan
    • Data analyse
    • Marketing Automation
    • Advertising
    Customer Experience
    • Kanaalstrategie
    • Tech
    • UX/UI Design
    • Voice Technology
    Design
    • Huisstijl
    • Illustratie
    • Social media content
    • Visual Design
    Video
    • Explainers
    • Interactieve video
    • Animatie/motion
    • Podcast
    Interim

    Tractieweg 41K, 3534 AP Utrecht | privacy statement & algemene voorwaarden

    Tractieweg 41K, 3534 AP Utrecht
    Privacy statement & Algemene voorwaarden

    We zijn een marketing agency dus natuurlijk zijn wij gek op cookies 🍪
    Pas instellingen aanHelemaal prima
    Pas instellingen aan

    Privacy Overview

    This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
    Necessary
    Altijd ingeschakeld
    Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
    CookieDuurOmschrijving
    cookielawinfo-checkbox-advertisement1 yearSet by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Advertisement" category .
    cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
    cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
    cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
    cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
    cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
    CookieLawInfoConsent1 yearRecords the default button state of the corresponding category & the status of CCPA. It works only in coordination with the primary cookie.
    viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
    Functional
    Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
    Performance
    Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
    Analytics
    Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
    CookieDuurOmschrijving
    _ga2 yearsThe _ga cookie, installed by Google Analytics, calculates visitor, session and campaign data and also keeps track of site usage for the site's analytics report. The cookie stores information anonymously and assigns a randomly generated number to recognize unique visitors.
    _ga_LDYV63GPNN2 yearsThis cookie is installed by Google Analytics.
    _gat_UA-112673873-11 minuteA variation of the _gat cookie set by Google Analytics and Google Tag Manager to allow website owners to track visitor behaviour and measure site performance. The pattern element in the name contains the unique identity number of the account or website it relates to.
    _gid1 dayInstalled by Google Analytics, _gid cookie stores information on how visitors use a website, while also creating an analytics report of the website's performance. Some of the data that are collected include the number of visitors, their source, and the pages they visit anonymously.
    CONSENT2 yearsYouTube sets this cookie via embedded youtube-videos and registers anonymous statistical data.
    Advertisement
    Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
    CookieDuurOmschrijving
    VISITOR_INFO1_LIVE5 months 27 daysA cookie set by YouTube to measure bandwidth that determines whether the user gets the new or old player interface.
    YSCsessionYSC cookie is set by Youtube and is used to track the views of embedded videos on Youtube pages.
    yt-remote-connected-devicesneverYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
    yt-remote-device-idneverYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
    yt.innertube::nextIdneverThis cookie, set by YouTube, registers a unique ID to store data on what videos from YouTube the user has seen.
    yt.innertube::requestsneverThis cookie, set by YouTube, registers a unique ID to store data on what videos from YouTube the user has seen.
    Others
    Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
    CookieDuurOmschrijving
    613b1c436df40a9c6a6bac18bab59537sessionNo description
    OPSLAAN & ACCEPTEREN
    Aangedreven door CookieYes Logo