Using SketchFlow First Impressions

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…

Setting the Default Screen Size in SketchFlow

Setting the Default Screen Size in SketchFlow

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).

Objects and Timelines window

Objects and Timelines window

Then right click on the collection either on the screen or in the “Objects and Timeline” window and select “Make Into Component Screen…”

SketchFlow right click action - make into component screen

SketchFlow right click action - make into component screen

That brings up a dialog, so just give your component a name:

Make Into Component Screen Dialog

Make Into Component Screen Dialog

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.

SketchFlow Map Insert a Component Screen

SketchFlow Map Insert a Component Screen

Am I enjoying using SketchFlow… Will I keep using it… Will I keep blogging about this…

Yes

Advertisements

2 thoughts on “Using SketchFlow First Impressions

  1. Using SketchFlow First Impressions « [NickJosevski(Blog = “.NET”)]…

    Thank you for submitting this cool story – Trackback from DotNetShoutout…

  2. […] I came up with this approach. Following on from my post the other day about creating re-usable components. I spawned a new reusable screen. With a simple […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s