iPod engraver — Apple

While working as a UI engineer at Apple (2004–2006), I regularly prototyped concepts that would add some interactive sparkle to their online store.

One such project improved the “Personalize your iPod” page, where customers could submit two lines of text to be engraved on the back of the iPod they were ordering.

As originally designed the page offered no interaction beyond a plain form. I added a rotatable iPod, a live “engraved” preview of the customer’s text, and a highlight of any change in shipping times.

I animated the iPod by cycling through a series of JPEGs using JavaScript. The engraving was created using imagemagick, which took the user’s text and returned an “engraved” image to be overlaid on the rear of the iPod. The shipping highlight was achieved by switching CSS classes to change the background color, in the style of a classic yellow fade.

There’s an old working demo if you’d like to try it yourself.

We obviously have much better ways of doing such things today, but in 2005, with limited browser technology, those solutions seemed a little bit magical.