GROOVE

Software Used:

Framer, Figma, Spline, Cinema 4D, Adobe After Effects

Duration:

12 Weeks, October - November 2023


Software Used:

Framer, Figma, Spline, Cinema 4D, Redshift, Adobe After Effects

Duration:

12 Weeks, October - November 2023


Background

This project had incredibly open ended guidance: Make something amazing. Pick a seemingly object and make any user interested in it. As someone who has been collecting vinyl records for nearly 10 years, I often think about how little I understand about the technology behind them. So, I decided to make a site that teaches the user about the technology that makes vinyl records work, and how the technology behind it is something incredible and mind blowing.

project definition

This initial outline of the project started in a very different place than where it ended. The original idea was to have the site be the style of a worn, used record sleeve. It was going to be very vibrant and bold.

early Design

My first round of designs followed my original concept shown above. It aims to have that worn down vintage style that so many record sleeves have.

3D work

A significant amount of this project was spent working on 3D assets. The assets were made in Cinema 4D, as well as a few in Spline. The main vinyl record and needle were created in Cinema 4D, but the small pellets and their animations were made in Spline.

early Design

My first round of designs followed my original concept shown above. It aims to have that worn down vintage style that so many record sleeves have.

3D work

A significant amount of this project was spent working on 3D assets. The assets were made in Cinema 4D, as well as a few in Spline. The main vinyl record and needle were created in Cinema 4D, but the small pellets and their animations were made in Spline.

new Design approach

After trying to force this first approach to work, I accepted that this just wan't meant to be for this project. I decided to take on a new approach for the overall design of the project.

figma to framer

As I continued to work on this design, enjoyed where the style was going, but I felt as though the flow of it was not making sense. I decided to spend some more time deciding how this would make more sense for the user. This brought me to the idea of making a site made of only 3 pages, with longer scrolls on each page. Because of their incredible built in scroll animations, I decided to switch the project over from Figma to Framer. While doing so, it also lead me to rethink some of my design choices and give some new styles to parts of the site. This is what brought me to the final design.

Final designs

Below is a sample of the style of the final design, as well as the final prototype and the link to the site. Check it out in the way that sounds best to you!

look for yourself!

TLDR

Download my process document or click through below!

project summary

This project allowed me to grow a lot with my 3D skills. Using spline, which has an interface much more similar to Figma, allowed me to wrap my head around how to model more, and then therefore made jumping to Cinema 4D much easier. Even though some of my initial ideas were not feasible with my skill set, the project taught me a lot about evolving my design further and further both aesthetically, and content wise during the process.

What comes next?

The next step of this site would be to create a tablet and mobile version of the site. With that, there is also the possibility of creating an app that the user can have more special experiences with the vinyl record with the possibility of it being a touch screen. Things like pressure sensitivity and AR could add to this.