in Design

PowerMockup: Create Wireframes and Storyboards with PowerPoint

I’d like to thank the folks at TDM for giving me the chance to introduce you to PowerMockup, a wireframing tool that my small company has developed. PowerMockup is an add-on for Microsoft PowerPoint with hundreds of templates for user interface controls and icons. Creating a wireframe with PowerMockup is easy; simply select the controls you need from the library pane and drop them onto your PowerPoint slide.

PowerPoint: The Good

Before digging deeper into the details of how PowerMockup works and what features it offers, let me explain the benefits of using PowerPoint for wireframing. I understand that with so many dedicated wireframe tools available, choosing PowerPoint may come as a surprise to many. Some may even strongly oppose PowerPoint­—maybe because they were tortured with dull PowerPoint presentations in the past (who hasn’t?), or because using a Microsoft Office product seems uncool. However, PowerPoint definitely has some strong qualities that make it a strong contender as a wireframing tool:

1.       PowerPoint has a low barrier of entry and is easy to get started with. Most users have it already installed on their computers and are relatively familiar with it. And even those who have never been in contact with PowerPoint will quickly get up to speed with it. Creating a presentation in PowerPoint is mostly a matter of dragging and dropping shapes onto a slide and doesn’t require any special knowledge.
2.       Using PowerPoint encourages people without design and coding skills to contribute to the development process. They can work in a familiar environment without feeling intimidated by a proprietary wireframe tool they have never seen before. With PowerPoint, all project stakeholders such as managers, developers, designers or even clients are able to collaborate using the same tool. This is an important aspect because wireframing is essentially a team sport which produces the best results when all members are actively engaged.
3.       PowerPoint is ideal for storyboards and simple screen-by-screen prototypes. The tool’s presentation features make it very easy to demonstrate different steps in a user interaction and put your wireframes into context. To simulate basic application functionality, you can use so-called “Actions” that let you define behavior for mouse click and mouse hover events (via “Insert” > “Action”). And if you need to create a more complex prototype, there’s always the option to write a VBA (Visual Basic for Applications) macro.
4.       PowerPoint’s drawing tools are more sophisticated than you may think. It supports grouping (Ctrl+G) and ungrouping (Ctrl+Shift+G) of shapes, has basic layer functionality (Alt+F10), provides useful auto-aligning features (“Align Center”, “Distribute Vertically”, etc.), and allows you to use master slides for sharing common elements across different slides. Besides that, PowerPoint includes support for several import and export formats, ranging from standard bitmap files (PNG, JPEG, BMP, etc.) to vector images in EMF and EPS format. Since version 2010, you can also export slides as a PDF document (“File” > “Save & Send” > “File Types” > “Create PDF”).
5.       Newer versions of PowerPoint have interesting collaboration and sharing features. You can leave comments on slides that co-workers have created, compare changes from two copies of the same presentation and merge the differences (via the “Review” tab). PowerPoint 2010 and 2013 also provide you the opportunity to share your files via SkyDrive (Microsoft’s cloud storage service, similar to Dropbox, Google Drive or iCloud). SkyDrive automatically keeps track of the changes made to a file and enables you to define who is allowed to view and edit it.

PowerPoint: The Bad

Despite all the praise, there are a few areas where I think PowerPoint can do better as a wireframing tool:

1.       There’s no way to use slides of different sizes in a presentation. When creating wireframes for mobile devices, in particular, it would be helpful to be able to combine slides in both portrait and landscape mode in one single file.
2.       You can’t create scrollable layouts. This means that a wireframe must always fit the visible part of a slide, which may require splitting large web pages over several slides.
3.       PowerPoint’s zoom feature needs improvement. When zooming into documents by holding the Ctrl key and moving the mouse wheel forward, it doesn’t zoom toward the position of the mouse cursor, which is awkward and unnecessarily complicates matters. I would also love to see support for zoom levels larger than 400% to allow for more precise positioning.
4.       PowerPoint doesn’t support pixel-based measurements. While this is usually not a problem for wireframes (which don’t need pixel-precise accuracy), it would be a useful feature for creating screen mockups.
5.       Unlike dedicated wireframing tools, PowerPoint doesn’t offer any templates for wireframe elements out of the box. This last point, however, can easily be compensated by installing PowerMockup.

What PowerMockup Brings to the Table

PowerMockup is basically a library of PowerPoint shapes for UI controls and icons. It comes as an add-on for PowerPoint 2007/2010/2013 for Windows (sorry, no Mac version yet) and adds a library pane to the right side of the PowerPoint window. From this pane, you can drag and drop controls onto a PowerPoint slide to put together a wireframe layout quickly. To find the controls and icons you need, PowerMockup offers an instant search feature that also searches for synonyms like “combo-box” and “drop-down menu”.

One feature that our clients often rave about is PowerMockup’s ability to add new elements to the library. All you have to do is select a shape on a slide, right-click and select “Add Stencil” from the context menu. You can also create your own categories and share them through PowerMockup’s export/import facility.

If you want to give PowerMockup a try, feel free to download the trial version from the PowerMockup website. Happy wireframing!

About the Author

Andreas Wulf is the founder and owner of Wulfsoft, a software company located in the beautiful city of Münster, Germany. He holds a Master’s Degree in Information Systems and has a background in designing and developing large software systems for the financial industry.

Andreas Wulf