Designing in the AI era.

From Making to Meaning

Designing in the AI era.

So far...

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

What did we mainly do in previous lessons?

1. Observe
2. Analyze
3. Evaluate

Why does something work? Why does something not work? Which choices support users?

Most important lesson so far:

Critical thinking!

❌ Not:

I think this is nice.

✅ But:

Why is this a good solution?

Making to meaning

— Design in the AI era.

The new kid on the block.

What happens when AI can generate designs?

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

"Does AI replace the designer?"

What do you think?

No, but the role will change.

AI helps with making, designers judge and provide direction.

From making...

• Making screens
• Making layouts
• Making content
• Making variations

to meaning.

• Designing experiences
  • Providing direction
  • Making decisions
• Judging quality

Role of a designer?

— Design in the AI era.

Designers get a new role.

Designer as:

• Director
• Curator
• System Thinker

New role:

Designer = Director?

Not:

"I make everything manually"

But:

I steer the process

New role:

Designer = Curator?

• What do we keep?
• What do we reject?
• Why?

New role:

Designer = Systems Thinker?

• Flows
• Behavior
• Feedback
• Experience
• Ecosystems

AI and web design?

— Design in the AI era.

If AI makes a website...

Who designs the experience?

AI changes tools, not principles

UX remains UX

Interaction remains interaction

Motion remains motion

UX remains important

• Usability
• Hierarchy
• Feedback
• Accessibility

AI does not solve this automatically.

Motion remains important

• Timing
• Easing
• Feedback
• State changes

AI generates movement.

Designers give meaning.

AI as collaborator?

Not:

"Make my design"

But:

"Think along"

Possible AI questions to an LLM:

• What is missing?
• What risks do you see?
• Which flows are possible?
• Which edge cases exist?
• ...

AI & MCP's?

— Design in the AI era.

From Chatbot...

To Agent

MCP

Model Context Protocol

Think of...

USB-C for AI

One open standard to connect AI assistants to your data and tools, instead of custom work per connection.

Without MCP

• Separate tools
• Separate context
• Separate information

With MCP

AI understands more context

• Files
• Design systems
• Documents
• Websites
• Other tools

Why important?

AI is evolving too! From a "simple" LLM to a generative tool. Linking different AI tools provides endlessly more possibilities.

From: "AI → answer", to: "AI → understands design context"

Demo

— Design in the AI era.

Demo

AI as Design Partner

Case:

Student Event Platform

"Make a student event platform."

1. Analyze problem
2. (Create persona)
3. Create User Flow
4. Propose interface
5. Devise microinteractions
6. Provide self-critique

Step 1

Analyze problem

• Who?
• Why?
• What needs?

Step 2

User Flows

• Register
• Discover
• Tickets
• Agenda

Step 3

Interface Concepts

• Structure
• Content
• Navigation

Step 4

Microinteractions

• Hover
• Feedback
• Success states
• Empty states

Step 5

UX Critique

• Where can motion improve understanding?

AI criticizes its own proposal

Important insight

AI produces possibilities, not the only correct answer.

Class
assignment

— Design in the AI era.

Workshop

Build an AI Workflow

Assignment

Choose a case

• Festival
• Museum
• Learning Platform
• NGO
• Portfolio

Design a workflow

Think about

Which tasks can be done by AI?

Which tasks must be done by humans?

AI-Assisted UX Critique

Upload a wireframe

Let AI provide feedback

Categorize

✅ Usable

⚠️ Questionable

❌ Wrong

Why?

Critical insight remains essential

Recap

— Design in the AI era.

Biggest lesson today

AI increases the value of:

• Judgment
• Strategy
• Context
• Critical thinking

Reflection

What did AI do better?

What did you do better?

If AI can generate everything... What makes you a designer then?

Text

Assignment

AI-Assisted Design Process

Document:

• Problem
• Workflow
• Prompts
• Output
• Decisions
• Reflection