Case Study Page

project thumbnail

astro

Designing an interactive & promotional website for astro's wireless earbuds

Year

2023

Type

School Project

Role

Solo Developer

Project goal

The goal of the project was to create an effective single-page promotional website for the 3D earbuds that we had modelled earlier during the semester. We had to incorporate certain features into the website such as frame-by-frame scrub animation using Canvas and GreenSock, a model viewer with hotspots, and an interactive x-ray slider.

Technologies Used

I used Adobe XD for the wireframe, Cinema 4D for the earbuds model, animation, and image rendering, HTML and SASS for the website structure and styling, and JavaScript for the website functionality.

How it was created

The first step of the process was generating all of the assets that I would need for the website. I started with creating a simple animation of the earbuds and case using Cinema 4D. My idea for the animation was to start zoomed in to the "astro" word mark on the earbuds case and then slowly zoom out to show the full case. Next, I wanted to have it rotate to show all of its sides and then have the case open to reveal the earbuds. For the final part of the sequence, I animated the earbuds coming out of the case, slightly rotated them to show them from a different angle, and then had one of the earbuds come forward until it filled the entire screen to focus on the "astro" word mark on the earbud. I rendered this animation as an image sequence so that I could create the frame-by-frame scrub animation with Canvas and GreenSock on the website.

Since the purpose of the website was going to be to promote the earbuds, I would need lots of images to use. Using Cinema 4D, I rendered several images of the earbuds (including x-ray), case, components, and so on. Another asset that was important was the actual 3D model of the earbuds. I exported the model and imported it into model viewer; this allowed me to add the hotspots to the model and generate the code that I would need to display the interactive 3D model on the website. Now that I had all the assets that I needed, I used Adobe XD to create the wireframe. Once I finalized the design and layout, I converted the wireframe into the actual website using HTML and SASS, and added the functionality using JavaScript.

project imageproject imageproject imageproject imageproject imageproject image

Thanks for checking out my case study.

Here are some of my other projects & work.

If you like what you see and think I'd be a good fit for your next project, I'd love to chat!