A little while ago, I wrote a post called Visual Studio 2012 Tips Part 1 – PowerPoint Storyboarding in which I discussed creating StoryBoards with the PowerPoint add-in that comes with Visual Studio Premium and Ultimate.

It helps you design your application’s interface and allows rudimentary interactivity through the use of hyperlinks between the slides. Well this is all good and well, but what if you don’t have Visual Studio? What if you’re not a .NET Developer?

Enter PowerMockup. I have been using it for a few days now, and I have to say that I am incredibly surprised at how easy it is to create interactive UI designs. In no time at all, I was able to create stunning interfaces and made me realise what an indispensable tool this actually is for a developer.

But let me start at the beginning. Installing PowerMockup is a breeze.

Why am I showing the installation screens I hear you ask? Well to prove a point. The installation screen (for me anyway) is an indication of the level of love a developer puts into his or her product. Too many devs focus on getting the app just right, but fluff over the installation screens. For me, this is like an advertisement to your product.

Think of the Installation Screens of products such as Visual Studio, DevExpress, Telerik and so on and you will see that a lot of time and thought went into making them. This makes me feel excited for the actual product and happily PowerMockup didn’t disappoint.

When you start PowerPoint (yes, I’m using PowerPoint 2013 which PowerMockup supports – along with PowerPoint 2007 and 2010) you will notice a new tab for PowerMockup.

The next order of business is entering the License Key.

With the product successfully activated, we can get down to the business of creating great UI’s.

On the right you will notice the PowerMockup Stencil Library that includes a wide range of templates for typical elements of a website or application. To add an item to your PowerPoint slide, simply drag it to the position you want. It snaps into place easily in relation to the other items on your UI Design. You can also use the keyboard to move the items more precisely. All stencils are based on regular PowerPoint shapes and therefore are fully editable.

Next, I dragged the Tablet Stencil onto my slide and started adding other items to it.

I selected the Accordion control from the Stencil Library and dragged it onto the Tablet stencil on my slide.

This snapped into my Tablet stencil beautifully.

Selecting the Accordion, you will notice  that the ribbon toolbar changes to include the Accordion Options.

This enables you to modify the Accordion Item on your slide.

After a few minutes, I added a Login Control and renamed the Accordion Sections as needed.

I then created a new slide and copied and pasted the previous tablet item I created to the new slide. This allowed me to slightly modify an already created item instead of creating it all from scratch again. PowerMockup allows you to also save previously designed items as templates that you can add to the Template Library.

I then repeated the process and copied my Tablet item to a new PowerPoint slide to create a third slide.

Next, I started creating the links between the slides to create the idea of a functional system. I right click on the ‘Sign In’ button and select Hyperlink from the context menu.

From the Insert Hyperlink window, I select Slide 2. This will then create a link to my second slide and when I click on the ‘Sign In’ button, PowerPoint will navigate to the second slide.

I repeat this process for the Search Textbox and for any other items on my UI screens.

What I also did was to paste a screenshot of  a video playing in the video section of the Tablet Item so that it illustrates that the app can play video’s.

Lastly I created a Hyperlink from the Tweet button which navigates to the Compose Tweet screen. There is virtually no limitation to what you can do in PowerMockup.

Have a look at the short introduction to PowerMockup.

Pricing

PowerMockup’s pricing is also very reasonable starting at $59.95 for a single developer. You can install it on up to three computers if you are the sole developer using the product. This cost is a one-time cost, in other words you will not pay monthly or yearly license fees. PowerMockup also comes with a 30 day money back guarantee. If you don’t like the product (which I seriously doubt), just let them know and they will refund you.

Some Features

The features list is quite impressive. You can find more info on their site, but here are some of them.

• Loads of Stencils and Icons – The stencil library provides you with templates for the typical elements of a web or Windows app such as buttons, text boxes, tabs, tables etc.
• Instant Search – You can search the stencils with PowerMockup automatically filtering the list of stencils until you find  the one you are looking for.
• Create your own stencils and categories – If you create a template that you often use, you can add it to the Stencil Library by right clicking on it and select ‘Add Stencil’. You can also share your stencils with others by exporting and importing stencils. This is a very powerful feature allowing you to expand your library with the creations of others.
• Smart Stencils – Resizing your stencils ensures that the aspect ratio is maintained without you having to think about it. It is all done for you.
• Use PowerPoint 2007, 2010 and 2013 – PowerMockup is also compatible with all these versions of PowerPoint (x86  and x64) in a single installation package.

I am very impressed with this product and I would recommend it to any developer needing to create interactive UI’s. Feel free to contact the folks at PowerMockup if you need any further info.