A Community for Storyboard Shapes

Brian Harry

A while ago, I wrote a post about the importance of feedback in the software development process.  In that post I introduced a new storyboarding tool that we’ve built as part of the VS 11 wave of products that enables you to collect feedback on your designs before you write a line of code.  In the product, we ship a bunch of pre-canned shapes – Windows, Web, Sharepoint, Windows Phone, Windows 8, etc.  But once you start storyboarding, your imagination can run wild with all of the different ideas of shapes and visuals you might want to use in applications.  Of course, you can use any PowerPoint shape or bitmap in existence but tailored application shapes are valuable.

One of our aspirations is to create a community of people sharing shapes they’ve built – thereby helping everyone else design better, cooler apps.  To assist with that, we’ve added a new category on the Visual Studio Gallery for Storyboard Shapes.  We’ve also prepopulated it with some additional shapes that we’ve built (we hope you find some of them creative ).  Here’s a screenshot of what the Gallery site looks like.

We’ve created subcategories and tried to make shapes easy to find. The shapes templates can be free or paid – all the ones we’ve created so far are free.  Installing them is super easy.  Just…

1. Pick the shapes template you want
2. Click download to load them on your system
3. Click the ‘Import Shapes’ button on the Storyboarding ribbon in PowerPoint and select this file

Then you can start designing new storyboards with the shapes.

We’ve also tried to make the download site easy to find.  Inside PowerPoint, on the Storyboard shapes window, we’ve provided a “Find more Storyboard Shapes online” link that will take you to the VS Gallery and land you on the Storyboard shapes page.

You can use these shapes libraries with the storyboarding tool in the VS 11 Release Candidate we released today and with the RTM version when it is available.  In addition we are working on some additional libraries that we hope will be available soon – like iPhone and iPad but we hope you all will come up with lots of great ideas and share them.

So using them is really easy, but what about creating them?  Well, it’s a hair more complicated.  Our storyboarding tool is a PowerPoint plugin and our shape libraries are just PowerPoint shapes, right?  Yes and no.  Yes, they are PowerPoint shapes, but, we’ve added the ability to annotate them with metadata the storyboarding add-in uses.

The most important of these is sizing behavior.  When you size a PowerPoint shape, just stretches everything.  If you are resizing a list, you don’t want to stretch the list contents, making the individual items, scrollbar, etc. unnaturally bigger.  You want to stretch it and have some aspects stretch and others stay the same.  To do this, you annotate your shapes with sizing metadata that tells the tool how you want your shapes to stretch.  For some shapes, uniform stretching is fine and you don’t need to bother.  For others, it’s pretty important.

We also use metadata to annotate shapes with search keywords, category information, etc. to make your shapes easier to find.

All this metadata is just entered as notes on the PowerPoint slides containing your authored shapes.  When you’re done with your shapes, you use our “shape compiler” (which admittedly is a goofy command line tool for now) to compile your shape into a shape library (.sbsx file) that can be imported into PowerPoint and used for Storyboarding.  The Storyboarding tool download also includes instructions on how to annotate your PowerPoint shapes.

The shape library can also be uploaded to the Visual Studio Gallery by clicking on the Upload link towards the upper right hand corner of the VS Gallery page.  You will then be asked to choose what Extension Type you are uploading (in this case Storyboard Shapes).

You can then either upload the shapes file or enter a link to your shapes.

In the event you want to charge for your shapes, you can advertise them on the Gallery but you’ll need to enter a link to your own commerce site.  The Gallery doesn’t have any way to collect money directly.

Lastly, you can fill out the information for your VS Gallery download page:

We hope all of you find the Storyboarding shapes on the Gallery useful and we hope some of you take the time to demonstrate your creativity and share some of your own designs.

Thanks and happy storyboarding

Brian

Brian Harry Corporate Vice President, Cloud Developer Services

Follow