During my exploration of design trends for website and app interfaces, I became captivated by the concept of skeuomorphism. This design approach involves faithfully replicating real-world objects using design software, striving for the most authentic representation possible.

After recreating a turntable some time ago, I felt it was time to challenge myself and raise the bar. So, I recreated an 80s cassette recorder. With meticulous detail. This also provided a perfect opportunity to use variables in Figma, which typically allows you to create features like light and dark modes for your app or website. I used variables to create three different versions of the radio. This turned out to be quite straightforward once you understand it.

However, I noticed that it wasn’t possible to save effects entirely as variables. In cases where I needed them, I saved them as styles. I did notice that this could hinder consistency. Because a shadow may fall differently in one color mode than in another. And there were quite a few shadows in the design. Therefore, in some cases, I had to hard code. Overall, working with variables saves a considerable amount of time.

For the finishing touches, I used Photoshop. I exported the radios without the screen and radio dial to PNGs. Because I later had to animate them separately to complete the experience.

I made the video in Premiere Pro. There wasn’t much to animate, except for the tune dial on the radio screen and the switch that changes position with each color mode. So I could easily use Premiere Pro for that. I also adjusted the audio to match the different wavelengths. A small detail is that I used different types of noise for the corresponding wavelength. It’s those little details that make it more enjoyable.

With this link to the Figma file, you can get an idea of how I created this design: click here.