CUA Central

A worldwide community for Certified Usability Analysts

5 Tips for Creating A Wireframe In PowerPoint

A popular article from my blog Fail Forward. Originally posted February 1, 2010.

Anyone who creates wireframes on frequent basis will read the title of this post and laugh.

Who creates wireframes in PowerPoint?

Every once in a blue moon, I do. So here are five tips if you find yourself having to make a wireframe using PowerPoint.

This all started because I had the privilege of working with an enthusiastic client who dabbles in "web stuff" and wanted to expand her horizons. Part of our engagement included creating a simple wireframe. She asked if she could help out.

"Absolutely!" I replied. I remember how badly I wanted a mentor (and still do!) when I was new to the UX field.

My best advice for creating a wireframe is to skip technology completely. Put pen to paper and sketch!

In this case the client was off site. We couldn't sit down and sketch out our ideas, and she didn't have access to a scanner. Sketching was out.

Over email I asked, "Do you have Visio or InDesign?"

"I had an old version of Visio but it was removed from my toolkit a year ago. All my shovels and diggers were removed from my sandbox. :( I'm left with PowerPoint, unfortunately."

I replied, "No need to say unfortunately!"

Visio and InDesign are expensive and can be hard to justify buying if you're not going to use them regularly. Not to mention you have to learn how to use the software.

If you are creating a simple, annotated wireframe PowerPoint can get the job done.

Plus, if you are comfortable using Power Point already there isn't as much of a learning curve. Here are a few tips to help you get the most out of PowerPoint for the purposes of creating a simple, annotated wireframe.

To show you how it can be done, I'll recreate the Prepare Your Home and Family page from the American Red Cross website.

Tip 1: Take a screenshot.

For my client engagement, I was working on a section of a larger site. I could not change pieces of it, like the header and horizontal navigation. I needed to recreate those pieces inPowerPoint. So I began by taking a picture of the screen.

I used the Web Developer plugin by Chris Pederick to set my Firefox window to 1024 x 768. (Note: If you have several rows of toolbars exposed in Firefox you may want to turn some off so you get more of the website in the shot.)

Then I used the Screengrab plugin by Andy M to save a copy of the visible portion of the window.

Here's how the shot turned out:

Screenshot taken on my computer

Tip 2: Use the Slide Master. Trace design elements from the screenshot into the slide master.

Slide Masters allow you to make universal style changes to every slide in your presentation. Traditionally, it's used to control things like the background color, fonts, placeholder sizes, etc.

Start a new presentation in PowerPoint 2007. Select View and Slide Master from the ribbon. Make sure you select the top slide in the list.

Note: If you are not familiar with Slide Masters read more about them in the Help section. Search for "slide master" and believe it or not, Microsoft provides a good explanation.

On the Red Cross page the logo, navigation labels, search box and 'Donate Now' button are going to stay in the same place on every webpage. I'll recreate those elements in the Slide Master. That way, when I switch to the presentation view, I'll never have to copy and paste those elements onto each new slide I create.

Tip 3: Repurpose the Placeholders and Adjust the Theme

All of the placeholders in the Slide Master are useful for wireframing.

Default Slide Master

Resize the text inside the title placeholder and move it to the top. Ditto with things like page numbers and dates.

What about the master text placeholder that takes up most of the screen?

Change the styles to something closer to what will appear on the webpage. For instance, remove the bullets, reduce the font sizes, adjust the paragraph spacing as needed, and in the long run you'll have consistent text formatting across each wireframe/slide you create.

Slide Master after minor changes

I prefer to create wireframes in black and white or grayscale. In my experience, the more "finished" the product, the less honest feedback you'll get. That's why sketching is great. People don't take it seriously (and they shouldn't).

To avoid the temptation to add a splash of color, change the color scheme to grayscale. You'll find the grayscale option in Colors drop down in the Edit Theme section of the ribbon.

Tip 4: Trace the screenshot

Paste the screenshot you took early into the slide master. Begin tracing the design elements that will remain the same on every page.

In the Red Cross example, I've highlighted the design elements that will remain the same on every page in yellow. These are the first elements I'll recreate using shapes and text boxes.

Yellow highlights show the design elements that will stay the same on each page.

And here's what it looks like after I've traced the elements. Notice how I moved the Master text styles placeholder? It is now in the same area where the left navigation will appear.

Slide Master after tracing the screenshot

I'm also going to modify an existing layout. Every slide master has a set of layouts associated with it. When you are creating a presentation, the layouts are what you use to create a two column slide for example.

