Ontwerpen in het AI-tijdperk.

From Making to Meaning

Ontwerpen in het AI-tijdperk.

Tot nu toe...

• UX
• User Research
• Sitemaps
• User Flows
• Wireframes
• Interaction Design
• Design Patterns
• Motion Fundamentals

Wat deden we vooral in voorbije lessen?

1. Observeren
2. Analyseren
3. Evalueren

Waarom werkt iets? Waarom werkt iets niet? Welke keuzes ondersteunen gebruikers?

Belangrijkste les tot nu toe:

Kritisch denken!

❌ Niet:

Ik vind dit mooi.

✅ Maar:

Waarom is dit een goede oplossing?

Making to meaning

— Design in het AI-tijdperk.

The new kid on the block.

Wat gebeurt er als AI ontwerpen kan genereren?

• Wireframes
• Interfaces
• Content
• Websites
• Motion
• 3D
• ...

"Vervangt AI de designer?"

Wat denken jullie?

Nee, maar de rol zal wel veranderen.

AI helpt bij het maken, designers beoordelen en geven richting.

From making...

• Schermen maken
• Layouts maken
• Content maken
• Variaties maken

to meaning.

• Ervaringen ontwerpen
  • Richting geven
  • Beslissingen nemen
• Kwaliteit beoordelen

Rol van een designer?

— Design in het AI-tijdperk.

Designers krijgen een nieuwe rol.

Designer als:

• Director
• Curator
• System Thinker

Nieuwe rol:

Designer = Director?

Niet:

"Ik maak alles handmatig

Maar:

Ik stuur het proces

Nieuwe rol:

Designer = Curator?

• Wat houden we?
• Wat verwerpen we?
• Waarom?

Nieuwe rol:

Designer = Systems Thinker?

• Flows
• Gedrag
• Feedback
• Ervaring
• Ecosystemen

AI en webdesign?

— Design in het AI-tijdperk.

Als AI een website maakt...

Wie ontwerpt de ervaring?

AI verandert tools, niet principes

UX blijft UX

Interaction blijft interaction

Motion blijft motion

UX blijft belangrijk

• Gebruiksvriendelijkheid
• Hiërarchie
• Feedback
• Toegankelijkheid

AI lost dit niet automatisch op.

Motion blijft belangrijk

• Timing
• Easing
• Feedback
• State changes

AI genereert beweging.

Designers geven betekenis.

AI als collaborator?

Niet:

"Maak mijn ontwerp"

Maar:

"Denk mee"

Mogelijke AI-vragen aan een LLM:

• Wat ontbreekt?
• Welke risico's zie je?
• Welke flows zijn mogelijk?
• Welke edge cases bestaan er?
• ...

AI & MCP's?

— Design in het AI-tijdperk.

Van Chatbot...

Naar Agent

MCP

Model Context Protocol

Denk aan...

USB-C voor AI

Eén open standaard om AI-assistenten aan je data en tools te koppelen, in plaats van maatwerk per koppeling.

Zonder MCP

• Losse tools
• Losse context
• Losse informatie

Met MCP

AI begrijpt meer context

• Bestanden
• Design systems
• Documenten
• Websites
• Andere tools

Waarom belangrijk?

AI evolueert ook! Van een "simpele" LLM naar een generatieve tool. Het koppelen van verschillende AI-tools geeft eindeloos meer mogelijkheden.

Van: "AI → antwoord", naar: "AI → begrijpt ontwerpcontext"

Demo

— Design in het AI-tijdperk.

Demo

AI als Design Partner

Case:

Student Event Platform

"Maak een student event platform."

1. Probleem analyseren
2. (Persona opstellen)
3. User Flow maken
4. Interface voorstellen
5. Microinteractions bedenken
6. Zelf kritiek leveren

Stap 1

Probleem analyseren

• Wie?
• Waarom?
• Welke noden?

Stap 2

User Flows

• Registreren
• Ontdekken
• Tickets
• Agenda

Stap 3

Interface Concepts

• Structuur
• Inhoud
• Navigatie

Stap 4

Microinteractions

• Hover
• Feedback
• Success states
• Empty states

Stap 5

UX Critique

• Waar kan motion het begrip verbeteren?

AI bekritiseert eigen voorstel

Belangrijk inzicht

AI produceert mogelijkheden, niet het enige juiste antwoord.

Klas
opdracht

— Design in het AI-tijdperk.

Workshop

Build an AI Workflow

Opdracht

Kies een case

• Festival
• Museum
• Learning Platform
• NGO
• Portfolio

Ontwerp een workflow

Denk na over

Welke taken kunnen door AI?

Welke taken moeten door mensen?

AI-Assisted UX Critique

Upload een wireframe

Laat AI feedback geven

Categoriseer

✅ Bruikbaar

⚠️ Twijfelachtig

❌ Verkeerd

Waarom?

Kritisch inzicht blijft essentieel

Recap

— Design in het AI-tijdperk.

Grootste les vandaag

AI verhoogt de waarde van:

• Oordeel
• Strategie
• Context
• Kritisch denken

Reflectie

Wat deed AI beter?

Wat deed jij beter?

Als AI alles kan genereren... Wat maakt jou dan nog een designer?

Text

Assignment

AI-Assisted Design Process

Documenteer:

• Probleem
• Workflow
• Prompts
• Output
• Beslissingen
• Reflectie