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!

This is a quick walk through of how to setup things for skinning within a XAML Application.  First thing, find the App.xaml file within the WPF or Silverlight Project.

Within the App.xaml file set some default styles for your controls.  I set the following for a button, label, and border control for an application I am creating.

Button Control

<Style x:Key="ButtonStyle" TargetType="Button">

    <Setter Property="FontFamily" Value="Arial" />

    <Setter Property="FontWeight" Value="Bold" />

    <Setter Property="FontSize" Value="14" />

    <Setter Property="Width" Value="180" />

    <Setter Property="Height" Value="Auto" />

    <Setter Property="Margin" Value="8" />

    <Setter Property="Padding" Value="8" />

    <Setter Property="Foreground" Value="AliceBlue" />

    <Setter Property="Background" >

        <Setter.Value>

            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                <GradientStop Color="Black" Offset="0" />

                <GradientStop Color="#FF5B5757" Offset="1" />

            </LinearGradientBrush>

        </Setter.Value>

    </Setter>

</Style>

Label Control

<Style x:Key="LabelStyle" TargetType="Label">

    <Setter Property="Width" Value="Auto"/>

    <Setter Property="Height" Value="28" />

    <Setter Property="Foreground" Value="Black"/>

    <Setter Property="Margin" Value="8"/>

</Style>

Border Control

<Style x:Key="BorderStyle" TargetType="Border">

    <Setter Property="BorderThickness" Value="4"/>

    <Setter Property="Width" Value="Auto"/>

    <Setter Property="Height" Value="Auto" />

    <Setter Property="Margin" Value="0,8,0,0"/>

    <Setter Property="CornerRadius" Value="18"/>

    <Setter Property="BorderBrush">

        <Setter.Value>

            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                <GradientStop Color="CornflowerBlue" Offset="0" />

                <GradientStop Color="White" Offset="1" />

            </LinearGradientBrush>

        </Setter.Value>

    </Setter>

</Style>

These provide good examples of setting individual properties to a default, such as;

<Setter Property="Width" Value="Auto"/>

<Setter Property="Height" Value="Auto" />

Also for settings a more complex property, such as with a LinearGradientBrush;

<Setter Property="BorderBrush">

    <Setter.Value>

        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

            <GradientStop Color="CornflowerBlue" Offset="0" />

            <GradientStop Color="White" Offset="1" />

        </LinearGradientBrush>

    </Setter.Value>

</Setter>

These property setters should be located between the opening and closing <Application.Resources></Application.Resources> tags.

<Application x:Class="ScorecardAndDashboard.App"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             StartupUri="MainWindow.xaml">

    <Application.Resources>

    </Application.Resources>

</Application>

Now in the pages, user controls, or whatever you are marking up with XAML, for the Style Property just set a StaticResource such as shown below.

     <!-- Border Control -->

<Border Name="borderPollingFrequency" Style="{StaticResource BorderStyle}">

     <!-- Label Control -->

<Label Content="Trigger Name:" Style="{StaticResource LabelStyle}"></Label>

     <!-- Button Control -->

<Button Content="Save Schedule" Name="buttonSaveSchedule"  Style="{StaticResource ButtonStyle}" HorizontalAlignment="Right"/>

That's it.  Simple as that.  There are other ways to setup resource files that are separate from the App.xaml, but the App.xaml file is always a good quick place to start.  As moving the styles to a specific resource file later is a mere copy and paste.

I spoke with the Umpqua Bank Web Development Team day before yesterday for an interview.  It was fun talking to the crew over there and discussing what they've been working on.  It sounds like a lot of things are afoot at the Umpqua.  One of the things speaking with them has led me to do was to really check out further the Umpqua Web Experience and do a little comparison check.

First off, take a look at the clean design, right front and center, of their web site.

Now take a look at Bank of America, Citigroup, and US Bank.

First off, I can honestly say Generation X & Generation Y will most likely find the Umpqua Site far superior in first appearance than any of the other sites.  Let me review real quick why.

The Bank of America site comes up, with the entire thing shifted to the left, and forced to a set pixel width.  The pixel width is fine, except on modern machines that have decent resolution, it gets really weird.  The big problem though, is the fact that one's eyes actually TURN to see were on the page the site has been painted.  Not front and center were it should be, but off to the left.  This I find nuts that anybody still does this.  On an Intranet Site it would be acceptable, but online, "very not cool".

I rarely have anything negative to say about BOA but their current site definitely needs an update - SOON.

The second site, from Citigroup, definitely comes up front and center on any browser I use.  There is one slight problem for Gen X & Gen Y though.  Their site immediately makes you think of some big wormy corporation or being accosted by a suit attempting to sell you a car.  Nice site, nice layout, wrong first impression, especially being that it is NOT the first impression Citi has been working years to achieve.  Somehow they continue to miss the mark.

The US Bank Site is just rough.  It looks very dated, hangs to the left, has an odd initial login section on the side that people do NOT trace with their eyes first, and overall is just laid out poorly.  There is too much activity on the site and...  ok, I'm done, this site is just going to frustrate me.  This is the type of site that Gen X & Y don't prefer, and anyone not in those groups usually gets overwhelmed by the busy nature of the layout.  I personally wouldn't have kept it open this long except I'm reviewing the page design.

So back to Umpqua.  First I'll hit on the very minor negatives, there aren't many to start with.  The site has good colors, but doesn't quit scale right to bigger screens.  Being this is the only site of those mentioned that even attempts to handle some scaling in a minor way, I'm impressed.  The second thing is the square corners, it is dumb to say this, but rounded corners are easier on the eyes and more oriented toward the whole web 2.0 ideal.  It's a minor thing, but it does differentiate and it absolutely makes a difference in the long term.  Yeah, I know, here I am arguing for rounded corners.  Never thought I'd be blogging about such a thing, but I stand by it.  Rounded corners are cool and important to layout.

Now for the good parts.  The Umpqua Site has good white space, the type that allows you to actually see the focal points of the page.  The white space allows you to see the priority sections also.  The colors that surround some words, the other background behind the white space, and the lower "Umpqua Extras" section has colors that do not clash, and help to bring a slightly more focused look at some of the other priority spaces without drawing you away from the important market spaces for "e-switch to Umpqua", "LocalSpace", and "earn cash back".  The sign in section is fairly easy to find, being bolded and colored with a bluish off tone.

Overall the site looks great, is easy on the eyes, doesn't cause one to look it over in an unnatural way, is easy on the eyes, and above all, attracts new users to were they should look and provides an easy to find area for returning users.

I rate it A+ for bank web site!