Designer Silverlight

One of the things that I’m fascinated with is trying to deconstruct the motion design in Windows Phone 7. I actually came to software design out of multimedia production so I’ve always loved animations in UI design. At some point, I hope to do a series of posts overall on motion design in Windows Phone 7. Actually, I really want to do a talk about Windows Phone 7 motion design at MIX 11. Take note, powers that be.

Anyway, the first step is to get some solid video of the WP7 motion so that I can look at it closely. After 3 cameras and testing a couple different lenses, I got what I think is pretty decent video. Eventually, I’d like to pair these with the XAML necessary to recreate them, but for now I hope it helps someone.

Also, now that I’ve got this process down, if you want video of a particular animation, let me know and I’ll make it happen. Make sure you tell me exactly how to get the animation you want or I might focus on the wrong thing.

E-Mail

Animations: List Item-to-detail animation
Download higher resolution video

Video of e-mail program in Windows Phone 7 from Matthias Shapiro on Vimeo.

Marketplace

Animations: dynamic Button animation, Panorama animation, List Item-to-detail animation
Download higher resolution video

Video of Marketplace App in Windows Phone 7 for motion study from Matthias Shapiro on Vimeo.

Messaging

Animations: List Item-to-Detail animation, cascading list item swivel (in and out), main screen selection animation
Download higher resolution video

Video of Messaging Motion in Windows Phone 7 for motion study from Matthias Shapiro on Vimeo.

Main Screen

Animations: Main screen-to-application list animation
Download higher resolution video

Untitled from Matthias Shapiro on Vimeo.

Main Screen

Animations: Main Screen load in animation, application selected animation
Download higher resolution video

Opening and closing applications in Windows Phone 7 (for motion study) from Matthias Shapiro on Vimeo.

In case you haven’t heard this before, this blog is basically a collection of things that I’ve learned and will almost certainly forget unless I write them down. Kind of a public short-term memory overflow. I’ve been working on motion flow design a lot and there is no better way to do motion flow design than to look at cool interface animations.

I’m also doing some Windows Phone 7 design and I want to have a place to go to look at as many videos of Windows Phone 7 in action to figure out how to design an application motion flow that fits with the rest of the app. Watch these videos carefully and notice that pretty much everyone is doing something slightly different for their motion flow. The same navigation concepts are in place, but the motion flow is different for many of the apps.

So… here is my collection of Windows Phone 7 videos and animations.

From Engadget:

(more at the Engadget post)

E-mail on the Windows Mobile 7 Phone

The AP application (by Archetype) (skip to 3:30)

Seesmic for Windows Phone 7 (skip to 6:40)

The marketplace hub

That’s all for me for now… I’ll try to update this with more examples later

Sorry for my prolonged absence. My world has been taken over somewhat due to my recent moonlighting as an information visualization guy. Take note that I’m not by any means an “expert”… I’m more of an “enthusiast”, but that was apparently enough to get me on CNN.

I’ll post more videos as I create them for CNN. I’m also working on a chapter for an O’Reilly book called “Beautiful Visualization” that will be out next year.

All of this to say that I’m trying to get back into the WPF/Silverlight blogging as soon as I can, but I need to clear my plate a little first.

Thought I’d take a moment and toss up the WPF/Wiimote video that we submitted to the MIX 08 Show Off competition: