Stride

Overview

For this project, I created a promotional web page for Stride, a conceptual brand of wireless sport earbuds I created. I designed the Stride logo and earbuds and modeled them in Cinema 4D. This project included branding, motion design, 3D modeling, and web development.

Using the 3D model, I created an X-ray view of the internal components and animations of its functionality. These features were embedded into an interactive 3D AR slider and vertical scrolling animations to make the website engaging and immersive.

Problems

1. Brand Creation: Stride logo and earbuds design needed to be sleek, sporty, and modern. I went through multiple iterations to design for the target audience.

2. 3D Model Detailing: Modeling the earbuds and case with detailed realistic proportions in Cinema 4D was tough. I referenced real earbuds and cases.

3. AR Integration: I used Google’s Model Viewer to embed the AR object with interactive hotspots, dynamically adding images and descriptions for key features.

4. Animations: Animations like the dynamic hotspots and scroll-driven effects required the use of GSAP.

5. Responsive Design: I used media queries and CSS Grid to design a webpage that looked and worked the same across all devices.

Research

I researched brands like AirPods, Jaybird, and Beats to help design the Stride earbuds. I looked at their branding, design elements, and promotional strategies.

This research inspired Stride’s bold athletic branding with a clean modern design that appeals to active users.

Process

1. Branding & Concept: I designed the Stride logo and the earbuds and charging case design.

2. 3D Modeling & Animation: I modeled and textured the earbuds and charging case in Cinema 4D. I did an X-ray view to show the internal components and animations to show functionality.

3. AR Integration: Exported 3D models as AR objects with interactive hotspots, dynamically adding content using JavaScript to display feature details on the promotional page.

4. Web Development: I built a responsive promotional page with custom animations using GSAP. Features:

• X-ray Slider: Implemented an interactive slider to reveal the internal components of the earbuds.

• AR Object with Hotspots: Integrated an augmented reality feature with clickable hotspots to highlight key product features.

• Vertical Scrolling Animations: Used image sequences to create smooth, scroll-driven animations for an engaging user experience.

The Stride project launched a fresh, sporty, and innovative brand with the following deliverables:

• Responsive Website: Developed with dynamic animations and interactivity.

• AR Object with Hotspots: Showcased key features with interactive elements.

• High-Quality Assets: Included images and media to enhance visual appeal.

• Custom Animations: Implemented X-ray slider and scroll-driven effects for engagement.

Reflection

Together all these pieces make a nice promotional page that shows off the Stride brand. The Stride project was a great opportunity to combine branding, 3D modeling, and web development in one project. Key takeaways: 

• I enhanced my skills in Cinema 4D, creating detailed 3D models and animations.

• I improved my proficiency with GSAP for advanced animations and interactive features.

• I developed a stronger understanding of balancing branding and functionality.

This project challenged me and I’m happy with the result, a nice and professional promotional page that represents the Stride brand.