Project 03
Interactive Web Experience
Design and build a creative interactive web-based experience that uses motion, interaction, and visual design to communicate a mood, story, or concept.
Overview
This is not a traditional website with pages and navigation. Think of it as a digital artwork, ecard, playable SVG scene, responsive poem, or short interactive moment that blends design, motion, media, and user input.
Considerations
- Start with a clear creative concept, mood, message, or idea.
- Use motion as a primary design tool, not as decoration.
- Make interactions purposeful so users discover, reveal, trigger, remix, or navigate the experience.
- Use layout, scale, spacing, color, contrast, and pacing intentionally.
- If using audio or video, make it user-initiated and avoid autoplaying sound.
Milestones
Step 1
Concept
Define the mood, story, or idea and collect references for motion and interaction.
Step 2
Prototype
Build a small proof of concept for the main motion and at least one interaction.
Step 3
Compose
Refine the visual composition, timing, responsiveness, and interaction flow.
Step 4
Document
Publish the project and write the README with concept, interactions, animation approach, and assets.
Project Requirements
Creative concept
- Define a clear mood, message, or idea that drives the design decisions.
Motion and animation
- Make animation central to the experience.
- Use CSS transitions, keyframes, transforms, GSAP timelines, or a thoughtful combination.
Interaction
- Include at least two distinct interactive behaviors that respond to user input.
- Interaction may include hover, click, drag, scroll, keyboard input, device motion, or pointer movement.
Responsive design
- Adapt the experience across different screen sizes.
- It does not need to look identical everywhere, but it should feel intentional on mobile and desktop.
Code and documentation
- Use clean, organized HTML, CSS, and JavaScript.
- Use readable structure, consistent naming, and comments where helpful.
- Include a README.md describing the concept, interactions, animation approach, and external assets.
Starter Kit
Start with the right files.
An interactive experience starter with HTML, CSS, JavaScript, motion hooks, and reduced-motion guardrails.
Submission Guidelines
- Organize files in a dedicated folder with clear naming conventions.
- Include HTML, external CSS, and JavaScript files as needed.
- Host the project on GitHub Pages.
- Submit the GitHub repository link and public site URL.
Before You Submit
- I can explain the goal of the project and the design choices I made.
- I checked the work in the browser, not only in the editor.
- I verified links, images, responsive behavior, and accessibility basics.
- I committed the final version and can provide the repository or public URL when required.
Grading Criteria
- Concept and creative clarity.
- Motion design quality, including purpose, pacing, and polish.
- Meaningful interaction design that invites exploration.
- Technical execution with HTML, CSS, JavaScript, and optional GSAP.
- Visual cohesion across design elements.
- Performance and accessibility awareness.
Rubric
Use these quality levels to understand what stronger work looks like without tying the brief to a specific point scale.
Concept
- Strong
- The experience communicates a clear mood, message, or idea through design decisions.
- Meets
- A concept is present and mostly understandable.
- Needs Work
- The experience feels like disconnected effects without a clear idea.
Motion
- Strong
- Animation has purpose, pacing, rhythm, and supports the concept.
- Meets
- Motion is central to the experience and mostly supports the idea.
- Needs Work
- Motion is missing, random, distracting, or only decorative.
Interaction
- Strong
- Interactions feel intentional and invite discovery or participation.
- Meets
- At least two interactions are present and understandable.
- Needs Work
- Interactions are missing, confusing, or do not respond reliably.
Technical execution
- Strong
- HTML, CSS, JavaScript, and optional GSAP are organized, readable, and stable.
- Meets
- The experience works with some rough edges in code or behavior.
- Needs Work
- Code or behavior is fragile, incomplete, or difficult to follow.
Cohesion and accessibility
- Strong
- Visual choices, performance, and accessibility awareness support a polished experience.
- Meets
- The experience is cohesive with some usability or polish gaps.
- Needs Work
- The experience has major visual, performance, or accessibility issues.
Example Models
Use these low-fidelity models to calibrate what stronger, acceptable, and unfinished work can look like.
Strong Example
Interactive animated scene
A focused web experience where motion, interaction, and visual design all support one clear idea.
Possible Structure
- single immersive scene with a clear title
- click interaction that changes the scene state
- hover or pointer movement that reveals secondary detail
- motion using transform and opacity
- reduced-motion handling for animation-heavy behavior
What To Notice
- The interaction reveals meaning instead of acting like decoration.
- Animation timing feels intentional and supports the mood.
- The project is small enough to be polished.
Meets Expectations
Animated ecard or poem
A working interactive piece with a clear concept, though the motion and responsiveness need more polish.
Possible Structure
- introductory message or prompt
- two user-triggered interactions
- CSS keyframes or transitions
- JavaScript class toggles
- basic mobile adjustments
What To Notice
- The concept is understandable and the interactions work.
- The piece would improve with better pacing and fewer competing effects.
- The responsive state should be tested beyond one screen size.
Needs Work
Random effects board
A collection of animations and buttons that lacks a clear concept or stable interaction model.
Possible Structure
- multiple unrelated animations
- buttons with unclear labels
- effects that trigger unexpectedly
- no reduced-motion consideration
- layout that overlaps at small sizes
What To Notice
- The project needs one central idea before adding more effects.
- Interaction should be predictable and explainable.
- Motion should support a user experience goal.