UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 786 February 2, 2012

Wireframing in Powerpoint? It Works!

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.

Example Wireframe

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.

Arranging shapes in Powerpoint

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).

Exporting a slideshow to PDF

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).

Configuring a click action

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.

Embedding a Powerpoint slide into a Word document

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.

PowerMockup wireframing add-on

ABOUT THE AUTHOR(S)

User Profile

Andreas Wulf is the owner of Wulfsoft, a software company located the lovely 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.

Add new comment

Comments

16
15

While I found PP quite usable for wireframing (I am in fact working in a project and wireframing with this tool, with the client's templates), the main reason why I would never choose it should I be able to choose tool, is because Powerpoint measures in CM / Inches, and not in pixels. That makes it, in my opinion, a poorer tool when trying to be more accurate in zonings, text and image sizes, button sizes, etc.

Anyway, and besides my considerations, I would like to add, to the powermockup excellent templates, the ones that keynotopia.com sells, originally for Apple's Keynote software and now also available for Powerpoint.

11
20

Wow, a practical purpose for PowerPoint. Cool!

18
22

Powerpoint isn't meant for wireframing. If you want to do wireframing use tools like Balsamiq Mockup. I can't believe that you would ever recommend anyone to use Powerpoint as a wireframing tool.

19
19

YES! I All I use is Powerpoint (mac) It really has a lot more than people give it credit for.

21
15

Ready-to-use wireframe stencils: I second Brian on Keynotopia's wireframe templates. They have them for PowerPoint and they're GREAT! Huge time-saver + can turn wireframes into high fidelity/pixel perfect (ready for development :) interactive prototypes with just a few clicks. Highly recommend them not just for mobile apps but for web and desktop apps.

18
21

I've used PP in the past for IA and some wireframing and it's a passable tool and if you are accustomed to using PP the learning curve will be easy to absorb. I am a little pissed that the PowerMockups is only available as an EXE file. Kind of leaves us Mac users (most designers I know) unable to use your templates. So for now - I will stick to Balsamiq and hope for more and better libraries.

17
16

Where I work, we are mostly tool agnostic for creating wireframes... sure we have templates and stencils created for specific applications but if you are good at hand sketching, your sketches can be scanned and placed into one of our client-facing presentation decks.

As Jonathan said below "The primary function of wireframes is to communicate, not to be visually pleasing." Generally as long as the wireframes can be put into our InDesign templates for presenting, they're golden.

If someone decided that their preferred wireframing method is pinning string to a piece of cardboard, unconventional as it is, if it's effective we'll figure out a way to present it to the client.

17
20

When I began reading this article, I was instantly against the idea. I used Illustrator for about 3 years to do wireframes and then switched to using Balsamiq over the last few months. I can see some good points about using PowerPoint for wireframes. However, Balsamiq allows you to do things very quickly and easily while PowerPoint would hinder you. PowerPoint hides certain things that you would need to do a good wireframe within its menus (such as the align). I can see how it may be useful for someone without the means of purchasing these professional design tools, but are those the types of people who should even be reading UX Magazine or creating wireframes in the first place?

I believe that is like telling someone they could build a house with a hammer, wood, and some nails. However, there is a lot of architecture and engineering that would go into the house that just a home-buyer who wants to build a house couldn't know. Someone who wants good user experience who tries to build wireframes in PowerPoint would be the same thing.

22
19

I'm also a fan of PowerPoint for Wireframing.

I have used Axure and DreamWeaver for linked wireframes; but PowerPoint is better because of the flexibility in drawing as well as the capability of generating linked PDFs.

OpenOffice Impress somehow cannot maintain links while converting to PDF.

20
18

I have been using PowerPoint for animated wireframes for years (I call them Live Wireframes).

In addition to all the points mentioned, I'd like to add the following:

Where a lot of these tools like Visio and Omnigraffle fall short is in the area of transitions and modal states. PowerPoint is great at this. Add the fact that you can link object to animations (as triggers to animate other objects) so you can do non-linear animations, and you've got a tool that's tough to beat. This allows for great freedom when testing prototypes.

Here's my $1,000,000 tip: PowerPoint does LAYERS. Yep. Go to the Home tab and look for the Select option in the Editing section (see screenshot above). From the menu, select 'selection panel' and bam! A layer window appears showing you every object on the current slide.

My next tip? You can rename these objects here (double click) in order to facilitate animating them later (i.e. change Rectangle 76 to 'submit button').

I might be persuaded to post something someday which shows you the complexity possible. I'd have to wipe them of client info first. You'd have to say pretty please.

Cheers,
Doon

21
22

An informative piece - I usually swear by Balsamiq Mockups, but I have tried Powerpoint once for creating an interactive mockup with state transitions. It worked pretty good albeit it being a little hard to keep track of linking references between slides.

Btw, It think it's a bit unfortunate in terms of bias that the article ends with promoting a paid product developed by the author.

18
20

I normally use powerpoint for creating discounted wireframes (where I do not have access to paid softwares like axure or balsamiq. And to the end user I do not think it makes any difference if I have to present the layout. But the only limitation I face with powerpoint presentation is when I need to create interactive transactions or interactions. Otherwise powerpoint makes things much faster.

Andreas, thanks a lot for sharing the stencils.

20
19

I've been using PowerPoint to create wireframes and mockups for a few months, and I love it. I used it with the UI templates from Keynotopia to create my first iPhone app proto and it was faster than illustrator and fireworks.

@Erkan Keynotopia also has an OpenOffice (and Keynote) version

17
19

Ive been using PPT for building wireframes for years. It's also a nice tool for creating high-level ia flows. Nice article, indeed. I am surprised that you were expecting negative comments.

21
17

@Tom: I can't share any client wireframes, but you might take a look at the following examples:

http://twitpic.com/8euv1y

http://twitpic.com/8euvpf

http://twitpic.com/8euwgh

http://twitpic.com/8euw8k

23
19

I knew when we decided to run this article that a lot of people would have knee-jerk, supercilious, negative reactions to the idea of using PowerPoint as a design tool. If you're one of those people, please remember to consider:

  • The primary function of wireframes is to communicate, not to be visually pleasing. The efficacy of a communication tool is diminished if only some of the people involved in the conversation can contribute to it. If you have to be a pro with Illustrator or Axure to use wireframes to communicate, then a lot of people get left out and the conversation becomes one-sided. Especially during the critical requirements-definition stage of a project, business analysts and stakeholders are the most important voices, so something that enables them to communicate more effectively in the form of wireframes instead of language-based requirements documentation has a lot of potential to improve the project. Anything that gets BAs to stop trying to define requirements in 3,000 pages of bulleted lists should be enthusiastically embraced. Someone else can make the wireframes pretty later, if need be, but pretty isn't the point.
  • Comparing the effectiveness of PowerPoint as a design tool to that of products like Illustrator misses the point. Of course it's inferior as a design tool for pro designers. But in the hands of non-designers, PowerPoint is actually a far more powerful design tool than Illustrator because they actually know how to use it. Even if non-designers have a license to Illustrator, which they probably don't, it'd take them far longer to figure out how to make a wireframe using it than to just do it in PowerPoint using simpler design features. Much of the power of Illustrator is pointless and confusing to these people, and it would be difficult for them to even figure out how to export, print, and share Illustrator documents.

This all reminds me of an expression: "The best camera is the one you have with you." No one would argue that an iPhone is the best camera, but it's silly to say that people need to own fancy, prosumer DSLRs before they can be allowed to take photos. Easy-to-use, phone-based cameras invite everyone into the world of photography; likewise, broadly available, easy-to-use software products invite everyone to the world of using visual abstractions to communicate about products.

18
13

I'm using PowerPoint to do Mockups since 2001 and it's the most underrated design tool I know. Customers love PowerPoint brainstorming because they understand what I am doing and can make annotations or changes to the design afterwards. If you need convincing evidence, watch this video: http://www.youtube.com/watch?v=RZp7BvQJnU8

21
21

Any chance you can post some kind of example of what you've done with it? Even if just a page or two?

25
22

Why not in Open Office ? ;-)

19
24

I'm an ardent believer in using whatever works for yourself and your team as long as is it efficient. Learning new programs is fun (when timeline allows), but I've never worked anywhere that we didn't have a tight deadline. So if powerpoint works for you all to quickly communicate your ideas and has everyone on the same page, then go for it.

I think it also cuts down the intimidation factor and the "UX takes too long" myth. By using a program everyone is familiar with you can easily communicate your ideas. I appreciate your article to open others to thinking outside the "you must use x to wireframe" lines. Whatever communicates your ideas to the team as efficiently as possible --> go for it!

20
23

Yes, PowerPoint works.... in general, I don't like the fact that it takes extra steps to do something whereas in other programs (inDesign, Axure) it's a one-two click....