For wireframes, I might create several layouts to represent a two- or three-column webpage. The Red Cross example is essentially a three-column layout. Right now, I've got my left navigation set up in the slide master and I want to create a layout that includes a text placeholder for the center column.

Slide Master with multiple=

At this point the slide master and layouts are in good shape. Close the Slide Master and begin creating your wireframe slide show...

Tip 5: Use the Notes section to annotate the wireframe

Thanks to the slide master, each time you add a new slide to the deck, you won't have to copy and paste the header or right column. Not to mention, you won't accidentally erase an element in the header.

Once you've created your wireframe it's not unusual to need to add notes and descriptions--annotations. The notes section in PowerPoint is the perfect place to do this.

Slide showing annotations in the Notes view

Additional wireframe references and resources:

So there you have it. There are plenty of other tools--Omnigraffle, Visio, Axure, InDesign and so forth. But if push comes to shove or if you're just starting out, you can create a basic wireframe in PowerPoint.

Smashing Magazine's 35 Excellent Wireframing Resources is by far one of the most comprehensive lists I've seen on the theory and practice of wireframing.

As your skills advance, consider reading one of my earlier posts about using EightShapes Unify.
I'm using PowerPoint 2007.

Views: 72


You need to be a member of CUA Central to add comments!

Join CUA Central

Comment by Vaibhavi Uchil on January 29, 2011 at 12:34pm
Thanks for your Tips on using the Notes Section and the Master Slide!!!
Comment by Julia Borkenhagen on March 4, 2010 at 5:57am
another benefit of ppt vs visio is that you can easily show interactivity - and this comes from someone who has been using visio for decades (ok - one decade :-)
Comment by Shailaja Bhagwat on March 4, 2010 at 4:30am
Thanks for this helpful piece. I have been using PowerPoint for creating wireframes. I find it’s easy and works best for its compatibility across OS. I liked the way you explained adding annotations in the notes section.
Comment by Tammis J. Lewis on March 3, 2010 at 4:44pm
Another great thing about Powerpoint is that just about everyone has it already. That makes distribution of your wireframe less painful! Thanks for the reminder about this software!
Comment by Karin Bell on March 3, 2010 at 7:04am
This was great. I also use Powerpoint for creating quick wireframes as I've been using Powerpoint it seems forever to do just about everything. I must admit, always being in a rush when a quick wireframe has been requested, I have never taken it to the level of customizing the slide master. Thanks for reminding me that this is more efficient in the long run. When I get the time, I plan to create a few templates that I can pull from and must modify based upon each project as it comes along.
Comment by Ekta Rohra Jafri on March 3, 2010 at 1:51am
Powerpoint is my preferred tool for making wireframes too. The best parts that I like are the advanced features. Especially for mobile applications, they often turn out exactly the way the powerpoint shows them as you can even design high level interfaces quite easily. What's more, I love to animate menus on powerpoint shows so that the interaction patterns also come through quite flawlessly. And the comparative effort required is very less for even hi-fidelity interfaces!!
Comment by Kavita Vakharia on March 3, 2010 at 1:04am
What a helpful piece! I have been using the PowerPoint extensively for creating wireframes. Its cumbersome at times, but once you optimize the use of the master slide, things get smoother. I loved the way you explained how to use the master slide. And the bit about adding annotations in the Notes section.
Comment by Jennifer Wang on March 2, 2010 at 11:47pm
This is great! I could def use this some day soon! Thanks so much for sharing Megan!
Comment by Praveen Nair on March 2, 2010 at 11:29pm
I use PowerPoint for wire framing frequently. I am surprised to read this "Anyone who creates wireframes on frequent basis will read the title of this post and laugh". I know there are new tools available like Axure, Visio and others which are expensive and it can be a pain convincing stakeholders to buy them.

PowerPoint is a very simple, reasonable and powerful tool. Once mastered, can do wonders! It works best because it is compatible across different OSs and legacy systems. You could also allow editing to the customer who wants to try his hand at design and also give feedback (which you will anyways change later on :-) )
Comment by Bipin Saxena on March 2, 2010 at 9:26pm
How thoughtful... out of the box thinking :) I like the idea and this definitely is going to be useful.

UX Research Review Archives

September 2015

August 2015

July 2015

June 2015

May 2015

April 2015

© 2017   Created by Human Factors International   Powered by

Badges  |  Report an Issue  |  Terms of Service