CD spin product

cdspin

Exploring skeuomorphism: how much of a real object's interaction language survives when you translate it to a screen?

I wanted to push skeuomorphism and have it be intuitive instead of having text instructions. How much information can you intuitively gather from just visual and audio cues instead of text?

TYPEPersonal Exploration
TOOLSReact, Three.js, Blender
FOCUSSkeuomorphic Interaction Design

Context

Skeuomorphism is a design style where digital elements mimic the appearance, texture, and functionality of physical objects.

SKEUOMORPHIC VS. TODAY

Skeuomorphic vs. modern UI comparison

But how much interaction language can be translated through digital representations of a real-life object? I wanted to push skeuomorphism and have it be intuitive instead of having text instructions.

I used a CD jewel case as my base for this exploration.

BRAINSTORMING

Brainstorming sketches

Lessons Learned

Skeuomorphic design has its strengths and weaknesses.

PROS

  • For those who have used the item before, it's familiar and intuitive. No UI is needed to explain that you can open a CD case; you just know.
  • It looks cool. Spinning CD...
  • It allows for a sense of discovery and interaction as if it were a real object.

CONS

  • CDs and their cases are barely surviving into the new generation. What happens when users don't have the same familiarity?
  • Very complex in nature due to physical imitations.
  • The closer they are to the true item, the fewer use cases they have in the digital world. Details and nuance must be lost to optimize for the modern world.
  • Is slower and more heavy due to how complex it is.

End Product

Skeuomorphism has been quietly fading for years. The save icon is still a floppy disk, but a whole generation has never held one and wouldn't miss it. I wanted to sit with this kind of design once more, before the physical references disappear for good.

For my exploration, I was able to translate most interaction language through just skeuomorphic design, motion design, and a navigation dot bar.

TRY IT

Play with the demo

Try the skeuomorphic interactions yourself: spin it, flip it, and hear a click when it's opened.

Launch demo →

Want to know more about the process? Reach out to me at !