electric beach

Christian Schormann

Friday, March 19, 2010

Using SketchFlow to Prototype for Windows Phone

Since we introduced the Blend 4 add-in for Windows Phone at Mix, several people have asked me how to use SketchFlow to work on Windows Phone projects.

In the current Blend 4 beta release, there is no special project template for prototyping of Windows Phone applications. But it is very easy to set up a Silverlight prototype to have the right aspect ratio for phone applications and use this as the base.

This approach is very easy, but there are three important points to keep in mind:

  • You can’t preview the prototype on the emulator, just in a browser
  • You can’t get the Windows Phone styles for high-fidelity prototypes. If you just want to create wire-frames or sketchy prototypes, this is no issue at all
  • You don’t get automatic inertia etc. on controls such as the list box

With these restrictions in mind, here is what you do to set the default size for new screens to match Windows Phone:

  • Start Expression Blend Beta
  • Create a new SketchFlow Silverlight project:
    SFWPNew
  • Once the project is created, select the root element of the start screen:
    SFWPSelectRoot
  • Set the resolution to 480×800 for a portrait prototype, and to 800×480 for landscape:
    SFWPSetSize
  • This is how it looks for landscape:
    SFWP800x480
  • Now, of course, you don’t want to have to do this for every new screen you create. In SketchFlow, you can set the default resolution for new screens by right clicking and selecting “Set as default size”. This will take the resolution of the current screen and make it the default for every new screen created. You can of course always resize manually as well, for example if you want your prototype to contain both portrait and landscape screens:
    SFWPDefaultSize

By the way, you can set a separate and different default size for navigation and composition screens. If you don’t know what the difference is in SketchFlow, just forget that I said that :-)

And finally, the default size settings are accessible in the options dialog in the Tools menu:

SFWPOptions

Once you have set up the default screen size, it is fast and easy to draw out the flow of your application with any number of screens you like.

In many Windows Phone design conversations, there is this idea that the screen of the phone really is just a window on a much larger background content picture. This type of content is really easy to prototype with SketchFlow. Basically, here’s what you do:

  • On a new screen, first create a canvas or grid that is going to become the big huge background
  • Next, resize this screen to match the content size you want. For example, on our default landscape screen, you could make this 800×1920 pixels for four scrollable pages of 480 pixels
  • Add all UI that is constant to all screens, for example a headline on top, a status at the bottom, and maybe a side bar
  • Add content to the large canvas, as desired. Note that sometimes, if the content is paginated and is needed elsewhere as well, it might be a good idea to create a composite screen from it
  • Add visual states and transitions to move the view port over the background
  • Add some behavior to trigger the state changes

This model works of course even better when the background content is not easily paginated…

SFWPScroll

Try it and let me know how it works…

Happy weekend. I’ll be recovering from Mix :-)

posted by cs at 18:18  

1 Comment

  1. [...] Using SketchFlow to Prototype for Windows Phone (Christian Schormann) [...]

    Pingback by Dew Drop – March 20, 2010 | Alvin Ashcraft's Morning Dew — March 20, 2010 @ 07:47

RSS feed for comments on this post. TrackBack URI

Sorry, the comment form is closed at this time.

Powered by WordPress