[{"data":1,"prerenderedAt":296},["ShallowReactive",2],{"DefaultLayoutnl":3,"language-blog-slug-kick-start-design-system-design-inventory-workshop-i18n-slugs":132,"language-blog-slug-nl-kick-start-design-system-design-inventory-workshop":139},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140903","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140909","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140910","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140911","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140913","Over ons",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"NnUFs73_Saa8XE_jYZFHcw","Werken bij",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185271",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185272",{"__typename":50},{"id":75,"title":53,"link":76},"144185273",{"__typename":55},{"id":78,"title":79,"link":80},"144185274","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185275",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185276",{"__typename":38},{"id":89,"title":90,"link":91},"144185277","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licentie en disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","PDF bestand van De Voorhoede privacy statement","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455427-vh-isms-007-privacy-statement-de-voorhoede-nl.pdf",[100,112,122],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png",null,404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":118},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":104,"width":116,"height":117},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png",627,480,{"__typename":108,"id":119,"title":120,"url":121},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":123,"image":124,"link":127},"MT5SCyNxSTSr_v5eeATMZw",{"url":125,"alt":104,"width":126,"height":126},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png",518,{"id":128,"title":129,"link":130},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":131},"impact\u002Fdigitale-producten-privacy-by-design",[133,136],{"locale":134,"value":135},"en","kick-start-your-design-system-with-a-design-inventory-workshop",{"locale":137,"value":138},"nl","kick-start-design-system-design-inventory-workshop",{"page":140},{"slug":138,"i18nSlugs":141,"social":144,"title":149,"subtitle":79,"isArchived":150,"headerIllustration":104,"date":151,"authors":152,"introTitle":161,"items":162,"pivots":236,"relatedBlogPosts":244,"tags":265,"onMountedScript":155,"onUnmountedScript":155},[142,143],{"locale":134,"value":135},{"locale":137,"value":138},{"title":145,"description":146,"image":147},"Design System Workshop met Web Experts | De Voorhoede","Een bestaand ontwerp veranderen in een systeem is een uitdaging. Om dit proces een vliegende start te geven hebben wij een Design System Workshop ontwikkeld. ",{"url":148},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1631791147-design-inventory-cover.jpg","Kick-start jouw Design System met een Design Inventory Workshop",false,"2021-09-16T02:00:00.000+02:00",[153],{"name":154,"lastName":155,"slug":156,"image":157},"Jasper","","jasper",{"url":158,"alt":104,"width":159,"height":160},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523," Design systems versterken de gebruikerservaring en efficiëntie. Maar van een bestaand ontwerp een systeem maken kan een uitdaging zijn. Om dit proces een vliegende start te geven, hebben we de Design Inventory Workshop ontwikkeld.",[163,167,171,182,186,190,199,203,211,215,222,226,229],{"__typename":164,"id":165,"title":155,"body":166},"TextSectionRecord","EenEBrjlRuOta7P2pqfEaQ","\u003Cp>\u003Cspan>Een \u003Ca href=\"https:\u002F\u002Fvoorhoede.nl\u002Fnl\u002Fservices\u002Fdesign-system\u002F\" title=\"Design System\">Design System\u003C\u002Fa> is meer dan een overzicht van dezelfde typografie, kleuren en visuele componenten. Een goed systeem zorgt binnen een team voor gedeeld begrip, vocabulaire en regels rondom een ontwerp. \u003C\u002Fspan>\u003Cspan>Onze Design Inventory Workshop helpt digitale teams dit gedeelde systeem te creëren. \u003C\u002Fspan>\u003Cspan>Het startpunt van zo’n workshop varieert: van een ontwerpschets van een enkele site tot een verzameling bestaande digitale producten.\u003C\u002Fspan>\u003Cspan>\u003Cbr \u002F>\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":164,"id":168,"title":169,"body":170},"aC4r2YvSS3SX0IeUNYC6yA","Design System Inventory in 5 stappen","\u003Cp>\u003Cspan>Wij hanteren altijd dezelfde stappen bij een Design System Inventory:\u003C\u002Fspan>\u003Cspan>\u003Cbr \u002F>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Col>\n  \u003Cli>\u003Cspan>Verzamel alle ontwerpen\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan>Onderscheid maken tussen alle componenten\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan>Definieer component regels\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan>Definieer interactie- en datapunten\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan>Definieer paginatypen\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Fol>",{"__typename":172,"id":173,"image":174,"caption":179,"fullWidth":180,"captionPosition":181},"ImageRecord","Efn8YUipTAuucse_4RvmSA",{"url":175,"alt":176,"width":177,"height":178},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1631791262-design-inventory-workshop.jpg","Een vrouw, een man en nog een man staan achter een tafel waarop diverse onterpen liggen.",3514,1028,"Design system inventory workshop in progress",true,"bottom",{"__typename":164,"id":183,"title":184,"body":185},"fjZdajnxQD64s0VIpjauAw","1. Verzamel alle ontwerpen","\u003Cp>Om te beginnen willen we het hele team een gedeeld overzicht geven van het ontwerp:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\u003Cstrong>Hang afdrukken van alle ontwerpen aan de muur. \u003C\u002Fstrong>We doen de workshop bijvoorkeur in persoon, maar als je wat bomen wilt besparen of liever een workshop op afstand wilt doen, kun je ook alle ontwerpen importeren naar een online bord (zoals Miro of Mural). Deze stap kost wat tijd, dus je wilt dit misschien voorbereiden voordat de workshop begint.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>Geef alle pagina's een naam.\u003C\u002Fstrong> Om te communiceren over je design system, is het essentieel dat het team over hetzelfde praat. Geef daarom elk ontwerp \u002F pagina \u002F app-weergave een naam zoals \"productpagina\".\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>Geef elke pagina een URL (patroon).\u003C\u002Fstrong> Bijvoorbeeld \"\u002Fnl\u002Fshop\u002F39042-product-naam\". Voor nieuwe producten voegt dit structuur toe. Voor bestaande producten maakt het het gemakkelijker om delen terug te vinden die je tijdens deze workshop hebt gebruikt. ## 2. Alle componenten extraheren\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":164,"id":187,"title":188,"body":189},"effhSblDQdS8UfU8misInQ"," 2. Onderscheid maken tussen alle componenten","\u003Cp>Vervolgens willen we de ontwerpen opdelen in componenten:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\u003Cstrong>Knip afdrukken \u002F snijd afbeeldingen bij.\u003C\u002Fstrong> Misschien wil je alles twee keer afdrukken, zodat je er één op de muur kunt hangen en één kunt gebruiken om componenten uit te knippen. Als we een snelle versie van de workshop doen, tekenen we gewoon de omtrekken op de afdrukken op de muur.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>Groepeer dezelfde\u002Fvergelijkbare componenten.\u003C\u002Fstrong> Dit helpt om een begrip te krijgen van alle variaties die een component kan hebben, zowel bedoeld als onbedoeld. Een deel van dit proces is beslissen of dingen variaties zijn van dezelfde component of eigenlijk twee afzonderlijke componenten.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>Geef elke component een naam.\u003C\u002Fstrong> Bijvoorbeeld \"app-header\", \"gebruikersmenu\", \"pagina-sectie\". Probeer consistent en zo specifiek mogelijk te zijn. Noemen we deze dingen \"kaarten\" of \"tegels\"? En is \"kaart\" specifiek genoeg, of hebben we een aparte \"productkaart\" en \"artikelkaart\"?\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Onze collega Sjoerd heeft \u003Ca href=\"https:\u002F\u002Fcomponentizer.netlify.app\u002F\">Componentizer\u003C\u002Fa> gemaakt, een online tool om snel componenten te onderscheiden en te benoemen. Het is eenvoudig te gebruiken, probeer maar eens!\u003C\u002Fp>",{"__typename":172,"id":191,"image":192,"caption":197,"fullWidth":180,"captionPosition":198},"TbsIZSrSQji4qtn-5CgA_A",{"url":193,"alt":194,"width":195,"height":196},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1631792686-design-inventory-componentizer.jpg","Componentizer",2302,1692,"Maak onderscheid tussen alle componenten met de Componentizer","left",{"__typename":164,"id":200,"title":201,"body":202},"CCKMRvhsRRyeli45cfpg_w","3. Definieer component regels","\u003Cp>\u003Cspan>Het is tijd om het systeem in het Design System te plaatsen en regels te definiëren voor onze componenten:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\u003Cstrong>Benoem de onderdelen van elk component\u003C\u002Fstrong>. \u003Cspan>Zoals \"titel\", \"afbeelding\", \"inhoud\". Probeer ook hier consistent te zijn. Ontwikkelaars kunnen deze deelnamen netjes gebruiken in CSS-strategieën zoals BEM, waarbij deze vertaald worden naar \u003Ccode>product-card__title\u003C\u002Fcode>, \u003Ccode>product-card__image\u003C\u002Fcode>, enz.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan>\u003Cstrong>Voeg regels toe voor wanneer je een variant van een component gebruikt \u003C\u002Fstrong>en verwijder ongewenste varianten. Bijvoorbeeld, de titel van de eerste productkaart op de pagina moet altijd worden benadrukt. De variant kan worden vertaald naar code zoals \u003Ccode>product-card__title--highlight\u003C\u002Fcode>, maar de regels over wanneer de variant moet worden gebruikt, moeten op een plek staan waar het hele team toegang toe heeft. \u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan>\u003Cstrong>Definieer responsief gedrag.\u003C\u002Fstrong> Hoe verandert een component bij verschillende breekpunten? Hangt dit af van de grootte van het viewport of de grootte van de parent component? En betekent dit dat het gedrag afhankelijk is van de veelgevraagde \u003Ca href=\"https:\u002F\u002Fishadeed.com\u002Farticle\u002Fsay-hello-to-css-container-queries\u002F\">CSS-containerqueries\u003C\u002Fa>, of heb je misschien een aanvullende component nodig zoals een \"kaartgroep\" die verantwoordelijk is voor de lay-out van meerdere componenten? \u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan>\u003Cstrong>Noteer animaties en triggers.\u003C\u002Fstrong> Animaties worden gemakkelijk over het hoofd gezien bij het werken aan statische exports van het ontwerp. Als componenten animaties bevatten, noteer ze dan en beschrijf wat ze activeert. Als je animaties zijn gedefinieerd in een tool zoals \u003Ca href=\"https:\u002F\u002Fwww.protopie.io\u002F\">ProtoPie\u003C\u002Fa>, link er dan naar. Net als bij het responsieve gedrag, vind je misschien dat je component een parent component of context nodig heeft om animaties te binden aan wat ze activeert.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":172,"id":204,"image":205,"caption":210,"fullWidth":180,"captionPosition":181},"FYhc4FEjSnGo_G0PIWNZ3w",{"url":206,"alt":207,"width":208,"height":209},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1631791991-design-inventory-component-parts.jpg","Overzicht van componenten",3648,1302,"Definieren van componenten ",{"__typename":164,"id":212,"title":213,"body":214},"TrAkSfK4SEGqMDxt7F9TEQ","4. Definieer interactie & data punten","\u003Cp>The final piece of the puzzle is understanding how our components really work when users interact with them and finding out where components get their data from.\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\u003Cstrong>Markeer alle interactieve elementen.\u003C\u002Fstrong> Noteer hoe ze worden bestuurd en controleer of ze toegankelijk zijn. Als bijvoorbeeld een kaart kan worden uitgebreid, is dit dan duidelijk voor iedereen, of wordt dit alleen aangegeven met een hover-effect en is het alleen mogelijk door erop te klikken of te tikken? In dat geval voeg je een taak toe om de interactie mogelijk te maken met een toetsenbord en zorg je ervoor dat de focus van het element correct wordt beheerd. Deze stap zou moeten helpen om je design system \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fnl\u002Fimpact\u002Fdigital-products-accessible-for-everyone\u002F\">toegankelijk te maken voor iedereen\u003C\u002Fa>.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>Noteer data punten.\u003C\u002Fstrong> Het laatste wat onze componenten controleert, is de data die erdoorheen stroomt. Definieer waar de gegevens vandaan komen en in welk formaat. Dit helpt om te bepalen of een component verantwoordelijk is voor zowel het verkrijgen van zijn eigen gegevens als het tonen ervan, of dat je dit moet opsplitsen in een presentatiecomponent en een functioneel component dat verantwoordelijk is voor de gegevens.\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":172,"id":216,"image":217,"caption":155,"fullWidth":180,"captionPosition":181},"eNA-oxHuRjqyh4G8pCsMWw",{"url":218,"alt":219,"width":220,"height":221},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1631792228-design-inventory-responsive-behaviour.jpg","Componenten op desktop, tablet en mobiel",3670,1536,{"__typename":164,"id":223,"title":224,"body":225},"YLWw7noVRn2Y3mwoZ0Zadg","5. Definieer pagintypen","\u003Cp>Nu we onze componenten goed begrijpen, is het tijd om te valideren of we er complete pagina's mee kunnen maken.\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\n    \u003Cp>\u003Cstrong>Groeperen van dezelfde\u002Fvergelijkbare pagina's.\u003C\u002Fstrong> Dit is vooral handig wanneer je meerdere digitale producten hebt en je het design system gebruikt om ze gelijk te trekken.\u003C\u002Fp>\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Cp>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\">\u003Cstrong>Teken een lay-out per pagina met behulp van componenten. \u003C\u002Fstrong>Op deze manier bekijk je elk paginatype kritisch en ontdek je of er ontbrekende componenten zijn, of hopelijk dat je componenten kunt verwijderen of vervangen. Nu ervaar je echt de efficiëntie van een design system.\u003C\u002Fspan>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\">\u003C\u002Fspan>\u003C\u002Fp>\n  \u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":164,"id":227,"title":155,"body":228},"dpEdaV8nQAWLDk-wiIMuBA","\u003Cp>\u003Cspan>Als je al deze stappen uitvoert, kost dat best wel wat tijd. Afhankelijk van de grootte van het project en de beschikbare tijd, doen we verschillende versies van de workshop. We slaan bijvoorbeeld stappen over of we doen slechts een paar componenten met het hele team en de rest individueel. Om ze vervolgens te presenteren aan het team in een vervolgsessie.\u003Cspan class=\"white-space-pre\"> \u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan> Ik hoop dat je deze aanpak nuttig vindt en dat het je helpt voor het kick-starten van jouw \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fnl\u002Fservices\u002Fdesign-system\u002F\">design system\u003C\u002Fa>. \u003C\u002Fspan>\u003C\u002Fp>",{"__typename":230,"id":231,"title":232,"body":233,"linkLabel":234,"linkUrl":235},"CallToActionRecord","HwfQ_d3mRM-ey_59xjBD6w","Boek een Design System Workshop","\u003Cp>Wil je graag hulp bij het opstarten van jouw design system? Boek een Design System Workshop bij De Voorhoede. \u003C\u002Fp>","Boek een workshop","\u002Fnl\u002Fcontact",[237],{"title":238,"body":155,"links":239,"mailchimpValue":155,"mailchimpName":155,"mailchimpId":155,"formType":240,"contactPerson":241},"Heb je een vraag over onze services?",[],"contact",{"name":154,"lastName":155,"jobTitle":242,"image":243},"CTO, Co-founder",{"url":158,"alt":104,"width":159,"height":160},[245,252],{"slug":246,"title":247,"date":248,"authors":249},"kiezen-framework-design-system-componenten","Hoe kies je een framework voor design system componenten","2022-12-12T01:00:00.000+01:00",[250],{"name":154,"image":251},{"url":158,"alt":104,"width":159,"height":160},{"slug":253,"title":254,"date":255,"authors":256},"design-system-bouwen-react-webcomponenten","Een Design System bouwen met React Webcomponenten","2023-06-19T02:00:00.000+02:00",[257,259],{"name":154,"image":258},{"url":158,"alt":104,"width":159,"height":160},{"name":260,"image":261},"Sjoerd",{"url":262,"alt":104,"width":263,"height":264},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534892-sjoerd.jpg",1637,2182,[266],{"id":267,"title":268,"slug":269,"blogPosts":270},"JBiZUe8mQVujxlNVR5gx8Q","Design Systems","design-systems",[271,278,285],{"slug":272,"title":273,"date":274,"authors":275},"toegankelijkheid-in-design-systems","Toegankelijkheid in Design Systems","2025-06-17T14:15:56.000+02:00",[276],{"name":260,"image":277},{"url":262,"alt":104,"width":263,"height":264},{"slug":279,"title":280,"date":281,"authors":282},"design-system-op-maat-of-kant-en-klaar","Design System: op maat of kant-en-klaar?","2024-11-19T13:16:02.759+01:00",[283],{"name":154,"image":284},{"url":158,"alt":104,"width":159,"height":160},{"slug":286,"title":287,"date":288,"authors":289},"schrijf-code-eenmalig-en-gebruik-het-overal-met-mitosis-een-mooie-droom-of-werkelijkheid","“Schrijf code eenmalig en gebruik het overal” met Mitosis; een mooie droom of werkelijkheid?","2024-09-16T13:04:31.307+02:00",[290],{"name":291,"image":292},"Wessel",{"url":293,"alt":291,"width":294,"height":295},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1721035942-wessel.jpg",2135,2868,1776256147562]