In my previous blog post I talked about using Sketch Flow for designing a screen. In my current project we are using Microsoft Office Visio with a sketch stencil that can be found here. In this post I will show the differences between Sketch Flow in Expression Blend 3 and the Sketch template in Visio by designing a screen.
At first I made a design on the whiteboard:
Creating the application window
Creating an application window is the first step in moving the design from the whiteboard towards the actual implementation.
In Visio creating a screen is done by dragging the Application window stencil on the drawing that is displayed to the right of the toolbox
In Blend you can use the navigation map to create a new screen by right-clicking on the navigation map an choosing the option "Create a screen".
Adding the controls
In Visio you can drag the needed controls on to the screen, in Sketch Flow it’s quite the same only you drag de needed controls from the Assets tab:
The text and textbox controls are quite simple. The grid on the other hand is a little bit nasty in Sketch Flow. There is no standard grid control in Sketch Flow. You have two options: use a standard datagrid control or as I did use a listbox for each column. After that you need to add a Listbox-item for each item.
Visio: Sketch Flow:
The results are quite the same, in the lines are missing in Sketch Flow, but I can live with that.
A nice feature of Sketch Flow is the use of sample data, using this option it gives you the opportunity to add sample data. Here is a nice video about using sample data.
My job as a functional designer is finished, the next step is that my colleague (a programmer) proceeds with this design and create the actual screen. You can find his post about that step here.
Using the sketch stencil in Visio is quite nice and fast, in Sketch Flow some tasks take more time but you get a lot of flexibility in Sketch Flow. And the biggest advantage: the programmer can convert the sketch in a real screen in no time. You can find his blogpost about it here