Apple — Interactive Retail Demo

The Apple In-Store Demos are intended to give the viewer a high-impact experience that is both engaging and informative. These demos combine both motion graphics, and an interactive experience to convey the important aspects of each product. Each demo is created, optimized, and played back on it's respective machine, in a retail environments.

To attract a consumers attention in the busy retail environment, the demo begins with a full screen motion graphics loop that was designed to draw users into the demo. The navigation bar at the top of the screen allows the user to access any section of the demo at any time.

The demo features a series of transition movies that provide a "spatial context" to the navigation. When the user click on a topic, the graphic elements currently on screen slide off, and the new sections graphics slide on.

The sub navigation consists of  a series of clear "beads". When the users cursor passes over the bead, it glows blue, and content is displayed. If the rollover content contains an additional sub-section, the blue bead contains a "+" symbol. When the user clicks on the + bead, it "jumps" off the screen and flys forward to reveal the sub-section.

ARCHIVE WALK-THROUGH OF 'Apple In-store Demo' Transition animation:


ARCHIVE WALK-THROUGH OF 'Apple iMac In-store Demo':

Client: Apple Computer
Project: In-store interactive demos 
Agency: USWeb/CKS

:: View Gallery

Reader Comments (2)

I remember these demos when I worked at CompUSA back in the day. I used to wonder: "who did this" and how was it done?". To this day these demos are part of the reason why I got into motion graphics.

Well, well done!

~Bryan Thomas

August 19, 2009 | Unregistered CommenterBryan Thomas

Hey thanks Bryan, I really appreciate your comments!

September 8, 2009 | Registered CommenterDave Brinda

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
All HTML will be escaped. Hyperlinks will be created for URLs automatically.
« The Bourne Supremacy — Movie Website | Main | A Beautiful Mind — Movie Website »