Project Overview
This is a personal project for an interactive website designed to teach After Effects concepts in a more engaging and approachable way. As a beginner, the interface can feel overwhelming. There are too many functions, and it’s often unclear where to start or how different icons and tools relate to each other.
Through the use of vibrant illustrations and interactive UI, this project aims to simplify the learning experience and reduce the initial barrier to entry.
Interaction & Concept
This demo focuses on a chapter about keyframe types. Instead of presenting information as static text, I designed an experience inspired by browsing through folders and documents. Users can select a folder to explore different keyframe types, and each “document” slides out to reveal its content.
A bookmarking feature allows users to pin important information, reinforcing a sense of personal learning and navigation.
Motion Approach
The motion design emphasizes clarity and responsiveness. I used clean transitions with subtle bounce to create a smooth, intuitive interaction that feels both lightweight and engaging, while supporting usability.