by Andreas Wulf
It’s important for designers to translate the ideas in their heads into a tangible form that stakeholders can relate to. Prior to writing any code, wireframes are a great way to quickly map out the functionality and flow of a website or application. This helps anticipate conflicts (“That’s not what I had in mind”) early in the process, at a point where they are painless to correct.
Dedicated wireframing tools are in abundance, so you might be surprised that my weapon of choice for sketching wireframes is Microsoft PowerPoint. PowerPoint makes it possible for stakeholders and non-techies to participate in the design process. When exchanging PowerPoint slides over email, you can be fairly certain everyone will be able to view and edit them. The software’s widespread availability and low barrier to entry make it an excellent communication tool, able to bridge the gap between developers, designers, and clients.
As well, the design capabilities of PowerPoint are far better than the application’s reputation would indicate. In this article I’ll show what PowerPoint 2010 (for Windows) brings to the table when it comes to creating wireframes. Maybe I can convince you that PowerPoint isn’t as evil or dumb as you might have thought.
Arranging and Layering Support
Whatever simplifies is useful. Real-world wireframes can quickly become fairly complex as the number of elements accumulates, but PowerPoint’s grouping capabilities allow some order to be brought to the chaos. Just select two or more shapes on a slide and choose Group > Group from the context menu, or simply press Ctrl + G (or Ctrl + Shift + G to ungroup).
A helpful tool when working with grouped and layered shapes is the Selection Pane, available via Home > Drawing > Arrange > Selection Pane. It gives a hierarchical overview of all the shapes on the current slide and makes it easy to select individual shapes that are part of a group or are hidden by other shapes.
PowerPoint’s aligning and distributing features are also essential for wireframing. The menu items found under Home > Drawing > Arrange > Align give several ways to align shapes on the slide or distribute them evenly. A nifty addition in PowerPoint 2010 is the Smart Guides feature. When you move a shape around, indicator lines let you know when the shape lines up with another shape.
Import/Export Facilities
PowerPoint supports quite a few import and export formats. Besides common bitmap formats like JPEG or PNG, it can also work with vector images in EMF, WMF, and EPS format. I personally often draw icons in Inkscape (an open-source vector graphics editor) and export them to an EMF file, which I then use in PowerPoint. A lesser-known feature of PowerPoint 2010 is that it can export slides to PDF documents, or even convert them into a WMV video (File > Save & Send > File Types > Create PDF/XPS Document or Create a Video).
Adding Interactivity
Presentation features make PowerPoint an ideal tool for demonstrating an application’s flow as a storyboard. Slide by slide you tell a story, presenting different steps in a user-interaction process.
Such a story can be linear, or dynamic and non-linear using Actions to create buttons that move to specific slides when clicked. To configure an action for a shape, simply select it on the slide and choose Insert > Action from the Ribbon Bar. It’s worth noting that Actions only have an effect when PowerPoint is in presentation mode (press Shift + F5 to see the current slide in presentation mode).
You can even create macros in VBA (Visual Basic for Applications) to simulate application behavior—if you’re a bit crazy, that is. Info on how to bring up the Developer tab to start the VBA editor is available here. I would say that writing VBA code requires too much effort, defeating the purpose of rapid, low-fidelity wireframing, but it may suit your needs.
Making Use of Masters
Slide Masters allow you to create reusable templates for your slides. When you make different wireframes that follow the same layout and share the same elements (such as a common header, menu, and footer), this facility is especially useful.
To view the existing masters, select View > Slide Master from the PowerPoint Ribbon. After creating a new layout and closing the master view, you can apply the master to an existing slide by right-clicking the slide and selecting the master from the Layout menu.
Integration with Word and Other Office Applications
Another benefit of using PowerPoint for wireframing is that it’s possible to fully embed slides into a Word document. I use this a lot when writing specifications. Instead of having multiple documents that quickly fall out of sync, I can keep all relevant documentation in one place.
The easiest way to embed a PowerPoint slide into a Word document is to drag & drop the slide from PowerPoint’s Slides pane directly into Word. You can then double-click the embedded slide to activate it for editing. It’s also possible to copy a slide from PowerPoint’s Slides pane and insert it into a Word document using Paste > Paste Special… > Microsoft Office PowerPoint Slide Object.
Collaborating and Sharing Designs
Wireframes are usually subject to a lot of discussion and change. To keep up with all the comments, you can use PowerPoint’s review features, available under the Review Ribbon tab. This makes it possible to add user-specific comments, and PowerPoint 2010 can also compare different versions of a file and consolidate the differences.
An easy way to share a PowerPoint slideshow with coworkers and clients is to save it to SkyDrive (you can get 25 GB of storage for free from Microsoft) or SharePoint. Both services allow you to specify who is allowed to view and edit the file, and to keep track of changes through a version history.
Ready-to-Use Wireframe Stencils
My enthusiasm for using PowerPoint for wireframing led me to develop PowerMockup, an add-on that provides ready-to-use wireframe templates for the typical elements of an application: buttons, text boxes, menus, tabs, tables, and many more. It even allows you to create and categorize your own wireframe stencils. Feel free to download the demo version and give the tool a try.
