Started a new Sketchflow Prototype in Expression Blend recently and documented each of the steps. This blog entry covers some of those steps, which are the basic elements of any prototype. I will have more information regarding design, prototype creation, and the process of the initial phases for development in the future. For now, I hope you enjoy this short walk through. Also, be sure
to check out my last
quick entry on Sketchflow. I started off with a Sketchflow Project, just like I did in my previous entry (more specifics in that entry about how
to manipulate and build out the Sketchflow Map). Once I created the project I setup the following Sketchflow Map. The CoreNavigation is a ComponentScreen setup solely for the page navigation at the top of the screen. The XAML markup in case you want
to create a Component Screen with the same design is included below. <UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:pb="clr-namespace:Microsoft.Expression.Prototyping.Behavior;assembly=Microsoft.Expression.Prototyping.Interactivity"
x:Class="RapidPrototypeSketchScreens.CoreNavigation"
d:DesignWidth="624" d:DesignHeight="49" Height="49" Width="624">
<Grid x:Name="LayoutRoot">
<TextBlock HorizontalAlignment="Stretch" Margin="307,3,0,0" Style="{StaticResource TitleCenter-Sketch}" Text="Aütøchart Scorecards" TextWrapping="Wrap">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<pb:NavigateToScreenAction TargetScreen="RapidPrototypeSketchScreens.Screen_1"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBlock>
<Button HorizontalAlignment="Left" Margin="164,8,0,11" Style="{StaticResource Button-Sketch}" Width="144" Content="Scorecard">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<pb:NavigateToScreenAction TargetScreen="RapidPrototypeSketchScreens.Screen_1_2"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button HorizontalAlignment="Left" Margin="8,8,0,11" Style="{StaticResource Button-Sketch}" Width="152" Content="Standard Reports">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<pb:NavigateToScreenAction TargetScreen="RapidPrototypeSketchScreens.Screen_1_1"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</Grid>
</UserControl>
Now that the CoreNavigation Component Screen is done I built out each of the others. In each of those screens I included the CoreNavigation Screen (all those little green lines in the image) as the top navigation. In order
to do that, as I created each of the pages I would hover over the CoreNavigation Object in the Sketchflow Map. When the utilities drawer (the small menu that pops down under a node when you hover over it) shows click on the third little icon and drag it onto the page node you want a navigation screen on.
Once I created all the screens I setup the navigation by opening up each screen and right clicking on the objects that needed
to point
to somewhere else in the prototype.
Once I was done with the main page, my Home Navigation Page, it looked something like this in the Expression Blend Designer.
I fleshed out each of the additional screens. Once I was done I wanted
to try out the deployment package. The way
to deploy a Sketchflow Prototype is
to merely click on File –> Package SketchFlow Project and a prompt will appear. In the prompt enter what you want the package
to be called.
I like
to see the files generated afterwards too, so I checked the box
to see that. When Expression Blend is done generating everything you’ll have a directory like the one shown below, with all the needed files for deployment.
Now these files can be copied or moved
to any location for viewing. One can even copy them (such as via FTP)
to a server location
to share with others. Once they are deployed and you run the "TestPage.html" the other features of the Sketchflow Package are available.
In the image below I have tagged a few sections
to show the Sketchflow Player Features.
To the top left is the navigation, which provides a clearly defined area of movement in a list.
To the center right is the actual prototype application. I have placed lists of things and made edits. On the left hand side is the highlight feature, which is available in the Feedback section of the lower left. On the right hand list I underlined the Autochart with an orange marker, and marked out two list items with a red marker.
In the lower left hand side in the Feedback section is also an area
to type in your feedback. This can be useful for time based feedback, when you post this somewhere and want people
to provide subsequent follow up feedback.
Overall lots of great features, that enable some fairly rapid prototyping with customers. Once one is familiar with the steps and parts of this Sketchflow Prototype Capabilities it is easy
to step through an application without even stopping. It really is that easy. So get hold of Expression Blend 3 and get ramped up on Sketchflow, it will pay off in the design phases
to do so!
Original Entry
