Last night I finished my first SketchFlow project last night. I was using the (free) first chapter of an upcoming book “Dynamic Prototyping with SketchFlow in Expression Blend”. This copy doesn’t look like first draft stuff, it’s stuff that you can use right now. The free chapter gets you grounded with how you can put SketchFlow to work for you.

The first thing I did was set aside what little I knew about prototyping. I’ve used many napkins to layout an app and that makes total sense. The examples do as much but have added color to their napkins (sketches). While building this first project I wanted to make things click and move, add behaviors, “oh, I can make this spin or flip!”, you get it. Resist that urge and wait to satisfy those “demons” when your layout is finished.

Taken from the “Who Should Read This Book" section

If you’re a software architect or developer that often finds yourself thrust into playing the role of a designer in your projects and day to day activities you’ll find that the techniques put forth here will enhance your ability to do better work. This book shouldn’t however be regarded as a replacement for having the capability and skill of a professional designer on your project team.

Bingo. I won’t feel too guilty about wearing a designer hat for my own projects, but my designs shouldn’t go much further than something that has a Balsamiq look (which it can do OTB), nothing polished but still conveying intent. That’s what we’re after right? Not even being a devigner (or Deselepor as they said on C9 yesterday) myself, it was hard not to stay out of the behavior folder. But I did. If you’re the hard core designer, you probably have more business in that behavior folder than I but get the layout right and flowing first. Let me rephrase that, get your sketches laid out and flowing, first. Adding navigation is a snap and once I wired the navigation for each object in the SketchFlow Map surface (the pane on the bottom with the colored shapes) it worked. After I started exercising the the flow navigation when I ran the app a few things happened: more/better ideas for the flow and layout started appearing; I dropped a shape and added two; made a few navigation connection swaps on a few shapes which made more sense after walking through the app; I came up with a better name for some shapes. Two words: rapid feedback. Two more words: love it.

I followed along in the first chapter until the author begin importing assets. Then I scanned my own sketches I had done a few nights before during a trip to the library with my kids. Within an hour I had things snapped together and the SketchFlow Navigator was moving me around the layout. The export to Word worked as advertised. I’m going to take this back to see if I can enlist some folks using Blend for the first time to help build up the application. This will mainly be an exercise to help move myself and someone else forward using this technology. I’ve already added the few initial user stories to my AgileZen backlog so I ready to go.

Lessons Learned

Scan as grayscale if using #2 pencil and regular 8x11 paper

Ink pens or Sharpies work better but don’t have erasers

Can add some color for emphasis using Sharpies

Multiple sketches on one page can be imported as Sketch01, Sketch02, …

Multiple sketches on one page, then use Paint(.net) to crop into individual sketches

SketchFlow is an application that helps designers to move from sketches to interactive prototypes. It comes with features for multiple states, a sketchy style, reusable components, automatic document generation and the ability to share and gather feedback.