WPF Demo User Interface

WPF UI (and workflow primer/thoughts)

Date: June 2, 2008
Author: systim
Category:
Tags: , , , , , , ,
WPF Demo User Interface

WPF Demo User Interface

THE SCENARIO

The goal of the demo was to demonstrate new features in SQL Server both through local and web-based experiences.  The scenario we scripted focused on a business scenario in the Journalism field.  The idea was a business named Trey Research built a WPF application which would interact and sync with a public-facing website.  From this website, journalists would submit stories for syndication.  The “editor” working for Trey Research would use the WPF application to aggregate the stories being submitted and shop them for publication.

THE WORKFLOW

WPF UI Wireframe

WPF UI Wireframe

Wireframes

“Wireframing,” or designing the basic framework of the application, was the first step.  This enabled the owners of the content, design, and technology all work together to develop the correct UI and UX for the application.

Often the contemporary workflow of building an application would be as follows:

  1. The Information Architect (IA) designs wireframes using tools such as Visio, Adobe Photoshop or Illustrator, or even Microsoft Word or Publisher.
  2. The wireframes are then “skinned” by the designer, using Adobe Photoshop or Illustrator.
  3. The skinned comps, once approved, head to redlines and production, where the individual assets are created.  An example of this would be creating buttons, logos, or any other graphics that would be used in the application.  Redlines act as a blueprint for the developer to help ensure the design-comp is clear. Noting the exterior margins or the background color would be an example of the type of information included in a redline.
  4. From there, the developer would take the assets, comps, and redlines, and build the application using tools such as Visual Studio.
The Problem

Two problems with the above workflow, as you may note, are the different tools being used, and the great potential for “translation,” if you will, between the wireframes, comps, and final application.  Using Expression Blend and WPF can solve many of these problems.

Do It In Blend

For this demo application, we started the workflow using Expression Blend to design the wireframes.

By using Blend to design our wireframes, we start the process using XAML, which is the native language of the application we will be creating.  This enables us to avoid significant “translation” – and therefore interpretation.

At this early-stage in the process, it is helpful to agree upon a naming-convention for the functional elements.  For instance, if we agreed on what name we assign the map-control, above, the XAML written by the designer, should integrate seamlessly with the code written by the developer.

Additionally, by using Blend, the IA can both save time in the creation of the wireframe, as well as the design of “comps” and development of the final application.  By using default assets in Blend such as sliders, checkboxes, tab controls, and the like – as well as StackPanels, WrapPanels, and other containers which assist with layout – the IA foregoes much of the work of “design” and can focus on the correct UX.  If you and just dump a bunch of checkboxes into a WrapPanel and put that WrapPanel where it needs to be, the IA doesn’t have to worry about placing all the individual elements … that’s done for him.

You’ll note the order of the objects in the left panel correlates directly with the order of the items in the horizontal stackpanel. As well, you’ll see above that this WrapPanel is a child of a StackPanel, with a StackPanel sibling.  To the right of the objects panel, you’ll see that reflected in how the WrapPanel is to the right of the “Go” button.  The “Go” button is contained in the StackPanel sibling.  By using containers such as StackPanels, WrapPanels, and the like, layout is quick and easy.

You can toggle the orientation of the WrapPanel in the Layout panel, under the Properties tab.

The IA, by laying out his wireframes in Blend, gives the designer a framework to build upon.

For instance, adding colors and backgrounds to the wireframe above is easy for the designer, and only requires firing up the project in Blend and getting to work.  To change the background of this wireframe, highlight the “Grid” grid in the Objects panel:

And then change the background gradient as you like.

This Is Just The Start

This is a quick example of how you’d start the design-process on the site.  From here, every object’s visual representation can be manipulated.  An important part of this, however, is the naming of the objects themselves.  Ideally, the functional items included in the wireframes would be named appropriately, and that naming would have to be retained throughout the process.  Often, the process is linear, going from IA to design, to development – which is unfortunate – as if the development phase is included from the outset, very easy processes (such as naming elements) can help speed the process.

There are lots of good examples and tutorials on how to use Blend to design, and I’ll be posting short tutorials on design in WPF and Silverlight, and Expression Studio 2 as often as possible.  Check back, or drop me a line if you have specific questions, and be sure to follow me on Twitter @systim!

::: systim out :::