Skip to main content

Prototyping Applications with Sketchflow

How many times have you needed to present visual concepts behind your application to a client?

Over the years, I've had several times where I had to build a quick mock-up in Visual FoxPro to show how an application or function might run. Designing the screens themselves weren't the challenge - the challenge was showing the user how the application would flow between different areas. Short of putting fake code into buttons or saying "and now we go here", there really hasn't been an easy way to do this.

Now, sometimes, a client has gone so far as to hire someone to build "wireframes" to depict this. I found this process an entire waste of time. People building wireframes tend to be "business analysts", in short; people who have stopped learning how to develop code but still want to show their value by being the translator between the client and the developer. As far as I'm concerned, if you want to be a senior developer, you need to be able to translate as well. Sure, you may leave the task to other developers, but you should always be able to demonstrate or show your ideas to others.

I recently had the experience where I had to show some user interface concepts on a new application. I was interested in trying out Expression Blend, one of Microsoft's tools found in the Expression Studio but also one of the integration tools noted in Visual Studio 2010. While it specifically targets WPF or Silverlight application development, I found the SketchFlow tool invaluable.

Expression Blend uses XAML to build the user interface. So, if you're not building a XAML application, you'll need to convert this over. However, the key benefit is the little "map" section at the bottom of the screen in the designer.

With the map section, you can build the entire work-flow for the interface. By right-clicking on the main page, you can create a connected page.

Since the tools available in Expression Blend are based on regular developer tools, it's easy to build a sample representation of your application in minutes. If you are using WPF as your development platform, you can also convert it into a production environment or share your existing components (with code behind it) in your prototype. This is similar to building a true development prototype using existing code or components.

When you "run" the prototype, all of your connections appear in a menu on the left side. To move to another page, you click the related page OR you can use the map below to show the navigation.

The best part, however, of SketchFlow is the SketchFlow player. Expression lets you "package" the entire solution into a single executable that runs with the navigation menu. Now the user can run this prototype on their own. There are also tools to let them add their own feedback and then send it to you via e-mail. This can make remote prototyping much easier than it already is.

Added bonus features:

1. You can take a larger part of the screen that you are working on and instantly create a "user component" for it, so it can be re-used with other pages. Drag and drop the user component in the map onto another page and it will put an instance of that object on that page.

2. You can add annotations to individual pages and components on the screen. These annotations can pop-up for your users so they can see your comments.

3. Sketchflow has a "style" from which you can create the look and feel of "wireframes", instead of the real look of controls. This makes the entire application have that real "prototype" look to it, so your clients don't think it's easy to move from prototype to production.

4. You can also add real "animations" within the application so when users click a button, a dialog can appear or an object can "move" on the page.

Many developers push off Expression as being the "designer" tool or look at Expression Web simply being the "new" FrontPage - but it's definitely more than that.

If you're a "coding" developer, it may not be for you - but the next time you have to show interface concepts to a user, you definitely want to be looking at Expression Blend and SketchFlow.

Expression with Sketchflow has been around since Expression 3.0 so if you have MSDN from the past year (2009), you already have access to it.

Other useful links:

Demos from MIX
Prototyping with SketchFlow

Comments

Popular posts from this blog

Using VFPX : A Walkthrough features in CodePlex

This white paper is from a session originally given at Southwest Fox 2008, introducing many developers to how CodePlex works and how they can get involved with the VFPX Project.

You can also hear the audio of this session here.

So you want to help out in VFPX? This session goes through how to get started with the VFPX Project and dealing with issues like source control, the Wiki-style attitude of Codeplex and more.

What Is VFPX?

VFPX is the future of the Visual FoxPro IDE and developer tools we currently know today. It is based on the VFP 9 SP2 core but realistically, it is more like taking all of the tools that have grown up around the VFP engine and making them ours to grow and enhance. Microsoft is no longer doing active development on Visual FoxPro; the product is officially supported until 2015 but then many developers still have VFP 6 applications running and VFP6 support ended in 2004.

Visual FoxPro has a long running tradition of community enhancements. Back in 1990, the FoxPro Co…

VFPX: New Tools based on Existing Code

Tools like Code Analyst and Class BrowserX all use code from existing Visual FoxPro tools. This is possible because in 2007, Microsoft released the code for all of their xBase components with a special license. This license allows developers to create and update components and applications based on these components. It explicitly gives two rights:

Copyright – "a non-exclusive, worldwide, royalty-free copyright license to reproduce the software, prepare derivative works of the software and distribute the software or any derivative works that you create"

Patent – "a non-exclusive, worldwide, royalty-free patent license under licensed patents to make, have made, use, practice, sell, and offer for sale, and/or otherwise dispose of the software or derivative works of the software"

There are some limitations; primarily that you can't use the Microsoft name, must include any existing copyright notices, and that the software is provided "as-is" but the real bene…

Using the VFPX Code Analyst

The Code Analyst is a tool in VFPX designed to make FoxPro application development and code maintenance easier. It combines the extensibility with a Code references-like interface, analyzing pieces of code or entire projects and identifying key areas for refactoring - similar to the Code Analysis tool in Visual Studio.

You can identify your own project rules to highlight key areas of your application that may not match your own coding standards.

A PDF version is available here