Part I. I’ll show you how to quickly create Windows Phone apps with PowerPoint. Turns out, for Windows Phone prototyping you don’t need to be an expert or even a programmer. If you are a programmer, it’ll certainly help you to be super-productive! Prototyping is a great way for visualizing ideas, and putting a quick demo together, that can later be converted into a real application. From Walt Disney to George Lucas, prototyping is used in many great products and industries and having it for mobile phone development certainly helps a lot.
SketchFlow provides a great deal of documentation on the concepts of prototyping, in this post I’m trying to make a concise step-by-step guide to prototyping apps.
Using PowerPoint to prototype Windows Phone UI
Windows Phone has excellent development tools, such as Visual Studio and Expression Blend. PowerPoint is a great tool for creating presentations, sketching if you have a tablet, and… prototyping user interfaces. We’ll be using a combination of Microsoft PowerPoint and Microsoft Expression Blend with SketchFlow. Just like in a real-life project we’ll do a prototype first. In my next post I’ll show you how to turn this prototype into a working Windows Phone app.
First I’m going to create a PowerPoint template with the size of a small Windows Phone screen: about 5×8 inches. To get to this number, I roughly take 480×800 pixels screen and divide it by 96 dpi screen resolution. I will use this template to prototype my little app. All code is available at the end of this post, please feel free to use it.
Next, I’ll sketch a few screens of my app, using rectangle shapes: my first screen will have some kind of a search bar, with a listbox underneath and a button for an action. My second screen will provide some details for items found in the first screen, and another button. My third screen mockup will include more detailed information for my Windows Phone app.
You can use PowerPoint templates I provided with this post: get the source code and you’ll find templates in the PowerPoint folder: wpPowerPointTemplate template is for provided for your convenience to give you the page size I used, wpPowerPointMockup is the actual mockup presentation with the screens of my little app.
Importing prototype into Expression Blend
I’m going to use Microsoft Expression Blend Ultimate with SketchFlow (for prototyping), and I’m also going to download a Windows Phone SketchFlow template from the CodePlex.
Next, I create a new Expression Blend project as a Windows Phone SketchFlow application.
Take a look at the SketchFlow map. Notice that the template creates one screen for us, and also adds some components: Home, Search and AppList.
Let’s add our screens created in PowerPoint to our app! Go to File – Import Microsoft PowerPoint File… and select the PowerPoint template we created in the earlier steps. After importing PowerPoint, we now have three slides added to our app as Slide1, Slide2 and Slide3 screens! SketchFlow even adds connections between the screens to the map.
Each screen auto-magically gets a XAML and code-behind class file generated for it. This is what the sketchflow map looks like after we imported slides from PowerPoint. The XAML file contains the code to support the mockup of the Windows Phone, navigation and a snapshot of PowerPoint slide as a XAML Image control (remember, we are prototyping here, we will get to the actual controls and logic coding later!).
Building and Playing the Prototype
Now, click F5 to build the application et voila! We have a running prototype of our Windows Phone phone app, created with PowerPoint.
One interesting thing to remember about developing prototype for Windows Phone apps is that you don’t even need the Windows Phone emulator to run them. Expression Blend comes with the tool called SketchFlow Player, a browser Silverlight control that helps you play with your app.
In the next post I’ll show you how to turn your prototype into a Windows Phone app.