Interactive Design & Development

Advanced course in interactive design and development, focusing on user experience, interface design, and interactive media. Students create sophisticated web applications and interactive experiences using modern frameworks and design methodologies.

Learning Objectives

Upon completion of the course, students will be able to:

Design and develop interactive user interfaces with modern frameworks
Apply UX principles and methodologies to digital products
Build responsive web applications using JavaScript and APIs
Create prototypes and conduct user testing
Implement accessible and performant interactive experiences

Course Format & Grading

The semester combines technical workshops, design critiques, and hands-on projects. Workshops cover JavaScript frameworks, APIs, and interactive design patterns. Projects challenge students to create innovative digital experiences that demonstrate technical mastery and creative thinking.

Grade Distribution

Total Points: 400

80 pts Project 1

90 pts Project 2

100 pts Project 3

80 pts Final Project

50 pts Class Participation

Project Evaluation Criteria

25%

User Experience

Creating intuitive, accessible, and engaging interfaces; applying UX research and testing

25%

Technical Execution

Implementing clean, efficient code; demonstrating mastery of frameworks and tools

25%

Creative Innovation

Developing original concepts; pushing boundaries of interactive design

25%

Process & Iteration

Demonstrating research, prototyping, and refinement through feedback

Projects

Project 1: Interactive Portfolio

3 Weeks

Design and develop an interactive portfolio website showcasing your work with custom animations, transitions, and engaging user experiences.

Learning Objectives

Implement advanced CSS animations and transitions
Create smooth, performant interactions with JavaScript
Design compelling navigation and user flows
Optimize for performance and accessibility

Project 2: Data-Driven Web Application

4 Weeks

Build a functional web application using a JavaScript framework, integrating with external APIs and implementing dynamic data visualization.

Learning Objectives

Work with modern JavaScript frameworks (React, Vue, etc.)
Integrate and manipulate data from external APIs
Implement state management and routing
Create responsive data visualizations

Project 3: Interactive Installation

3 Weeks

Create an interactive digital installation or experience using sensors, APIs, or other input methods beyond traditional mouse and keyboard.

Learning Objectives

Explore alternative input methods and interactions
Work with physical computing or device APIs
Design for non-traditional contexts and spaces
Create immersive, engaging experiences

Final Project: Your Choice

5 Weeks

Propose and develop a significant interactive project that demonstrates mastery of course concepts and pushes your creative and technical boundaries.

Learning Objectives

Synthesize skills learned throughout the semester
Conduct independent research and problem-solving
Create a portfolio-worthy piece
Present and defend design decisions

Resources & Tools

Development Tools

Code Editor: Visual Studio Code or Sublime Text
Version Control: Git and GitHub
Browser DevTools: Chrome, Firefox, or Safari
Package Managers: npm or yarn
Build Tools: Webpack, Vite, or similar

Design & Prototyping Tools

Figma for UI design and prototyping
Adobe Creative Suite (Photoshop, Illustrator, After Effects)
Principle, Framer, or ProtoPie for advanced prototyping
User testing platforms (UserTesting, Maze, etc.)

Frameworks & Libraries

React, Vue.js, or Svelte
GSAP or Anime.js for animations
D3.js or Chart.js for data visualization
Three.js for 3D graphics (optional)