What's in the project?
This project contains a new SketchFlow template that enables you to use to rapidly prototype Windows Phone apps.

 

What can I do with them?
With this new template you can quickly mockup a Windows Phone app using all the SketchFlow features you already know and love, sketchy controls, sample data, Behaviors and the Visual State Manager. The prototype you create will run in the SketchFlow player (not in the phone emulator) which enables you to easy test, get feedback and quickly iterate on your ideas even if your client and stakeholders are remote to your location.

For the phone template we have added a number of unique phone features to speed up the prototyping process such as pivot and panorama, date and time pickers, map controls, the application bar as well full screen mockups of features such as the camera, Bing search, the app list and home screen.

 

Let's get started!

Simply install the new template using the SketchFlowWP7.msi installer, open your version of Blend and under the Windows Phone option you’ll now have the additional option to start a SketchFlow for Windows Phone app.

2011-06-08-14h21_31_thumb8

When you start a new project Blend creates a number of screens for you, such as home, search, the app list and provides an empty phone screen ready for you to start creating your prototype. In addition to the screens provides SketchStyled Phone Chrome with pre-wired buttons for Search, Home and Back that work exactly the same as the buttons on the phone.

2011-06-08-14h23_22_thumb5

SketchFlow provides a number of SketchStyled controls by default and the SketchFlow for Windows Phone template includes a number of other phone specific controls that you can find located in the assets panel under:

Controls –> Mockups

2011-06-08-14h37_08_thumb5

Controls such as Panorama and Pivot work the same as they do in standard Windows Phone projects, in fact even adding additional Panorama and Pivot items is the same, simply right click and choose add an item.

2011-06-08-15h18_31_thumb1

Controls such as the Toast notification can be triggered to appear simply by using a Behavior and of course it’s content can be fully customized.

2011-06-08-15h21_12_thumb6

The ApplicationBarMockup, like Panorama and Pivot, behaves the same as it does in a real phone app, the icons and menu items are fully customizable and by default when you test your app the ‘…’ identifier expands the AppBar with no additional work required by you.

2011-06-08-15h28_08_thumb2
[View in Blend on the design surface]

2011-06-08-15h33_00_thumb2
[View in the SketchFlow player when ‘…’ has been pressed]

The final controls we’ll highlight in this brief introduction are the Date and Time pickers which are pre-programmed and ready to be used in your prototype. Simply add them to your project, hit F5 and then in the SketchFlow player click on the picker to see it in action.

2011-06-08-15h42_51_thumb5

[View of Time and Date pickers in Blend on the design surface]

2011-06-08-15h42_39_thumb1

[View in the SketchFlow player when TimePicker has been pressed, yes and no buttons return you to the previous screen state.]

You can now quickly created a prototype of your phone app, deploy it, have your client test and provide feedback through the SketchFlow player and then easily turn the whole project into a Word document complete with table of contents, screen shots and associated feedback, an ideal way to start your spec doc!

To get a great overview of the functionality and capabilities of the SketchFlow template for Windows Phone please watch Unni’s session at MIX earlier this year.

 

What’s next?

When you are happy with your prototype and ready to create your actual application don’t forget to take advantage of our Windows Phone 7 Design Templates. The design templates are a XAML version of the UI Design and Interaction Guide for Windows Phone 7 and allow you to easily create common Windows Phone UI layouts by simply copying and pasting the desired look and feel. We’ve taken care of the margins, styling, and custom controls that may not be available in the platform.

splash

Enjoy!

Last edited Jun 10, 2011 at 7:30 PM by freelancer2227, version 6

Comments

diaconu13 Dec 22, 2011 at 6:16 PM 
Exactly what i was looking for , thanks :)

Birbilis Jul 2, 2011 at 1:36 AM 
the UI Design and Interaction Guide for Windows Phone 7 link takes one to a PDF that reads the following:

The UI Design and Interaction Guide for Windows® Phone v2.0 is obsolete. This document previously existed in a pre-release version. It has been superseded by the User Experience Design Guidelines for Windows Phone on MSDN®.
There are six parts to the new guidelines:
1. The Windows Phone Platform: Takes a brief look at the types of applications that can be written for the Windows Phone and the specific user needs each one can fulfill.
2. The Application Design Process for Windows Phone: Contains a collection of ideas on how mobile application design can impact the utility of a Windows Phone.
3. Application Structure and Navigation Models for Windows Phone: Contains information about the different types of Windows Phone application navigation models and best practices for each style.
4. User and Platform Interactions for Windows Phone: Contains guidance on specific feature areas and user interactions for Windows Phone including themes, animations, navigation, orientation, gestures, graphics, notifications, and so on.
5. Controls Design Guidelines for Windows Phone: Guidelines for using Silverlight® controls on Windows phone, as well as Windows Phone-specific controls.
6. Appendix: Contains links to other design resources, such as tools, icons, design templates, tutorials, and so on. Please see the new guidelines on MSDN for more information

SO THE NEW GUIDELINES ARE AT: http://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx