Portfolio

EARBUDS

The Rock Evolution Earbuds promotional page is a creative blend of tech and design. Cinema 4D was used to craft detailed 3D models and animations of the earbuds and charging case. The website features an X-ray view, giving users a peek inside, and an interactive 3D model. The project followed a clear path, from defining the brand concept and making sketches to creating detailed 3D elements and building the website with HTML, CSS, and Javascript. The Rock Evolution Earbuds cater to music lovers and performers alike, offering a dynamic and immersive experience that mirrors the energy of their favorite tunes.

MY ROLE

  • Back-End
  • Front-End
  • Graphic Designer
  • Motion Designer

LANGUAGES

  • CSS
  • HTML
  • Javascript
  • SASS

PROBLEM

The purpose of this project was to make an earbuds promotional page with creative methods, using a software to create the necessary elements which will used on the website. Those resources are an X-ray where the client would be able to observe the interior aspects, an animation showing the charging case, a 3D model and still images of the earbuds.

SOLUTION

The earphones and case were modelled, sculpted, and animated in Cinema 4D; the materials were then processed in Photoshop and After Effects. Model Viewer was used to generate the 3D Earbuds, and Javascript was used to fill in the hotspots. Furthermore, Sass and Javascript were employed to add the animation and X-ray. At last, GSAP was used to create a more dynamic website, where elements would fade or slide.

PROCESS

1. Define the the concept of the brand, target audience and purposes. 2. Make sketches of logo, case and earbuds. \n3. Create low fidelity wireframes. 4. Build elements on Cinema 4D, edit them on After Effects and Photoshop 5. Create high fidelity wireframes. 6. Create static HTML and CSS 7. Add JS to populate website and add GSAP to make it dynamic.

AUDIENCE

The target audience for Rock Evolution Earbuds is comprised of passionate people who share a profound appreciation for rock music, from fans to musicians. Individuals who need dependable headphones that can match the intensity of their performances and provide the highest level of precision in hearing every note and drumming.

Problem
Solution
Process
Audience

PROBLEM

The purpose of this project was to make an earbuds promotional page with creative methods, using a software to create the necessary elements which will used on the website. Those resources are an X-ray where the client would be able to observe the interior aspects, an animation showing the charging case, a 3D model and still images of the earbuds.

SOLUTION

The earphones and case were modelled, sculpted, and animated in Cinema 4D; the materials were then processed in Photoshop and After Effects. Model Viewer was used to generate the 3D Earbuds, and Javascript was used to fill in the hotspots. Furthermore, Sass and Javascript were employed to add the animation and X-ray. At last, GSAP was used to create a more dynamic website, where elements would fade or slide.

PROCESS

1. Define the the concept of the brand, target audience and purposes. 2. Make sketches of logo, case and earbuds. \n3. Create low fidelity wireframes. 4. Build elements on Cinema 4D, edit them on After Effects and Photoshop 5. Create high fidelity wireframes. 6. Create static HTML and CSS 7. Add JS to populate website and add GSAP to make it dynamic.

AUDIENCE

The target audience for Rock Evolution Earbuds is comprised of passionate people who share a profound appreciation for rock music, from fans to musicians. Individuals who need dependable headphones that can match the intensity of their performances and provide the highest level of precision in hearing every note and drumming.