I recently gave a workshop about developing and designing Windows Store and Windows Phone applications. A small part of that was about storyboarding applications in Microsoft PowerPoint.

The Storyboard extension is available for users of Visual Studio Ultimate, Premium and Test Professional. To view PowerPoint presentations containing these storyboards you don’t need any of those, you can even view the presentations in the PowerPoint Web App.

Storyboard Shapes

If you have Visual Studio installed you’ll probably have the Storyboarding add-in as well. You can find it on the ribbon inside PowerPoint, or you can start PowerPoint Storyboard directly from the start menu.

Once PowerPoint is started it’ll show you the Storyboard shapes panel. This panel contains a whole lot of shapes you can use creating your storyboards or sketches. Not only can this be used for Windows Phone applications, but shapes for Windows Store apps, websites and Windows desktop applications are also included.

The default list of shapes contains most of the common used controls and parts of applications like textboxes and buttons. It also contains more complex controls like maps.

If you need more shapes, or would like to create storyboards for other applications like IPhone apps or just would like a sketchy style, you can download more shapes at the Visual Studio gallery.

Creating a Storyboard

Creating a storyboard is as easy as creating a regular PowerPoint presentation. Well, maybe even easier. Just drag and drop shapes from the panel to a slide and combine them to get your ideas communicated.

You can use all other PowerPoint features too of course. Shapes, animations, transitions, whatever you like. But, almost everything you need is positioned on the Ribbon.

You may want to reuse the basic layout of your storyboard throughout multiple slide. This is very simple to accomplice. Just click the “Create Layout” button on the Ribbon. You’ll have to name the layout. After you did that you can set any new to use the layout you just created.

You can add custom shapes to the list. If you have added some shapes to form a ‘control’ that you might want to reuse, just select the shapes and click “Add to My Shapes” on the Ribbon. Name the Shape and it is added to the “My Shapes” section of the panel. You can export your custom shapes and share them within your team for example. Imported shapes will be places in a section named after the filename you chose when you exported the file.

Another nice features of the storyboarding add-in is the screenshot function. Clicking the button on the Ribbon will present you the option to grab a screenshot from any running application, in one click. Or to select just a portion of the screen you can click the “Screen clipping” option.

To create some interactivity between parts of your storyboard you can use the Hyperlink option. Besides creating a hyperlink to a file or website, this option can also create a link to another slide. This allows you to build and test the navigation of your application. For example. When building a storyboard for a Windows Phone applications, you can add an AppBar to the design. You can add a hyperlink on each button on the AppBar to have those navigate to different slides. If create a new Layout for this screen you can reuse it on various slides to have a consistent layout with the hustle of recreating it on every slide.

The last option I would like to point out is that you can add a link to your storyboard to Team Foundation Service work items right from within PowerPoint. After hitting the “Storyboard Links” button in the Team section of the Ribbon, you have to connect to you TFS server. When the connection is established you need to search for a work item to link the presentation to. This can be done though a query you defined in you TFS, by id or by name. The only thing notable when using this feature is that you’re storyboard has to be saved in a public location accessible by anyone that needs to view the presentation, a location like SkyDrive or SharePoint. Storyboards can be viewed in the PowerPoint Web app when saved on SkyDrive, without the add-in.