I’m kicking off a new personal project, and I thought this would be a good opportunity to plan out it’s flow of operation using SketchFlow (get a 60 day trial of Expression Blend 3 here). I intend to develop the application in ASP.NET MVC, not Silverlight. So what I will be outputting from Blend will only be used to refine the UI and get initial feedback from colleagues and friends.
The power of SketchFlow is to create quick informal sketches of screens and to start mocking up interaction through animation (transitions, visual effects). It’s not designed to create final polished artifacts, existing tools already do this well, such as Adobe PhotoShop. So far it seems to be working well.
So I thought I would summarise some initial tips and issues I’ve already had to deal with in the form of questions (and answers).
What if controls in design mode aren’t behaving as you expect?
This was a simple issue, I had forgotten I had placed a transparent rectangle (factor 20%) over a a few groups of controls. Once I adjusted their z-order using Order.. send backwards/forwards, it was working fine. I chalk this up to it having been a while for me in using a tool like this. When controls overlap, you can select controls behind them but not perform all the actions you would like via mouse actions, i.e. resizing is blocked. So either un-overlap them to resize, or use the property windows.
How do you set the default screen size in SketchFlow?
The screens I’m sketching are for a website, I wanted to sketch them down the page so needed a larger Y pixel range. I wanted to adjust the default size of new screens so I wouldn’t have to manually change each new screen. I was unable to find a setting that is per project, only an application wide setting via menu: Tools… Options…
For my use I would have liked to see new screens spawning off an existing screen set to match it’s height and width, tho a feature like that may upset users who want default setup screens every time.
How do you create reusable components in SketchFlow?
The approach I’m using is to create “Component Screens” that can then easily be dragged onto other screens. I’m doing this initially for my heading/navigation. But instead I’ll demo creating a reusable login component (the steps are identical).
Create the components on any screen (new or existing), and select them individually via the “Objects and Timeline” window or on the screen itself (if a new blank screen CTRL+A works the fastest).
Then right click on the collection either on the screen or in the “Objects and Timeline” window and select “Make Into Component Screen…”
That brings up a dialog, so just give your component a name:
Now you have a new “green object” on your SketchFlow Map, you can simply drag it onto other existing screens, or use the little drop down menu below it to select “Insert a Component Screen” which will add it to the existing screen you drag it to.
Am I enjoying using SketchFlow… Will I keep using it… Will I keep blogging about this…