IT Bytes

I wanted to see how tricky it would be to use Sketchflow to prototype a iPhone application. I think it’s worthy of a proper tutorial but for now I’ll give a quick pass since 1/2 the battle is just knowing it’s possible.

The first thing I needed was a template for an iPhone, I found one I liked at http://anoriginalidea.wordpress.com/category/sketchflow/. I made this into a User Control and then into a Screen Component (all via single right-clicks). With a couple of grids you can create the basic table view controller layout. Running with the seemingly accepted mono touch community theme of football RSS feeds I created the layout you see below. What you can see is the iPhone control as the background, a simple textbox for the view title, a databound list box pretending to be a table view controller and a stack panel of buttons playing the role of tab controller.

One of the important aspects of using SketchFlow is to create the navigation and state changes to allow your customers to see what is likely to happen. In my example (forgive the names) I’ve created Screen 1 (the table navigation view) which links to Screen 2 (the detail view). Looking at the screenshots does usually help but with the additional SketchFlow map you can see that there are blue navigation flows between the two. You can also see that I’m reusing two assets on both screens, namely the iPhone and tab components.

So I’ve created a design in SketchFlow, now what? How do I get feedback on this, how do I pass this onto to designers and developers? One way is to use the Export to Word option that creates a nice document for people to get their red pens out and dual over.

But this is all very stale, the real advantage is to create an interactive player that you can send out to your customers (WPF) or host on a web site (Silverlight). This allows for annotations & graphical feedback together with a simple way to navigate between the screens and states.

However, with the use of a few behaviours you can get the buttons and UI to execute the transitions by pressing them, far more intuitive and with little effort. I can’t really show that here, trust me the buttons highlight and and click through…

If there is enough interest I’ll write a tutorial and publish the source, but hopefully there is enough here to pique someone’s interest in using SketchFlow with MonoTouch. Now if MonoTouch represented the UI as XAML…