Introduction

— Interactive Media Production

What will we learn?

• Interactive Media
• Motion Design
• Interaction Design
• Figma
• Figma Motion
• Webflow
• GSAP
• AI Workflows
• Designing digital experiences

What comes to mind when you think of "Web Animations" and "Interactive Media"?

WooClap - FBHX0AZ

What are we focusing on?

Not:

• Static web pages
• Buttons
• Screens

But rather:

• Experiences
• Stories
• Interactions
• Emotions
• Behavior

?

Why do you remember some websites and not others?

Interactive media

— Interactive Media Production

What is Interactive Media?

Media that reacts to the user.

Examples?

Examples

• Websites
• Apps
• Games
• Installations
• VR / AR
• Digital displays

Evolution of the web

— Interactive Media Production

Evolution of the web

Web 1.0

• Reading
• Static pages
• Information

Web 2.0

• Social media
• Interaction
• User Generated Content

Today

• Experiences
• Motion
• AI
• Personalization

Evolution of the web

• Static → Dynamic
• Information → Experience
• User → Participant

Motion design

— Interactive Media Production

Why animation?

Without animation

• Abrupt
• Unclear
• Harsh

With animation

• Directs attention
• Provides feedback
• Creates flow
• Strengthens brand experience

Is all animation equal?

Good animation

• Functional
• Subtle
• Purposeful

Bad animation

• Distracting
• Exaggerated
• Slows down

What is Motion Design?

Definition

Design in motion.

Applications

• Transitions
• Navigation
• Storytelling
• Branding
• Feedback

Motion design consists of:

• Timing
• Rhythm
• Movement
• Focus
• Transitions

?

Which animations truly help the user?

Motion is not decoration

Common mistake

"We add animation because it's cool."

What then?

We use animation to communicate something.

Motion helps with:

• Orientation
• Focus
• Feedback
• Storytelling

Interaction design

— Interactive Media Production

Interaction Design

What is it?

• Designing interactions between human and system.
• != Motion Design

Examples

• Clicking
• Scrolling
• Hovering
• Swiping
• Typing

Basic Interaction

User

↓

Action

↓

Reaction

Interaction Basic Principles

• Feedback
• Consistency
• Visibility
• Affordance

Feedback

The system reacts.

Example:

• Hover effect
• Loading indicator

Consistency

Predictable behavior.

Visibility

User understands what is possible.

Affordance

Elements invite action.

What makes a good interaction?

Good interactions

• Clear
• Fast
• Relevant
• Predictable

Bad interactions

• Confusing
• Slow
• Inconsistent

Goal

Thinking as little as possible.

Summary

• Feedback
• Consistency
• Visibility
• Affordance

Web AI-nimations

— Interactive Media Production

AI is changing design

In the past

Designer → does everything themselves

Today

Designer + AI

AI helps with:

• Wireframes
• Research
• Content
• Code
• Animations
• Feedback

Important

AI does not make design decisions.

New skill

Art Direction

What remains important?

Not:

• Knowing every button in a tool

Instead:

• Critical thinking
• Problem solving
• Understanding motion
• Understanding users
• Assessing quality

Core

• 👊 Thinking
• 👊 Designing
• 👊 Evaluating
• 👊 Iterating

Tools

— Interactive Media Production

Toolstack for this course

• Figma
• Figma Motion
• Jitter
• Webflow
• GSAP
• AI

Figma

• UX
• Wireframes
• UI Design

Figma Motion

• Motion prototypes

Jitter

• Motion design
• Storytelling

Webflow

• Building websites

GSAP

• Advanced animations

AI

• Claude
• MCP
• Figma AI

Getting better?

— Interactive Media Production

Inspiration sources

Websites

• Apple
• Stripe
• Linear
• Framer
• Awwwards
• Site Inspire

Pay attention to

• Typography
• Motion
• Scroll behavior
• Storytelling
• Navigation

How to analyze?

UX

Is this clear?

UI

Does this look good?

Motion

Why does this move?

Interaction

What happens when I do something?

Goal

What is this website trying to achieve?

Exercise

Analyze a website

Choose a website you like.

Discuss

• First impression
• Navigation
• Interactions
• Animations
• Strong points
• Areas for improvement

Presentation

2 minutes per group.

Recap

What's next?

— Interactive Media Production

Next Lesson

Experience Design with Figma

Topics

• User Flows
• Wireframes
• Structure
• UX decisions
• AI-assisted ideation

Assignment - Next week

Analyze 3 interactive websites.

Describe for each website:

• Target audience
• Strong interactions
• Notable animations
• What you would improve

Submission

Maximum 5 slides.