Hoe gebruikt een (senior) product en UX designer AI nou echt? Wat is de beste tool voor elke situatie? Het zijn vragen die designers en bedrijven mij steeds vaker stellen.
Het is enorm lastig is om hype en realiteit uit elkaar te houden. Is die post over AI op social media overdreven? Is het ‘click bait’? Of heeft de designer die het schrijft een punt? Lastig!
Vandaar dit artikel. We gaan het hebben over AI binnen product design en hoe ik, een senior product en UX designer, AI ècht gebruik tijdens mijn ‘day-to-day’. Dus geen social media hype, maar echt een kijkje in de design-keuken.
Onlangs sprak ik met een potentiële klant in de wereld van serious games. Hij vertelde heel trots dat bepaalde ondersteunende afbeeldingen uit zijn nieuwste game met behulp van AI waren gemaakt.
Kort daarna stelde hij mij deze vraag: “Wat vind je van het gebruik van AI voor design? En hoe gebruik je het zelf?”
Hij was niet de eerste. Deze vraag krijg ik steeds vaker te horen in gesprek met ondernemers of van designers tijdens een UX coaching-afspraak. Kortom; het patroon is duidelijk.
In het kort is mijn antwoord dat ik veel gebruik maak van AI, maar gek genoeg alleen ‘rondom het designproces’. Het designproces zelf doe ik zelf, omdat daar geen AI tools beschikbaar voor zijn die goed genoeg zijn.
Als product designer gebruik je AI in eerste instantie om beter werk te leveren. Je proces versnellen komt daarna pas. Dat is in het kort hoe ik tegen AI voor design aankijk.
Het klinkt misschien vreemd als je online mensen alleen maar hoort over hoeveel sneller ze zijn door AI (of hoe niemand straks nog een designer nodig heeft), maar ik zal je uitleggen wat ik bedoel.
Het verschil tussen ‘goed’ en ‘wow dit is super’ in product en UX design zit hem in jou als designer, je ervaring en je kwaliteiten. Wil je die unieke positie weggeven? Dat lijkt mij niet wijs!
In een AI-gedreven wereld, waar de ‘middelmaat’ elke dag breder wordt, zou een zeer hoge lat voor kwaliteit en design juist je uitgangspunt moeten zijn. Je moet willen opvallen met product design dat je klanten helpt. Het gebruik van AI moet je die kant op helpen.
In de praktijk betekent dit het volgende.
Als product designer gebruik AI-tools ‘onder de motorkap’ voor subtiele details in visuals, repetitief werk en als ‘assistent’.
Het idee is om AI in te zetten op een manier dat ik er iets van leer en er als designer beter van wordt. Ik heb de controle over mijn (AI) gereedschapskist; niet andersom. AI versterkt waar ik al goed in ben. Ik doe niet aan ‘vibe coding’ of ‘vibe design’ waarbij je maar wat doet en hoopt op een goede ‘output’. Dat laat ik over aan social media influencers.
Mindset speelt hier een enorme rol. Vroeger betekende iets nieuws leren of problemen oplossen het kopen van boeken, het volgen van cursussen en het lezen van documentatie. Tegenwoordig maak je een screenshot, zet je het in Claude, brainstorm je samen en kom je tot een oplossing. Het is geweldig dat zoiets mogelijk is!
AI is ‘garbage in, garbage out’. Je hebt designkennis nodig om elke vorm van design-gerelateerde AI-output te valideren. Zo niet, dan zijn we gewoon aan het gokken en ‘viben.’ Daarom moet je ondanks alles nog gewoon een opleiding UX of een cursus gaan doen. Je hebt dat nodig!
Op het gebied van designtheorie is bijvoorbeeld kleurentheorie, gestallt en meer van dit soort ‘klassieke theorie’ gewoon enorm belangrijk. Bezoekers van je website (en je klanten) voelen wanneer iets het gewoon net niet is.
Als je ‘AI-native’ aan de gang gaat zonder deze achtergrond, mis je de fundamentele designkennis die ik eerder noemde. Je zou kunnen zeggen dat je dat niet meer nodig hebt (“AI gaat zo goed worden”), maar ik denk niet dat dit het geval is.
Zoals ik al zei; je moet je AI-output kunnen valideren. Past je output in de grotere user flow, bij de branding van je klant en, misschien wel het belangrijkst van allemaal, bij de algemene designdoelen van je project?
Met het bovenstaande uit de weg, is het tijd om te kijken naar de drie voornaamste plekken binnen mijn product design workflow waar AI een belangrijke rol speelt.
AI gebruiken om herhalend werk rondom data, code en tekst te versnellen is een perfect voorbeeld waar gebruik maken van AI enorm nuttig is.
Grappig genoeg is dit dan weer een voorbeeld waar die ‘eerst leren, daarna snelheid’ visie die ik noemde niet volledig van toepassing is. Maar goed…
Laten we er een voorbeeld bij pakken. Voor één van mijn ‘van-naar’ design projecten heb ik een design vanuit Figma omgezet naar Laravel en TailwindCSS.
Dit deed ik al voordat AI een ding werd en sindsdien is de manier waarop zo’n project verloopt enorm veranderd. De stappen zelf niet zo, maar de tools achter de stappen wel.
Mijn eerste stap is het opzetten van kleuren, lettertypes en een desktop versie van de homepage. Dit was tot voor kort voornamelijk handmatig werk. Kleurcodes overnemen, WOFF2 bestanden klaarzetten en dat soort dingen. Dat doe ik nog steeds, maar dan via een Claude Code en Figma MCP-connectie. Het scheelt veel tijd.
Zodra dat klaar is, gebruik ik de HTML van de homepage als input en werk ik met Claude Code om de juiste lettergrootte, regelafstand en gewicht toe te voegen voor alle breakpoints. AI doet het werk en mijn design-blik controleert alles.
Het bovenstaande gaat dus veel sneller, maar het kritische denkwerk en de ‘pixel-perfectheid’ blijft bij de designer (een mens) achter het toetsenbord.
Voor dit project heb ik een Oostenrijks softwarebedrijf geholpen hun bestaande Figma-design om te zetten naar een HTML en TailwindCSS website. Precies zoals hierboven beschreven, dus.
Dat ‘design oog’ en mijn bestaande kennis van HTML, CSS en JS hielpen hier trouwens enorm. Wanneer ik bijvoorbeeld een probleem ontdekte in de code, kon ik dat als designer meteen oplossen zonder terug te moeten naar het bureau dat het originele design had gemaakt.
Naast mijn UX ervaring heb ik een technische achtergrond. Programmeren (HTML, CSS, JS, PHP) was een vak tijdens mijn studie communicatie en multimedia design. Vooral dat tweede ben ik de laatste tijd flink aan het uitbouwen.
Zoals eerder genoemd, kreeg ik steeds vaker de vraag of ik mijn ontwerpen ook kon bouwen. Om daar een beter antwoord op te kunnen geven, ben ik TailwindCSS gaan leren bovenop mijn al bestaande CSS-kennis.
Dit was nog allemaal net voor de doorbraak van ChatGPT en daarom leerde ik op de ouderwetse manier; documentatie lezen en YouTube-video’s kijken. Niks mis mee, maar het duurde een stuk langer dan hoe ik dat vandaag aanpak.
Toen ik begon met projecten in React en Laravel, begon ik mijn gesprekken met Claude eerst met een stuk uitleg en theorie. Dus niet meteen een oplossing, maar eerst leren. Dat helpt met het valideren van de output; als je snapt waar je naar kijkt, kun je makkelijker kritisch zijn. Dat levert uiteindelijk veel beter werk op dan wanneer je gewoon blind om ‘output’ vraagt.
Sindsdien heb ik onder andere React en Laravel mij eigen gemaakt. In de praktijk merk ik dat ik door al deze gesprekken al voordat ik aan de gang ga een oplossingsrichting kan bedenken. Het heeft het leerproces dus enorm veel sneller gemaakt.
Naast dat ik product designer ben, ben ik altijd een ‘bouwer’ geweest. Veel van mijn favoriete games draaien om strategie of zijn city builders, waar het optimaliseren van allerlei processen (en het blussen van brandjes) enorm belangrijk is.
Van dat optimaliseren word ik erg blij en dat merk ik ook qua hoe ik mijn werk aanpak.
Ik heb bijvoorbeeld de workflow rondom nieuwe afleveringen van mijn Design Table Podcast grotendeels geautomatiseerd. Wanneer een nieuwe aflevering uitkomt, komt automatisch een nieuwe pagina in de Webflow CMS te staan. Ook krijg ik een melding in Slack met daarin links naar de aflevering op YouTube, Apple Podcasts en Spotify.
Het klinkt simpel, maar achter de schermen is het een flinke mix van Claude, Zapier en Webflow. AI is hier enorm nuttig en het scheelt mij zeker een uur per week aan handmatig werk.
Qua automatisering helpt AI ook met content. Zoals ik al eerder zei; niet met snelheid als het belangrijkste voordeel. Het moet namelijk geen troep worden.
AI-gegenereerde content (“AI slop”) is super makkelijk te herkennen wanneer het gewoon copy-paste online wordt gezet. Let maar eens op de herhalende zinstructuren en je ziet het meteen.
Het enige wat ik doe, is Claude (samen met een enorme set richtlijnen) naar de podcast-tekst laten kijken en in Typefully een aantal ‘drafts’ te laten maken. Deze controleer ik stuk voor stuk om ze vervolgens aan te scherpen en in te plannen voor het LinkedIn-account van Design Table Podcast.
Artikelen zoals deze blijven menselijk werk; ik vind het te belangrijk om dat aan AI tools over te laten.
AI gebruiken ter ondersteuning van je product design werk is heel logisch. Ik gebruik het zelf steeds meer, maar niet overal. Er zijn onderdelen van mijn werk waar ik AI bewust niet of heel beperkt gebruik.
Een mooi voorbeeld daarvan is ‘user onboarding’. Dat zijn de stappen die je doorloopt wanneer je voor het eerst gebruik maakt van een product. Een goede onboarding is cruciaal. Zeker wanneer de connectie tussen nieuwe klant en je product nog erg pril is. Eén verkeerde vraag of een onduidelijk scherm en je nieuwe gebruikers vertrekken naar een concurrent. De ervaring rondom de onboarding moet dus perfect zijn.
Dat doe je door indruk te maken en ze snel naar een moment van activatie te brengen. Dat betekent kritisch nadenken over wat je (niet) toont en waarom. Ook moet je nadenken over ‘edge cases’ en onverwachte momenten. Hier maak jij als designer het verschil.
Voor Wondle, een startup in de automotive-industrie, heb ik een uitgebreid designproject afgerond. Het project bestond uit branding, het ontwerpen van de website en een stuk product design.
Het ontwerp van de website is grotendeels met de hand gemaakt en strategisch uitgedacht. De nadruk ligt hier op ‘grotendeels’, omdat veel van de eerder genoemde toepassingen hier ook van toepassing zijn.
De visual van de autoschade is bijvoorbeeld met behulp van AI gemaakt via Visual Electric. Het enige wat je hoeft te doen, is een bestaande afbeelding uploaden, beschrijven wat je wilt en eventueel wat bijschaven.
Tools zoals ChatGPT, Midjourney en Visual Electric besparen hier veel tijd. Een paar jaar terug moest je stockfoto-websites afspeuren in de hoop dat je iets passends tegen zou komen. Dat of met de hand in Photoshop iets in elkaar knutselen.
Nu kun je via deze nieuwe tools alles maken wat je maar wilt. Je moet alleen wel weten wat je wilt maken. Daarvoor heb je je eigen designer-brein nodig.
Het interessante is dat je voor beide voorbeelden best AI kan gebruiken. Veel social media guru’s claimen dat dat prima kan (of binnenkort kan). Je moet je alleen afvragen of je dat wel wilt. Wil je kritieke onderdelen van je bedrijf volledig en middelmatig laten genereren? Ik weet het antwoord daarop wel.
Social media staat er vol mee; ‘dit is mijn design stack en hierom is hij beter dan de jouwe’. Ik ben er geen fan van, omdat het veel lezers onzeker maakt. Het is ook vaak enorm over-de-top.
Je kunt beter een niveau uitzoomen en voor elk type van taak één tool kiezen. Daarnaast probeer ik principieel zo lean mogelijk te blijven. Ik heb liever minder apps die meer doen dan meerdere kleine apps die allemaal iets doen. Dat wordt gewoon te druk (en te duur, zeker als freelance designer).
Als eerste de ‘daily driver’. Voor mij is dat Claude. Ik gebruik het om nieuwe frameworks te leren, bij het bouwen (Claude Code) en om te brainstormen. Sinds kort gebruik ik het ook binnen de Zapier automatisering die ik al noemde. Dat en nog veel meer.
Alternatieven hiervoor zijn uiteraard ChatGPT, maar ook Gemini. Welke van de drie je kiest, maakt niet zoveel uit. Probeer echter wel bij ééntje te blijven. Ik zie veel designers die met elke nieuwe versie van tool wisselen en dat is echt zonde van je tijd.
Tool twee gaat over visuals. Ondanks dat ik het leuk vindt om iconen en visuals met de hand te tekenen, heb je soms iets gegenereerds nodig. Voor mij werkt Visual Electric heel goed, maar je kunt daarvoor ook ChatGPT of Midjourney kiezen.
De keuze tussen deze tools is lastig. Ze hebben allemaal hun eigen stijl en zijn daarom voor de ene taak beter geschikt dan voor de andere. Dus waar ik voor de ‘daily driver’ suggereerde om bij één tool te blijven, is dat hier minder streng het geval.
Dan nu; fspraken en notities. Wat dat betreft ben ik gek op Granola. Het schrijft je afspraken uit, vat deze samen en laat je vragen stellen over je afspraken. Het is super handig voor kick-off meetings en brainstorm sessies. Tot nu toe werkt het behoorlijk goed, maar vooral voor mijn Engelstalige afspraken. Nederlands werkt ook wel, maar met wat omwegen.
Wat betreft mijn code editor, zit ik nog steeds in Visual Studio Code. Dat klinkt misschien gek wanneer bijna heel de tech-wereld overstapt naar Cursor, maar het verschil valt reuze mee. Wat mij betreft geldt hier ook weer de ‘kies één tool en blijf daarbij’ regel.
Als bonus wil ik toch Zapier nog even noemen. Het is niet per se een AI-tool, maar zorgt wel dat allerlei processen aan elkaar te knopen zijn. Vaak zit Claude (Code) daar dan ook nog tussen.
In de eerder genoemde podcast-automatisering verbindt Zapier Transistor met Claude, Webflow en Slack. Het maakt een Webflow Collection (CMS)-pagina, schrijft een videobeschrijving, verzamelt URL’s per aflevering en meer. Misschien is dit wel de belangrijkste tool uit mijn ‘stack’.
We zijn de afgelopen tien jaar als designers van Photoshop naar Sketch naar Figma gegaan. Nu hebben we allerlei AI-tools en ook die blijven veranderen. Met dat in het achterhoofd blijf ik experimenteren met al het nieuwe wat uitkomt.
Ik ben onder andere van plan om meer te experimenteren met prototyping. De eerste tool die dan naar voren komt is Lovable. Deze tool laat je in enkele prompts een volledig prototype neerzetten. De hype is te groot om te negeren.
De enige reden dat ik Lovable nog niet heb gebruikt is omdat ik er nog geen duidelijke use case voor heb gehad. Ik ben over het algemeen in Figma voor simpele prototypes gewoon sneller en gerichter. Voor mijn type van product design-klanten zijn hele uitgebreide prototypes niet nodig en daarmee een tool als Lovable ook niet per se.
Naast Lovable ga ik misschien ook Midjourney of een andere ‘image generator’ proberen om te zien waar het beter werkt dan Visual Electric.
Als laatste wil ik het nog even hebben over Figma MCP en Claude Code. De verbinding tussen deze twee tools zorgt ervoor dat de overgang van design naar productie (of andersom) soepeler en sneller kan gaan verlopen. Dat klinkt erg interessant en heeft potentie voor een flinke tijdwinst en verbetering van de code-kwaliteit.
Het is echter nog wat vroeg en het werkt nog niet super. Zowel de code als je Figma-bestand moet perfect afgestemd zijn qua variabelen, lagen en structuur. De praktijk leert ons dat dat zelden het geval is. Maar potentie heeft het zeker.
Werken aan UI is een groot deel van de dag-tot-dag van een product designer. Dan is het vreemd dat ik Figma of andere design tools nog niet heb genoemd, toch?
Dat doe ik met opzet. Waarom? AI tools voor UI (snap je het nog?) zijn gewoon nog niet goed genoeg. Ze produceren generieke ‘middelmaat’ en spaghetti code. Het kost mij meer tijd om het op te schonen dan het vanaf nul te ontwerpen.
Daarnaast zet ik mijn bestanden slim op, waardoor de ‘vanaf nul’-fase van mijn projecten over het algemeen toch al korter duren. De eventuele tijdswinst voor AI is hierdoor minimaal (als ‘ie er al is).
Deze tools zullen waarschijnlijk verbeteren, wat betekent dat ik ook zal moeten verbeteren (ik hou van een uitdaging). Maar ik betwijfel of het ooit goed genoeg zal worden om dit deel van het designvak volledig te vervangen.
Over vervangen gesproken…
Nee, AI gaat UX en product designers niet vervangen. Het zal invloed hebben op wat het werk inhoudt, maar die verandering hoort er ook gewoon bij.
In de afgelopen tien jaar hebben meerdere grote veranderingen plaats gevonden voor designers (van Photoshop naar Sketch naar Figma) en de opkomst van AI is daar niet anders in.
Wat ik bijvoorbeeld merk, is dat AI de instap voor nieuwe designers makkelijker maakt. Het is nog nooit zo makkelijk geweest om te leren.
Daarnaast werk ik steeds vaker met ondernemers en product owners die mij AI-gegenereerde mockups en wireframes geven als startpunt van een samenwerking. Nog een mooi voorbeeld van die makkelijkere instap.
En zoals ik in dit artikel al noemde, helpt AI mij om beter designwerk te doen wat ik vervolgens in code aan kan leveren. Dat was jaren terug niet het geval en laat nogmaals zien hoe AI het design-vak aanpast maar dus niet vervangt.
Met hoe snel AI zich ontwikkelt, zal dit artikel waarschijnlijk degene zijn die ik het meest moet bijwerken. En dat is prima! Het is leuk om te experimenteren met nieuwe tools en er vervolgens over te schrijven.
Dat is eigenlijk mijn belangrijkste boodschap; als je nieuwsgierig bent en open staat om dingen te testen, is AI helemaal niet eng. Lang niet elk AI-experiment zal nuttig blijken te zijn, maar de paar die dat wel zijn, zijn dan ook echt handig voor je design-werk.
Laat AI-influencers (en hun clickbait content) je niet ontmoedigen. Ze weten vaak niet waar ze het over hebben. Ontwikkelingen rondom AI zijn veelal ondersteunend en interessant voor het UX vak. Omarm het dus!
Hallo! Ik ben een (freelance) senior UX designer. Meer weten? Lees hieronder verder.
