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.
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.
A while ago I posted a Photoshop color swatch with the accent colors of Windows Phone 7. I’m currently working on the design of a few apps that will be released for Windows Phone 8 too. So I created a new set of colors.
You can download the set here: WindowsPhone8Accent.
I recently tweeted about some upcoming new design templates. At that time these templates were not released yet. Today I stumbled on them again. And it turns out that they are available for free on codeplex. You can see them all here.
It’s not recommended to uses these templates as is. They’re provided as Visual Studio solutions in C# and JS and you should change the design to match your brand, of course.
UPDATE May 9th 2013:
Added 10 more templates to the list.
Here’s the entire list again. Click on the image to go to the template.
Sometimes images look nice on a regular computer screen, but when used in your Windows Phone application they become ugly. This effect is most often seen on gradients and images with smooth coloring. In gradient images you’ll start to see stripes and bands. It looks like the colors in the image don’t blend anymore.
Below are the 32bit and 16bit versions of the same images. Notice the banding on the right one.
This problem may be caused by a setting in your application or just by screen of the phone itself. It occurs when a 32bit image is shown on a 16bit screen. Because there are way more shades of colors available in 32bit images than in 16bit images, you’ll start to see these artifacts when the depth doesn’t match the screen.
The solution is relatively simple. Just scramble the pixels a bit to make the colors look like they blend. This process is called dithering. Maybe you’ll remember, back in the days with Windows 3.11, you often saw ‘gradients’ in images with only two colors. Starting with 1 color and along the image there appeared more and more pixels of a different color.
Here’s another example of dithering. When you have only 256 colors available for a gradient, you’ll have to do something like this to blend from color to color.
Below is the dithering effect used on a 16bit image. On the left is the original 32bit image. The middle image is the plain 16bit version, with banding. The one on the right one dithering applied to it.
How to fix
The best way to fix this problem is to make sure your images look right. Don’t depend on the phones to fix the problem for you. I personally do not want to take the risk of any of my images looking ugly on someone’s phone. When the artwork is crap the app is probably too. Always make sure you walk the extra mile to make your apps look perfect. If a similar app looks better, people use that one instead of yours!
After downloading and installing I’ve opened a splash screen for my app in Paint.NET. The image uses a lot of smooth transitions between colors and will look bad on some phones.
Next, go to Effects –> Photo in the menu and select Simulate Color Depth…
I’ve you did not get the earlier part about the dithering and the different bit depths, I suggest you play a little with the settings to see what’s effect of the different bit depth settings. And turn Dither on and off a couple of times to see the magic happening.
I personally use the Bayer Ordered 8×8 method on all my images. But you’ll free to use an other one if you like.
Hit Ok and you’re done.
If you are using Photoshop for your imagery, you can find an action to apply dithering to your images over at Robby Ingebretsen’s blog.
Unfortunately not everyone is dithering their images, which results in bad looking apps. As you’ve seen it’s pretty simple to resolve. I hope to never see banding and ugly artifacts in applications anymore.