Interactive Media Development
Introduction to Interactive Media & Motion Design
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"?
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
Keywords
👊 User 👊 Action 👊 Reaction 👊 Feedback 👊 Engagement
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
Interactive Media
- User
- Interaction
- Feedback
Motion Design
- Timing
- Movement
- Story
Interaction Design
- Action
- Reaction
- Ease of use
AI
- Assistant
- Accelerator
- Not a replacement
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.