Jenifer Quelali's portfolio page

Model

Before developing a website, the earbuds model had to be created and animated to provide assets for the project. After researching various earbuds designs, I settled with a circular earbuds shape with long handles. The case design was simple, a clean circular shaped box with soft pads to hold each earbud. Once the concept was defined, the earbuds were modelled in Cinema4D over the course of three days. Different case colours, a transparent earbud view and an animation of the case opening were rendered using Redshift.

Website - Model Viewer

Once the earbud assets were finalized, the website was developed using HTML, CSS, JavaScript and the Model Viewer API. The Model Viewer API added a dynamic section to the page which allowed users to interact with the earbuds model by rotating, zooming and hovering over hotspots to view information. On mobile devices, where this API was not fully supported or did not perform properly, the hotspots and model were presented as static elements. A static image was also displayed when the model viewer failed to load.

Animation

The animation, initially created in Cinema4D, was edited in After Effects and exported as sequence of images. The scroll-driven animation implemented utilized JavaScript to dynamically load and add those images to the page when the user scrolled, creating an animated sequence driven by scrolling. To optimize the website’s performance, all images were converted to WebP format to reduce their size.

Additional features

Multiple sliders were added to the page to enable more interactivity for users. Features such as colours and reviews were added as cards inside sliders, while the x-ray view of the earbuds model had it’s own dedicated slider. On mobile devices, where the x-ray view wasn’t the most suitable option, a static image was used instead. The contact form also featured animated rockets, which added some fun and engagement for users.