Visual Studio 11 Feature: Storyboarding

As long as I have been in development it’s been difficult to find a good application to mock up what a screen or webpage is supposed to look like. In early 2000 I saw designers using Photoshop then there was Visio and Word. Recently products like Balsamiq and Sketchflow have become popular for mocking up pages that are functional.

The TFS11/VS11 Developer Preview is available and I was interested in seeing the new Storyboarding feature that is added into PowerPoint. At the Microsoft ALM Summit Justin Marks demonstrated how to use this functionality and I was really impressed with the potential for teams collaborating on design. It is pretty easy to incorporate your own elements and build up a shapes library for laying out screens. Along with this in TFS11 you can connect the storyboard to a User Story work item. Mock pages up on slides and quickly you have a PowerPoint slideshow to send to people for review. This is still a beta product and it won’t solve all of the problems in translating ideas into application designs but, it has a good start at bridging the gap and tying into TFS.

As a start the new Storyboarding option is added to the PowerPoint menu.

Using the Shapes button on the Storyboarding ribbon you can see the out of the box items you have to work with. There are background images for winform, webform and phones available. Additionally, there are icons and field elements availabe that you can easily add to your design.

Getting a shape into your shape library is pretty easy using the Add to My Shapes button on the Storybording ribbon. You can select an item on your PowerPoint slide and click the Add button to put it into the My Shapes library. Copying shapes between categories or designating the shape category to add the shape to would be nice functionality that may be added at some time in the future.

Pulling existing pages or snipping elements off of a screen is a breeze with the Screenshot functionality. You click the button and can choose from applications running and bring the whole image in or you can use the snipping tool to outline and copy a small section in.

You can incorporate snips and elements to mock up screens or pages in a snap. I’ll walk you through an example of this.

I’m working on a layout with my designer (Sue) who is helping me put together a blog. Building a layout from the Web Browser background and common shapes I can rough out a layout of the blogging site I want. I just dragged a web background and elements from the Storyboard Shapes to a slide.

After our meeting to discuss what I am looking for in a blog and having a general idea of colors Sue started working on some images and updated the Storyboard slide. She took images and incorporated them into my page design. She also added them into a Storyboard shape area named Blog (shown on the right hand side). She created this category from the My Shapes category by exporting My Shapes with the name of Blog.sbsx. She then imported the Blog file and it created the new category in the Storyboard Shapes area. This gives you the opportunity to clean up My Shapes if you want to build another shape library.

Something to think about would be having the exported shapes file on a network share where others on the team could have access to it. If you are in a team environment where there could be multiple clients and you want to build out a shape library you would want to have one person responsible for each client’s shapes file.

The final layout was captured once the page was completed. These three slides then show the progression from rough design into a mockup with images and then the final product. This slide was created by using the Screenshot button to capture the page as it exists on the web.

Not to forget one of the cool features I mentioned at the beginning of this post, there was a User Story work item created for this task. In the User Story work item there’s a STORYBOARDS section that you can link the PowerPoint file to. This has to be on a file share that is accessible to the people working on the task. The PowerPoint file is not stored in the TFS database.

In PowerPoint the slide is tied to the work item to complete the loop.

I hope you found this information useful and got your interest in trying out the TFS11 Preview. Storyboarding is just one of many awesome features on the way.

Jim