[{"data":1,"prerenderedAt":293},["ShallowReactive",2],{"DefaultLayoutnl":3,"language-blog-slug-affordance-design-system-componenten-i18n-slugs":132,"language-blog-slug-nl-affordance-design-system-componenten":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","affordance-design-system-components",{"locale":137,"value":138},"nl","affordance-design-system-componenten",{"page":140},{"slug":138,"i18nSlugs":141,"social":144,"title":149,"subtitle":79,"isArchived":150,"headerIllustration":151,"date":155,"authors":156,"introTitle":165,"items":166,"pivots":218,"relatedBlogPosts":238,"tags":262,"onMountedScript":170,"onUnmountedScript":170},[142,143],{"locale":134,"value":135},{"locale":137,"value":138},{"title":145,"description":146,"image":147},"Affordance in Design System Componenten | De Voorhoede","Met affordance principes worden design systems gemakkelijker te gebruiken en flexibeler. Ontdek hoe je hier makkelijker applicaties mee bouwt.",{"url":148},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1716545063-linkedin-blog-7.jpg","Affordance in Design System Componenten",false,{"url":152,"alt":104,"width":153,"height":154},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1716533178-2024-voorhoede-blog-affordance-table-1.svg",581,594,"2024-05-27T09:00:00.000+02:00",[157],{"name":158,"lastName":159,"slug":160,"image":161},"Sjoerd","Beentjes","sjoerd",{"url":162,"alt":104,"width":163,"height":164},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534892-sjoerd.jpg",1637,2182,"Laten we een tafel en een stoel als voorbeelden nemen. De primaire affordance (bruikbaarheid) van een tafel is het ondersteunen van items, dankzij het platte, horizontale oppervlak. Op dezelfde manier is de belangrijkste affordance van een stoel het bieden van een zitplaats, gesuggereerd door kenmerken als een platte zitting ondersteund door poten en vaak een rugleuning om de rug van de gebruiker te ondersteunen. Echter, hoewel het niet de primaire affordance is, kun je een tafel ook gebruiken als zitplaats. En een stoel gebruik je ook om op te staan, bijvoorbeeld bij het vervangen van een gloeilamp.  Dit concept staat bekend als \"perceived affordance\" (waargenomen bruikbaarheid).",[167,172,176,180,184,188,193,196,199,202,205,208,211,214],{"__typename":168,"id":169,"title":170,"body":171},"TextSectionRecord","HnyrlE6ETLCmVa_m5bAF2Q","","\u003Cp>Deze principes worden veel toegepast in user interface en user experience (UI\u002FUX) design, maar je gebruikt ze ook om de developer experience (DX) te verbeteren. In dit artikel beschrijven we hoe deze concepten onmisbaar zijn bij het ontwikkelen van componenten voor \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fnl\u002Fservices\u002Fdesign-system\u002F\" title=\"service pagina over design system\">design systems\u003C\u002Fa>.\u003C\u002Fp>",{"__typename":168,"id":173,"title":174,"body":175},"DP2-C9VjSKepiir656SXyQ","Affordance in UI\u002FUX Design","\u003Cp>Het concept \"affordance\", geïntroduceerd door James J. Gibson en later aangepast voor UI\u002FUX-ontwerp door Don Norman, verwijst naar de kwaliteiten of eigenschappen van een object die de mogelijke toepassingen definiëren of duidelijk maken hoe het kan of moet worden gebruikt. Terwijl Gibson zich richtte op de verbonden eigenschappen van een object, benadrukte Norman het belang van \"perceived affordances\" in ontwerp. Dat zijn de kwaliteiten die suggereren hoe een object mogelijk gebruikt wordt op basis van de interpretatie en eerdere ervaringen van een gebruiker. Het laat zien wat gebruikers denken dat ze met het object kunnen doen, wat niet altijd overeenkomt met hoe het gebruik bedoeld is.\u003C\u002Fp>",{"__typename":168,"id":177,"title":178,"body":179},"dmcre1KXTuSH9rscrjTHig","Affordance toepassen op Front-End Componenten","\u003Cp>Een uitdaging bij design system componenten is de onzekerheid rond de implementatie en de verwachtingen van ontwikkelaars. Begrijpen wat ontwikkelaars verwachten, leidt tot betere acceptatie en tevredenheid.\u003C\u002Fp>\n\u003Ch3>Vaststellen van grenzen\u003C\u002Fh3>\n\u003Cp>Bij het ontwerpen van componenten is het belangrijk om duidelijke grenzen te stellen rond het bedoelde gebruik:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>Identificeer primaire use cases en interacties\u003C\u002Fli>\n  \u003Cli>Specificeer beperkingen en limieten\u003C\u002Fli>\n  \u003Cli>Documenteer deze affordances en beperkingen duidelijk\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Developers zien misschien extra bruikbaarheid naast de primaire affordances. In plaats van dit te negeren, overweeg het volgende:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>Sluit dit aan bij de doelen en principes van het design system?\u003C\u002Fli>\n  \u003Cli>Is dit een randgeval of een veelvoorkomende use case?\u003C\u002Fli>\n  \u003Cli>Zal dit de integriteit of bruikbaarheid van de component beïnvloeden?\u003C\u002Fli>\n  \u003Cli>Kan dit worden ondersteund zonder de primaire use case te compliceren?\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Het beantwoorden van deze vragen helpt om je componenten robuust en veelzijdig te houden.\u003C\u002Fp>\n\u003Ch3>Grenzen toepassen\u003C\u002Fh3>\n\u003Cp>Na het vaststellen van grenzen, pas je ze toe in de code:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>Bied configuratie-opties voor primaire en veelvoorkomende affordances.\u003C\u002Fli>\n  \u003Cli>Gebruik duidelijke, logische namen voor props, methoden en events.\u003C\u002Fli>\n  \u003Cli>Geef validatiewaarschuwingen voor onjuist gebruik.\u003C\u002Fli>\n  \u003Cli>Documenteer correct gebruik met codevoorbeelden en benadruk anti-patronen.\u003C\u002Fli>\n  \u003Cli>Werk samen met ontwikkelaars om onbedoeld gebruik aan te pakken.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Pas deze strategieën toe op je front-end stack om ontwikkelaars te sturen naar de beste werkwijze, terwijl je de nodige flexibiliteit toestaat.\u003C\u002Fp>",{"__typename":168,"id":181,"title":182,"body":183},"fHT-wmSJQOatgY4Y_zD1lQ","Best practices voor het toepassen van affordances","\u003Ch3>Houd het simpel: gebruik HTML als voorbeeld\u003C\u002Fh3>\n\u003Cp>Denk bij het toepassen van componenten uit een design system aan de bekendheid van ontwikkelaars met standaard HTML. Door te voldoen aan \u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FPrinciple_of_least_astonishment\" target=\"_blank\" rel=\"noopener\">the principle of least astonishment\u003C\u002Fa>, zorg je ervoor dat componenten zich gedragen als native HTML-elementen, waardoor ze intuïtief en gemakkelijk te gebruiken zijn.\u003C\u002Fp>\n\u003Cp>Sta je componenten toe om standaard HTML-attributen als props te accepteren. Bijvoorbeeld, een aangepaste knop moet de attributen en events ondersteunen die een native knop zou afhandelen, gebruikmakend van de bestaande HTML-kennis van ontwikkelaars. Een goed voorbeeld hiervan is hoe webcomponenten\u003Ca href=\"https:\u002F\u002Fweb.dev\u002Farticles\u002Fcustom-elements-v1#extending_elements\" target=\"_blank\" rel=\"noopener\"> bestaande native elementen kunnen uitbreiden\u003C\u002Fa> voor aanpassing.\u003C\u002Fp>\n\u003Cp>Het is slim om componenten te ontwerpen op een manier waarop ze onderliggende componenten als geneste elementen kunnen accepteren. Bijvoorbeeld, een lijstcomponent zou onderliggende elementen moeten kunnen verwerken, zoals een HTML \u003Ccode><ul>\u003C\u002Fcode>, \u003Ccode><li>\u003C\u002Fcode> elementen bevat. Op dezelfde manier, bij het bouwen van een keuzelijst, zou het onderliggende componenten moeten kunnen accepteren, net zoals een HTML \u003Ccode><select>\u003C\u002Fcode>, \u003Ccode><option>\u003C\u002Fcode> elementen bevat. Deze benadering weerspiegelt de natuurlijke samenstelling van HTML.\u003C\u002Fp>\n\u003Cp>Dit zijn slechts enkele voorbeelden van hoe je componenten kunt ontwerpen. Het volgen van toepassingen zoals deze vermindert de leercurve, waardoor componenten ontwikkelaarvriendelijker en gemakkelijker toe te passen zijn.\u003C\u002Fp>\n\u003Ch3>Test vroeg met implementatie\u003C\u002Fh3>\n\u003Cp>Test je componenten vroeg in real-world implementaties. Dit geeft waardevolle feedback, helpt affordances te valideren, vangt randgevallen af, verfijnt de API en identificeert toegankelijkheidsproblemen.\u003C\u002Fp>\n\u003Cp>Werk samen met een pilot team van ontwikkelaars, bied bètareleases aan, stel geïsoleerde testomgevingen op en stel duidelijke feedbackkanalen in. Itereren op basis van real-world feedback zorgt ervoor dat componenten robuust, flexibel en ontwikkelaarvriendelijk zijn.\u003C\u002Fp>",{"__typename":168,"id":185,"title":186,"body":187},"XxMZHDXoQliWPicrEKryxA","Voorbeelden van Affordance in Front-End Componenten","\u003Cp>De volgende voorbeelden zijn enkele use cases die we tegenkwamen tijdens de ontwikkeling van componenten libraries voor klanten. Deze voorbeelden zijn gebouwd met React, maar kunnen net zo goed worden toegepast in webcomponenten of andere frameworks, zoals Vue of Angular.\u003C\u002Fp>\n\u003Ch3>HTML-elementen uitbreiden\u003C\u002Fh3>\n\u003Cp>Stel dat we een “Button” component hebben. Dit component heeft drie varianten en kan twee maten hebben. De code voor deze component ziet er nu zo uit:\u003C\u002Fp>",{"__typename":189,"id":190,"language":191,"body":192},"CodeBlockRecord","eDBrHlr2TA-veN5Bw1LJwg","javascript","import { type PropsWithChildren } from 'react';\n\ninterface ButtonProps {\n  variant?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'default' | 'large';\n}\n\nexport const Button = ({\n  variant = 'primary',\n  size = 'default',\n  children,\n}: PropsWithChildren\u003CButtonProps>) => {\n  return (\n    \u003Cbutton className={`button--variant-${variant} button--size-${size}`}>\n      {children}\n    \u003C\u002Fbutton>\n  );\n};\n\n\u002F\u002F Implementation\nexport const Page = () => (\n  \u003CButton\n    \u002F\u002F this will not work\n    aria-controls=\"[id]\"\n  >\n    Click me!\n  \u003C\u002FButton>\n);\n",{"__typename":168,"id":194,"title":170,"body":195},"RZZGqebZTpO3xUT_4YtoHg","\u003Cp>Ziet er goed uit, toch? Nu vraagt een ontwikkelaar die dit component implementeert hoe hij een \u003Ccode>aria-controls\u003C\u002Fcode> attribuut eraan toevoegt voor een toegankelijkheidsprobleem dat hij heeft. We kunnen dat specifieke attribuut toevoegen aan de lijst van toegestane props, maar aangezien hij de volgende dag terug kan komen met een nieuw attribuut dat we missen, moeten we hem waarschijnlijk wat meer flexibiliteit geven:\u003C\u002Fp>",{"__typename":189,"id":197,"language":191,"body":198},"eFnfVojeStiyq_hpuvnqDg","import { ComponentProps, forwardRef } from 'react';\n\ninterface ButtonProps extends ComponentProps\u003C'button'> {\n  variant?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'default' | 'large';\n}\n\nexport const Button = forwardRef\u003CHTMLButtonElement, ButtonProps>(\n  ({ variant = 'primary', size = 'default', children, ...rest }, ref) => {\n    return (\n      \u003Cbutton\n        ref={ref}\n        className={`button--variant-${variant} button--size-${size}`}\n        {...rest}\n      >\n        {children}\n      \u003C\u002Fbutton>\n    );\n  }\n);\n\n\u002F\u002F Implementation\nexport const Page = () => (\n  \u003CButton\n    \u002F\u002F this will work!\n    aria-controls=\"[id]\"\n  >\n    Click me!\n  \u003C\u002FButton>\n);\n",{"__typename":168,"id":200,"title":170,"body":201},"RJNHFb6STtqqLUrSY4qZ8g","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Twee dingen zijn hier toegevoegd:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\u003Cspan style=\"font-weight: 400;\">Het component accepteert nu alle attributen die een button element kan ontvangen, doordat we \u003Ccode>extends ComponentProps<'button'>\u003C\u002Fcode> gebruiken\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan style=\"font-weight: 400;\">Met \u003Ccode>forwardRef\u003C\u002Fcode> krijgt degene die het implementeert toegang tot de onderliggende gerenderde button DOM node\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Col>\u003C\u002Fol>\n\u003Ch3>Een aantal belangrijke voordelen hiervan:\u003C\u002Fh3>\n\u003Cul>\n  \u003Cli>\u003Cstrong style=\"letter-spacing: 0px;\">Toegankelijkheid\u003C\u002Fstrong>\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;\">: Gemakkelijk aria-attributen en andere toegankelijkheidseigenschappen toevoegen.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>Bekendheid\u003C\u002Fstrong>: Spiegelt de standaard button API, gebruikmakend van bestaande HTML-kennis en verbeterde component affordances.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>Flexibiliteit\u003C\u002Fstrong>: Vermijd het anticiperen op elke use case in de props van de component.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>Eenvoud\u003C\u002Fstrong>: Houd de props-interface van de component gefocust op kernzaken zoals variant en grootte, terwijl nog steeds uitgebreide functionaliteit wordt geboden via standaard HTML-attributen.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Het gebruik van \u003Ccode>forwardRef\u003C\u002Fcode> biedt toegang tot de onderliggende button DOM node, nuttig voor integraties van derden, programmatische focus of het meten van afmetingen.\u003C\u002Fp>\n\u003Cp>Door dit patroon consistent door de componenten library te gebruiken, bieden we een voorspelbare developer expierience. Deze benadering verbetert de bruikbaarheid van componenten, moedigt naleving van best practices aan en vermindert de leercurve van het gebruik van de library.\u003C\u002Fp>\n\u003Ch3>Ruimte voor experimentatie\u003C\u002Fh3>\n\u003Cp>Card componenten zie je vaak terug in componenten libraries. Dit is een mogelijke toepassing:\u003C\u002Fp>",{"__typename":189,"id":203,"language":191,"body":204},"Y_Kpf-aMTFOl-5FU5UPPMw","import type { MouseEventHandler, PropsWithChildren } from 'react';\n\ninterface CardProps {\n  title: string;\n  body: string;\n  actionTitle: string;\n  onActionClick: MouseEventHandler\u003CHTMLButtonElement>;\n}\n\nexport const Card = ({\n  title,\n  body,\n  actionTitle,\n  onActionClick,\n}: PropsWithChildren\u003CCardProps>) => {\n  return (\n    \u003Carticle className=\"card\">\n      \u003Cheader className=\"card__header\">\n        \u003Ch2>{title}\u003C\u002Fh2>\n      \u003C\u002Fheader>\n      \u003Cdiv className=\"card__body\">\n        \u003Cp>{body}\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cfooter className=\"card__footer\">\n        \u003Cbutton onClick={onActionClick}>{actionTitle}\u003C\u002Fbutton>\n      \u003C\u002Ffooter>\n    \u003C\u002Farticle>\n  );\n};\n\n\u002F\u002F Implementation\nexport const Page = () => (\n  \u003CCard\n    title=\"Axolotl\"\n    body=\"The axolotl is a paedomorphic salamander closely related to the tiger salamander.\"\n    actionTitle=\"Learn more\"\n    onActionClick={() =>\n      (window.location.href = 'https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FAxolotl')\n    }\n  \u002F>\n);\n",{"__typename":168,"id":206,"title":170,"body":207},"UOgWDUsrTpmhbwnzMYfFmQ","\u003Cp>Hoewel deze implementatie stabiel en functioneel is voor veel gevallen, kan het enkele beperkingen hebben:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\u003Cstrong>Onveranderlijke structuur:\u003C\u002Fstrong> Het component definieert de titel enkel als een h2 en het lichaam als een p element.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>Beperkte interactiviteit\u003C\u002Fstrong>: De footer is beperkt tot een enkele knop met een vooraf gedefinieerde actie.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>We kunnen het Card-component herstructureren om flexibelere eigenschappen te accepteren:\u003C\u002Fp>",{"__typename":189,"id":209,"language":191,"body":210},"POcJu0YkSwyYh7L5UyYIiw","import type { PropsWithChildren, ReactNode } from 'react';\n\ninterface CardProps {\n  header: ReactNode;\n  body: ReactNode;\n  footer: ReactNode;\n}\n\nexport const Card = ({\n  header,\n  body,\n  footer,\n}: PropsWithChildren\u003CCardProps>) => {\n  return (\n    \u003Carticle className=\"card\">\n      \u003Cheader className=\"card__header\">{header}\u003C\u002Fheader>\n      \u003Cdiv className=\"card__body\">{body}\u003C\u002Fdiv>\n      \u003Cfooter className=\"card__footer\">{footer}\u003C\u002Ffooter>\n    \u003C\u002Farticle>\n  );\n};\n\n\u002F\u002F Implementation\nexport const Page = () => (\n  \u003CCard\n    header={\u003Ch2>Axolotl\u003C\u002Fh2>}\n    body={\n      \u003Cp>\n        The axolotl is a paedomorphic salamander closely related to the{' '}\n        \u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FTiger_salamander\">\n          tiger salamander\n        \u003C\u002Fa>\n        .\n      \u003C\u002Fp>\n    }\n    footer={\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FAxolotl\">Learn more\u003C\u002Fa>}\n  \u002F>\n);\n",{"__typename":168,"id":212,"title":170,"body":213},"LapN_PzsSBu7Rg5l1qJ-hA","\u003Cp>De flexibele benadering biedt verschillende voordelen:\u003C\u002Fp>\n\u003Col>\n  \u003Cli>De aanpasbare header maakt het gebruik van elk kopniveau (h1, h2, enz.) of aangepaste componenten mogelijk, evenals het opnemen van links of andere interactieve elementen.\u003C\u002Fli>\n  \u003Cli>De body-inhoud kan uitgebreid en gevarieerd zijn, omdat het elke JSX accepteert, waardoor het toevoegen van uitgebreide tekst, afbeeldingen en andere HTML-elementen mogelijk is. Deze setup maakt het ook mogelijk om gemakkelijk te integreren met een CMS voor dynamische inhoud.\u003C\u002Fli>\n  \u003Cli>De footer ondersteunt meerdere acties door knoppen, links of interactieve elementen toe te staan en de mogelijkheid om elke eventlistener eraan toe te voegen.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Door deze meer flexibele patronen consequent toe te passen in componenten, krijgen ontwikkelaars meer vrijheid, wat resulteert in minder weerstand en betere acceptatie.\u003C\u002Fp>",{"__typename":168,"id":215,"title":216,"body":217},"C1I3J5FoQs6gyoux1C_FVQ","Conclusie","\u003Cp>Het implementeren van affordance principes in design system componenten is cruciaal voor het creëren van intuïtieve en flexibele gebruikersinterfaces. Duidelijke grenzen, doordacht component ontwerp en testen in de echte wereld zorgen ervoor dat componenten veelzijdig zijn en hun primaire functionaliteit behouden.\u003C\u002Fp>\n\u003Cp>Het aanmoedigen van experimenten en het regelmatig verkrijgen van feedback helpt bij het creëren van een betere ontwikkelomgeving en onderhoudbare code. Door gebruik te maken van affordance principes, worden design systems gemakkelijker te gebruiken en flexibeler, waardoor het eenvoudiger wordt voor ontwikkelaars om webapplicaties te bouwen.\u003C\u002Fp>",[219],{"title":220,"body":221,"links":222,"mailchimpValue":170,"mailchimpName":170,"mailchimpId":170,"formType":230,"contactPerson":231},"Hulp nodig met jouw design system?","\u003Cp>Ontdek wat wij voor je kunnen doen voor jouw digitale product.\u003C\u002Fp>\n",[223],{"__typename":224,"id":225,"title":226,"link":227},"InternalLinkRecord","135155041","Lees meer over onze service",{"__typename":228,"slug":229},"ServiceRecord","design-system","none",{"name":232,"lastName":170,"jobTitle":233,"image":234},"Jasper","CTO, Co-founder",{"url":235,"alt":104,"width":236,"height":237},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,[239,246,253],{"slug":240,"title":241,"date":242,"authors":243},"kick-start-design-system-design-inventory-workshop","Kick-start jouw Design System met een Design Inventory Workshop","2021-09-16T02:00:00.000+02:00",[244],{"name":232,"image":245},{"url":235,"alt":104,"width":236,"height":237},{"slug":247,"title":248,"date":249,"authors":250},"kiezen-framework-design-system-componenten","Hoe kies je een framework voor design system componenten","2022-12-12T01:00:00.000+01:00",[251],{"name":232,"image":252},{"url":235,"alt":104,"width":236,"height":237},{"slug":254,"title":255,"date":256,"authors":257},"design-system-bouwen-react-webcomponenten","Een Design System bouwen met React Webcomponenten","2023-06-19T02:00:00.000+02:00",[258,260],{"name":232,"image":259},{"url":235,"alt":104,"width":236,"height":237},{"name":158,"image":261},{"url":162,"alt":104,"width":163,"height":164},[263],{"id":264,"title":265,"slug":266,"blogPosts":267},"JBiZUe8mQVujxlNVR5gx8Q","Design Systems","design-systems",[268,275,282],{"slug":269,"title":270,"date":271,"authors":272},"toegankelijkheid-in-design-systems","Toegankelijkheid in Design Systems","2025-06-17T14:15:56.000+02:00",[273],{"name":158,"image":274},{"url":162,"alt":104,"width":163,"height":164},{"slug":276,"title":277,"date":278,"authors":279},"design-system-op-maat-of-kant-en-klaar","Design System: op maat of kant-en-klaar?","2024-11-19T13:16:02.759+01:00",[280],{"name":232,"image":281},{"url":235,"alt":104,"width":236,"height":237},{"slug":283,"title":284,"date":285,"authors":286},"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",[287],{"name":288,"image":289},"Wessel",{"url":290,"alt":288,"width":291,"height":292},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1721035942-wessel.jpg",2135,2868,1776256147726]