Landing Page
Timeline
Summary
Date: November 2024
Client: Fanshawe College (School Assignment)
Team members:
- Milana Gabbassova – Motion Designer, Graphic Designer, Web Developer
Tools used:
- Web Development: HTML, CSS (SASS), JavaScript, GSAP, Model Viewer
- Design & Branding: Adobe Photoshop, Adobe Illustrator, Adobe XD
- 3D & Motion: Adobe After Effects, Adobe Premiere Pro, Cinema 4D, Blender
Overview
LoveBeats was a creatively challenging solo project that blended product design, 3D modeling, motion graphics, and full web development into one cohesive digital experience. As part of the assignment, I had complete creative freedom to imagine and build a pair of earbuds from scratch — including branding, product design, and a functional promotional website.
I started by developing the concept and sketching the design of the earbuds. After finalizing the look, I modeled the earbuds in Cinema 4D and created a custom animation scene using Blender for the promotional video. I designed a bold and playful identity with a heart-shaped form and named the earbuds LoveBeats, complete with a custom logo.
The website was both designed and developed by me, with careful attention to usability, visual consistency, and interactive functionality. It features rich GSAP animations, a scroll-triggered video reveal, a movable 3D model, an X-ray slider, and interactive color-switching options that showcase the different design variations. This project tested both my creative and technical skills, and was one of the most rewarding experiences of my academic journey.
Goal
- Create a unique and engaging product website that highlights both design and functionality
- Strengthen my skills in combining web development with 3D assets and motion graphics
- Learn how to manage a full solo project from ideation to launch, while meeting all deadlines
- Explore new tools and workflows (such as Blender and scroll-triggered animation techniques)
- Deliver a responsive and interactive user experience that mimics real-world product campaigns
Process
Project Planning
- Outlined tasks and created a rough timeline for design, 3D modeling, video, and development
- Used Notion to track deliverables and progress
Concept & Sketching
- Brainstormed design direction and created hand-drawn sketches for the earbud shape and concept
3D Modeling & Animation
- Built the 3D model in Cinema 4D
- Designed and rendered the animation scene using Blender for more dynamic visuals
Branding & Web Design
- Designed a playful logo and visual identity
- Chose typography and colors to match the modern, tech-savvy vibe
- Created wireframes and UI mockups in Adobe XD
Development & Functionality
- Structured all HTML pages and styled them with SCSS for flexibility
- Implemented scroll-based animations and content reveals using GSAP
- Integrated the 3D model onto the page for interactive display
- Added an X-ray slider to view internal earbud components
- Built color-switching functionality using JavaScript arrays
Testing & Deployment
- Ensured full responsiveness and cross-browser compatibility
- Launched the site using GitHub Pages
Role
As the sole creator of the LoveBeats project, I acted as the graphic designer, motion designer, web designer, and web developer. I conceptualized and designed the earbuds, modeled them in 3D using Cinema 4D, and created a full promotional video scene in Blender. I also handled all aspects of the website – from design mockups to frontend development.
In the development phase, I wrote clean, responsive HTML and SCSS code, added scroll-triggered animations with GSAP, and integrated a working 3D model and X-ray slider. I ensured that the entire website was interactive, engaging, and mobile-friendly – successfully blending creative design with modern frontend techniques.
Key Features
- Responsive Design – Fully optimized for mobile, tablet, and desktop screens
- Interactive 3D Model – Users can view and manipulate a 3D model of the earbuds directly on the site
- X-ray View – Slider reveals the internal components of the earbuds in a layered view
- GSAP Scroll Animations – Smooth content transitions and section reveals triggered by scroll
- Scroll-Activated Video – Video animation appears and plays dynamically as the user scrolls
- Color Selection Functionality – Users can click on color swatches to preview the earbuds in different color variants
Challenges & Solutions
Adapting to New Design Tools and Workflows
Challenge: As a developer, working with 3D modeling and product design was outside my comfort zone. I had to learn new software like Blender and think like a designer.
Solution: I embraced the challenge as an opportunity to grow, watching tutorials, experimenting with new techniques, and gradually enjoying the creative control it gave me. It also helped me bridge the gap between form and function – aligning visual design with frontend logic.
Time Management Across Multiple Projects
Challenge: The term was packed with deliverables from other courses, making it difficult to stay focused and allocate time effectively.
Solution: I planned each step using Notion and Asana, and broke down the workload into daily tasks. This kept me on track with all deadlines and reduced last-minute stress.
Results
LoveBeats gave me a hands-on opportunity to simulate a real product launch - combining branding, 3D product design, and frontend development. It helped me improve my technical workflow as a developer, especially in integrating animations and 3D elements into the frontend.
I deepened my understanding of interactive user experience, learned to independently manage a complex project, and strengthened my ability to blend creativity with development. The final result is a fully interactive product site that merges storytelling, technology, and design - showcasing how a web developer can bring a product vision to life from sketch to screen.
Explore Other Projects
