Wireframing And Storyboarding With PowerPoint & PowerMockup

wireframing-storyboarding-microsoft-powerpoint-powermockup
Wireframing has become an integral part of developing websites and software applications. It is a quick and easy way to visualize user interface ideas and discuss them with others. “Fail fast, fail early, fail often” is the mantra here: You get your ideas in front of the relevant stakeholders as soon as possible, gather their feedback and then iterate toward a solution that everyone is happy with.


Quite a few designers and information architects prefer hand-drawn wireframes on paper as a starting point. The simplicity and direct nature of paper and pen helps them to be freely creative and focused on generating ideas. While paper sketches are an effective method for initial layout experiments, further refinements can become tedious on paper and should therefore be performed digitally on screen (think about features such as undo/redo, copy and paste, templates, versioning, etc.).

If you are interested in the UX field, you will probably have come across several web and software apps that are specifically designed to create wireframes. In this post, I’m going to introduce you to a tool that is slightly different from the rest: PowerMockup – a wireframing add-on for Microsoft PowerPoint.

Why Microsoft PowerPoint for Wireframes?

You may wonder why someone would choose PowerPoint to create wireframes. One good reason for this is that PowerPoint is available to a broad audience and invites stakeholders without development and design skills to take an active role in the process. Project managers, architects, visual designers, developers and clients can all collaborate in a familiar and easy-to-use environment.

Another plus for PowerPoint is its slide-by-slide approach, which makes it a great tool for creating storyboards that show user flows through a series of wireframes. By adding mouse click and mouse hover actions you can also turn wireframes into simple, interactive click-through prototypes.

Other notable features that qualify PowerPoint as a wireframe tool include the following:

  • Ability to auto-align shapes through “Smart Guides” and functions like “Distribute Horizontally.”
  • Availability of basic layer functionality (“Bring to Front,” “Send Backward,” etc.)
  • Support for grouping/ungrouping shapes
  • Plenty of import and export formats, ranging from standard bitmap files (PNG, JPEG, etc.) over vector images (EMF, EPS) to PDF documents
  • Possibility to share common elements across multiple wireframes via master slides
  • Availability of commenting and inking features for peer reviews
  • Option to collaborate and share presentations via SkyDrive cloud storage (much improved in the recently released Office 2013)

What does PowerMockup Add to the Picture?

PowerMockup is an add-on that integrates itself into the PowerPoint window and provides a library of wireframe stencils for various user interface controls. Using PowerMockup is as simple as selecting a stencil from the library pane and dragging it onto your PowerPoint slide. Since all stencils are built with standard PowerPoint shapes, you can easily make adjustments and additions. Furthermore, wireframes that have been created with the help of PowerMockup can be viewed and edited even if the add-on is not installed.

wireframing-storyboarding-microsoft-powerpoint-powermockup-2

In its current Version 3.1, PowerMockup comes with exactly 101 UI stencils and 150 monochrome icons. To help you find the right items, the tool offers a quick search feature that allows direct and synonym matches (such as “Textbox” or “Input Field” for a “Text Area” control).

One feature of PowerMockup’s stencil library that you will quickly come to appreciate is its extensibility. You can easily add your own stencils by right clicking a shape on slide and choosing “Add Stencil” from the context menu. PowerMockup also lets you export your custom stencils to a single file, so you can share your creations with your team.

wireframing-storyboarding-microsoft-powerpoint-powermockup-3

In order to use the add-on, you need to have PowerPoint 2007, 2010 or 2013 for Windows installed. As PowerMockup relies on features that only the Windows version of Microsoft Office provides, it doesn’t work with Office for Mac. If you want to give PowerMockup a try, you can download a free trial version from the product website at www.powermockup.com.

Conclusion

I’m well aware that many designers and developers have a somewhat negative attitude towards PowerPoint. Designers love their professional graphics suites, while the majority of developers would rather write code than fiddle with PowerPoint slides; there’s nothing wrong with that. However, especially with large projects, PowerPoint can perform well as a common design platform that is open to everyone and allows all to contribute. In addition, PowerPoint has better design tools than many think, and its lack of wireframe templates can be easily resolved by installing the PowerMockup add-on.

Disclaimer: This is a “sponsored review.” The opinions expressed in this article are the author’s only. Regardless, I only publish reviews of products or services that I believe will be good for my readers. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising. If you have a product or a service that you think that it would appeal to the readership of UsabilityGeek, please do not hesitate to contact me.

Related Posts

Newsletter

Subscribe to our free weekly newsletter so that you can receive useful tips and valuable resources directly into your mailbox. (No Spam)

About our Newsletter

Featured Deal

View All Current Deals