Apple iPod engraver

This is a home for the things that Dunstan makes

Dec 12, 2019
Apple iPod engraver

I spent 2004–2006 working at Apple as a UI engineer for their online store. Part of my job was to prototype concepts that would add some interactive sparkle to the site.
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.

If you have questions, comments, or corrections for this post, please email them to me.

Apple iPod engraver

This is a home for the things that Dunstan makes

Dec 12, 2019
Apple iPod engraver

I spent 2004–2006 working at Apple as a UI engineer for their online store. Part of my job was to prototype concepts that would add some interactive sparkle to the site.
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.

If you have questions, comments, or corrections for this post, please email them to me.