Hero Section - Project Case Study
Skeleton
The main objective was to create a unique and distinctive 3D model for wireless headphones, followed by developing their promotional webpage using design and animation software to create ads and interactive sections within it. Elements such as an X-ray to display internal parts and the Model Viewer for a 3D visualization with hotspots highlighting the outstanding features of the earbuds were incorporated.
Project Date
-
Date
10/09/2023
-
Type
Promotional Website
-
Role
Graphic Designer, Front-End Developer, Motion Graphic Designer and Video Editor
-
Team Members
Brayan Hortua
TECHNOLOGIES USED
Research and Project Overview
Challenge
The challenge involved designing a promotional website for the new wireless headphones from the Skeleton brand, with a focus on creating graphic and interactive elements to capture the audience's attention and generate interest in the earbuds.
Brainstorming and Research
Initially, exhaustive research was conducted for the initial sketches of the 3D model, integrating key features such as noise cancellation and long-lasting battery life. Trending designs like Apple's AirPods Pro were used as references, along with other similar sources of inspiration.
Process
With this sophisticated and modern approach, progress was made in developing the internal and external parts of the earbuds, as well as in searching for assets and textures to achieve a realistic and sophisticated look. Additionally, a review of the GSAP library documentation was done to determine which animations best suited the main goal of the website.
Solution
Using tools like Cinema 4D and After Effects, a detailed and realistic 3D model was created, along with animations that reinforced the promotional message. In terms of web development, HTML, CSS, and JavaScript were used, leveraging the power of the GSAP library for dynamic animations and eye-catching visual effects, such as scroll-triggered animations, providing an immersive and smooth experience for users. The implementation included functionality for the Model Viewer that allowed hovering over each part of the headphones to display relevant information, as well as an interactive slider that showed X-ray and normal versions when moved.
