Designing a custom SharePoint site involves a fair bit of customization and branding of the user interface. In the old days I’ve been using a mix of different tools: Microsoft Visio, PowerPoint and Mindjet MindManager to name a few. For thoughts on those, read my previous article on Prototyping SharePoint.

With the introduction of Visual Studio 11 Beta, we’ve got another tool to choose from – it’s called PowerPoint StoryBoarding. Even in beta I’m amazed how good and useful it seems to be.

I’ll introduce the tool but first, let’s install the necessary software.

Installing Visual Studio 11 Beta

You’ll need to download Visual Studio 11 Beta here. I’m using the Ultimate-edition, since it’s still in beta and you don’t need to purchase the outrageously expensive license until RTM time later this year.

Just download the small (~1,1 MB) web setup file to initiate download. Alternatively you can also download a full ISO file from MSDN Subscriptions.

Next, start the installer:

Enter target directory and agree to license terms and conditions. Also, admire the new dark theme:

Click Install:

It’s really that simple! Compared to Visual Studio 2010, it’s 5 minutes faster to initiate the installation and requires 20 clicks less. Very neat, but it also requires +8 gigs of free disk space and will – by default – install everything (this includes Visual Basic.NET, C# and F# for example).

Installation takes 5 to 10 minutes for the ISO, and a bit longer if you need to download bits while installing:

A reboot is required after install is complete:

That’s it! You can now start Visual Studio 11 Beta to check that everything is in place:

Introduction to PowerPoint Storyboarding

Now that you have Visual Studio 11 Beta installed, you should also have PowerPoint Storyboarding in Start-menu. I’m using Windows 8 Consumer Preview so it can be launched by typing Story in the Metro-based Start-view:

You are now presented with the all too familiar PowerPoint, that has a new Storyboarding-sidebar:

There’s a new Storyboarding ribbon tab too:

Here’s how Storyboarding works:

You create a new PowerPoint slide for each view the user will see. You’ll use the built-in icons, shapes and annotations the Storyboarding-sidebar provides.

The following categories are provided out of the box:

• My Shapes – for shapes you want to re-use
• Annotation – for explaining your storyboards during a presentation
• Backgrounds – there’s even one for SharePoint
• Common – typical web UI elements such as breadcrumb navigation and search box
• Icons – typical icons such as file attachment, copy and paste
• Media – Web 2.0-style (not themed) shapes, such as tag cloud and web ad
• Metro Icons – Metro-themed icons
• Metro – Metro-themed shapes and icons
• Windows Phone Icons – A few WP-themed icons
• Windows Phone – WP-styled shapes and controls
• Windows – Typical Windows controls such as status bar and file menu

While PowerPoint Storyboarding is not strictly intended for SharePoint UI prototyping, it’s a pretty solid choice for that. Let’s see a few easy samples for creating a SharePoint-based branding.

Creating a SharePoint branding with PowerPoint Storyboarding

We’ll start by adding a SharePoint-themed background on slide 1:

Dropping a background on a slide automatically aligns it correctly. You can edit the placeholder such as top (global) navigation, address bar URL, username and quick launch.

Here’s global navigation with the default values:

And here’s global navigation with some subtle changes:

Next I added some random controls to showcase how easy it is to add relevant content and SharePoint-style items on a page:

Everything else is using the defaults, except the main text, which I copy-pasted from www.slipsum.com (much less boring than www.lipsum.com).

A few of the shapes also have pre-configured animation. Those are denoted with the PowerPoint animation icon:

 

There’s not much to choose from in the animated shapes category but a few good ones. There’s one to simulate a click visually:

And then there’s the two animated annotations, which we’ll cover in a bit:

I’m a bit surprised that none of the Metro-style icons or shapes support animation. Even a mock-up live tile is nowhere to be found – just the regular static versions can be used:

For now I’m happy to use these but my quest to finding a good looking animated live tile persists.

Using custom shapes

You’ll probably get bored quite soon with the default shapes and icons if you do storyboarding for SharePoint. With the support for custom shapes, you can easily add your own custom shapes, icons and other graphical items for re-use in your storyboards.

It couldn’t be simpler.

Drop any graphic from another program on a storyboard slide. Here’s a Web Part Zone-graphic I picked from my Page Layout in Edit Mode:

RIght-click on the graphic and select Storyboarding > Add to My Shapes:

This adds the graphic to the sidebar under My Shapes:

You can now select the shape and it gets added on your storyboard slide. Here I’ve added a ribbon from Page Edit-mode, a breadcrumb-control, the social features icons and a few web part icons:

Since graphics you add yourself are not vector-based, they are saved as bitmapped images. Scaling a saved shape distorts the contents:

What I found to be the most working solution was to avoid really small icons, or capture those in a larger resolution and then downsizing them before saving as a shape.

As a bonus, you can also construct multiple graphics as you like, and then save all those graphics as a single shape. Just add whatever graphical elements you need, select them all and right-click > Add to My Shape. While similar to grouping you cannot de-couple the graphic at a later time.

Using annotations

Annotations are slick little post-it notes you’ll need to use when you present your storyboard to others. There’s 4 to choose from:

The banner one looks like this:

It’s hidden by default and becomes visible with a mouse click, so essentially it’s a simple animation. A rectangle callout is more prominent, also with animation:

The sticky note also delivers:

It’s really intended more as a note, while callouts are intended for calling your attention for a specific item.

Sharing your storyboards

Sharing your storyboard is a matter of saving your storyboard as a .pptx –file:

It doesn’t require anything special from others to view the storyboard, PowerPoint suffices. They even work on Office Web Apps with SharePoint Server 2010:

Final thoughts

PowerPoint Storyboarding is a feature long overdue for anyone working with prototyping, proof of concepts or general UI branding – SharePoint or sans SharePoint.

It’s bewildering that Microsoft has not done this before. We’ve had Sketchflow as part of the Expression package but it was limited through licensing and wasn’t really useful for numerous other reasons. And now that Silverlight is practically dead for web-based development on SharePoint, there’s no reason for Sketchflow to exist or evolve. Unless it starts producing HTML5.

While this feature is great it also lacks a lot of things. Granted, it’s still in beta but it seems like a finished product already. The things I’m hoping to get in RTM are simple: more animated icons and shapes, some kind of built-in browser emulation/mockup and export to HTML + CSS for super-quick site building.

Until then, I’m happy to use the beta!