Apple iPod Graveermachine

Van 2004 tot 2006 werkte ik bij Apple als UI-engineer voor hun online store. Onderdeel van mijn functie was het prototypen van concepten die een interactieve sprankeling aan de website konden toevoegen.

Het project: Personaliseer je iPod

Een van deze projecten was een verbetering van de pagina "Personaliseer je iPod", waar klanten twee regels tekst konden opgeven om op de achterkant van de iPod die ze bestelden te laten graveren.

In het oorspronkelijke ontwerp bood de pagina geen interactie buiten een eenvoudig formulier. Ik heb dit uitgebreid door de volgende elementen toe te voegen:

• Een draaibare iPod;
• Een live "gegraveerde" preview van de tekst van de klant;
• Een markering van eventuele wijzigingen in de verzendtijden.

Technische uitvoering

Ik animeerde de iPod door een reeks JPEGs te doorlopen met behulp van JavaScript. De gravering werd gemaakt met ImageMagick; deze software nam de tekst van de gebruiker en genereerde een "gegraveerd" beeld dat over de achterkant van de iPod werd geplaatst. De markering van de verzendtijd werd gerealiseerd door CSS-klassen te wisselen om de achtergrondkleur te veranderen, in de stijl van een klassieke gele vervaging (yellow fade).

Reflectie

Er is een oude, werkende demo beschikbaar als je dit zelf wilt uitproberen.

Hoewel we tegenwoordig overduidelijk veel betere manieren hebben om dit soort zaken aan te pakken, leken deze oplossingen in 2005, met de toenmalige beperkte browsertechnologie, een beetje magisch.

***

Als je vragen, opmerkingen of correcties voor dit bericht hebt, stuur ze dan per e-mail naar mij.